Skip to content

E
Element
Commit e8516d63 authored by Leopoldthecoder's avatar Leopoldthecoder Committed by 杨奕
Browse files
Options

ColorPicker: add chalk theme

parent f01df258
Hide whitespace changes
Inline Side-by-side
Showing with 175 additions and 36 deletions
examples/docs/en-US/color-picker.md
View file @ e8516d63
......@@ -2,9 +2,10 @@
export default {
data() {
return {
color1: '#20a0ff',
color1: '#1989fa',
color2: null,
color3: 'rgba(19, 206, 102, 0.8)'
color3: 'rgba(19, 206, 102, 0.8)',
color4: '#20a0ff'
};
},
mounted() {
......@@ -34,6 +35,9 @@
font-size: 14px;
margin-bottom: 20px;
}
.demo-color-picker .el-color-picker + .el-color-picker {
margin-left: 20px;
}
</style>
## ColorPicker
......@@ -57,7 +61,7 @@ ColorPicker is a color selector supporting multiple color formats.
export default {
data() {
return {
color1: '#20a0ff',
color1: '#1989fa',
color2: null
}
}
......@@ -84,9 +88,32 @@ ColorPicker is a color selector supporting multiple color formats.
```
:::
### Sizes
:::demo
```html
<el-color-picker v-model="color4"></el-color-picker>
<el-color-picker v-model="color4" size="medium"></el-color-picker>
<el-color-picker v-model="color4" size="small"></el-color-picker>
<el-color-picker v-model="color4" size="mini"></el-color-picker>
<script>
export default {
data() {
return {
color4: '#20a0ff'
}
}
};
</script>
```
:::
### Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---------- |-------- |---------- |------------- |-------- |
| disabled | whether to disable the ColorPicker | boolean | — | false |
| size | size of ColorPicker | string | — | medium / small / mini |
| show-alpha | whether to display the alpha slider | boolean | — | false |
| color-format | color format of v-model | string | hsl / hsv / hex / rgb | hex (when show-alpha is false)/ rgb (when show-alpha is true) |
......
examples/docs/zh-CN/color-picker.md
View file @ e8516d63
......@@ -2,9 +2,10 @@
export default {
data() {
return {
color1: '#20a0ff',
color1: '#1989fa',
color2: null,
color3: 'rgba(19, 206, 102, 0.8)'
color3: 'rgba(19, 206, 102, 0.8)',
color4: '#20a0ff'
};
},
mounted() {
......@@ -34,6 +35,9 @@
font-size: 14px;
margin-bottom: 20px;
}
.demo-color-picker .el-color-picker + .el-color-picker {
margin-left: 20px;
}
</style>
## ColorPicker 颜色选择器
......@@ -57,7 +61,7 @@
export default {
data() {
return {
color1: '#20a0ff',
color1: '#1989fa',
color2: null
}
}
......@@ -84,9 +88,32 @@
```
:::
### 不同尺寸
:::demo
```html
<el-color-picker v-model="color4"></el-color-picker>
<el-color-picker v-model="color4" size="medium"></el-color-picker>
<el-color-picker v-model="color4" size="small"></el-color-picker>
<el-color-picker v-model="color4" size="mini"></el-color-picker>
<script>
export default {
data() {
return {
color4: '#20a0ff'
}
}
};
</script>
```
:::
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| disabled | 是否禁用 | boolean | — | false |
| size | 尺寸 | string | — | medium / small / mini |
| show-alpha | 是否支持透明度选择 | boolean | — | false |
| color-format | 写入 v-model 的颜色的格式 | string | hsl / hsv / hex / rgb | hex（show-alpha 为 false）/ rgb（show-alpha 为 true） |
......
packages/color-picker/src/main.vue
View file @ e8516d63
<template>
<div class="el-color-picker" v-clickoutside="hide">
<div class="el-color-picker__trigger" @click="showPicker = !showPicker">
<div
:class="[
'el-color-picker',
disabled ? 'is-disabled' : '',
size ? `el-color-picker--${ size }` : ''
]"
v-clickoutside="hide">
<div class="el-color-picker__mask" v-if="disabled"></div>
<div class="el-color-picker__trigger" @click="handleTrigger">
<span class="el-color-picker__color" :class="{ 'is-alpha': showAlpha }">
<span class="el-color-picker__color-inner"
:style="{
......@@ -8,7 +15,7 @@
}"></span>
<span class="el-color-picker__empty el-icon-close" v-if="!value && !showPanelColor"></span>
</span>
<span class="el-color-picker__icon el-icon-caret-bottom"></span>
<span class="el-color-picker__icon el-icon-caret-bottom" v-show="value || showPanelColor"></span>
</div>
<picker-dropdown
ref="dropdown"
......@@ -31,15 +38,11 @@
name: 'ElColorPicker',
props: {
value: {
type: String
},
showAlpha: {
type: Boolean
},
colorFormat: {
type: String
}
value: String,
showAlpha: Boolean,
colorFormat: String,
disabled: Boolean,
size: String
},
directives: { Clickoutside },
......@@ -77,6 +80,10 @@
},
methods: {
handleTrigger() {
if (this.disabled) return;
this.showPicker = !this.showPicker;
},
confirmValue(value) {
this.$emit('input', this.color.value);
this.$emit('change', this.color.value);
......
packages/theme-chalk/src/color-picker.scss
View file @ e8516d63
......@@ -163,6 +163,7 @@
line-height: 26px;
font-size: 12px;
color: $--color-black;
width: 160px;
}
@include e(btn) {
......@@ -202,24 +203,99 @@
display: inline-block;
position: relative;
line-height: normal;
height: 40px;
@include when(disabled) {
.el-color-picker__trigger {
cursor: not-allowed;
}
}
@include m(medium) {
height: 36px;
.el-color-picker__trigger {
height: 36px;
width: 36px;
}
.el-color-picker__mask {
height: 34px;
width: 34px;
}
}
@include m(small) {
height: 32px;
.el-color-picker__trigger {
height: 32px;
width: 32px;
}
.el-color-picker__mask {
height: 30px;
width: 30px;
}
.el-color-picker__icon,
.el-color-picker__empty {
transform: translate3d(-50%, -50%, 0) scale(0.6);
}
}
@include m(mini) {
height: 28px;
.el-color-picker__trigger {
height: 28px;
width: 28px;
}
.el-color-picker__mask {
height: 26px;
width: 26px;
}
.el-color-picker__icon,
.el-color-picker__empty {
transform: translate3d(-50%, -50%, 0) scale(0.6);
}
}
@include e(mask) {
height: 38px;
width: 38px;
border-radius: 4px;
position: absolute;
top: 1px;
left: 1px;
z-index: 1;
cursor: not-allowed;
background-color: rgba(255, 255, 255, .7);
}
@include e(trigger) {
display: inline-block;
box-sizing: border-box;
height: 36px;
padding: 6px;
border: 1px solid #bfcbd9;
height: 40px;
width: 40px;
padding: 4px;
border: 1px solid #e6e6e6;
border-radius: 4px;
font-size: 0;
position: relative;
cursor: pointer;
}
@include e(color) {
position: relative;
display: inline-block;
display: block;
box-sizing: border-box;
border: 1px solid #666;
width: 22px;
height: 22px;
border: 1px solid #999;
border-radius: $--border-radius-small;
width: 100%;
height: 100%;
text-align: center;
@include when(alpha) {
......@@ -237,20 +313,21 @@
@include e(empty) {
font-size: 12px;
vertical-align: middle;
color: #666;
color: #999;
position: absolute;
top: 4px;
left: 4px;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0) scale(0.8);
}
@include e(icon) {
display: inline-block;
position: relative;
top: -6px;
margin-left: 8px;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0) scale(0.8);
width: 12px;
color: #888;
color: $--color-white;
font-size: 12px;
}
......@@ -259,7 +336,8 @@
z-index: 10;
padding: 6px;
background-color: $--color-white;
border: 1px solid $--color-black;
border: 1px solid $--border-color-lighter;
border-radius: $--border-radius-base;
box-shadow: $--dropdown-menu-box-shadow;
}
}
packages/theme-chalk/src/common/var.scss
View file @ e8516d63
......@@ -70,7 +70,7 @@ $--border-radius-circle: 100%;
-------------------------- */
$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12);
$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
/* Fill
-------------------------- */
$--fill-base: $--color-white;
......@@ -282,7 +282,7 @@ $--message-danger-color: $--color-danger;
$--notification-width: 330px;
$--notification-padding: 14px 26px 14px 13px;
$--notification-raduis: 8px;
$--notification-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
$--notification-shadow: $--box-shadow-light;
$--notification-border-color: $--border-color-lighter;
$--notification-icon-size: 24px;
$--notification-close-font-size: 12px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment