github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

ColorPicker: update docs for predefine (#10237)

pull/10247/head
杨奕 2018-03-19 19:31:38 +08:00 committed by GitHub
parent 38e9b6eca6
commit 674f8648bf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 124 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
examples/docs/en-US/color-picker.md
View File

@ -6,17 +6,22 @@
color2: null,
color3: 'rgba(19, 206, 102, 0.8)',
color4: '#409EFF',
color5: 'hsva(180, 65, 20, 0.5)',
color5: 'rgba(255, 69, 0, 0.68)',
predefineColors: [
'rgba(19, 206, 102, 0.18)',
'rgb(25, 159, 147)',
'hsv(250, 54, 98)',
'hsva(180, 65, 20, 0.5)',
'hsl(170, 32%, 87%)',
'hsla(45, 62%, 47%, 0.13)',
'#7486de',
'#45aa9477',
'#892345'
'#ff4500',
'#ff8c00',
'#ffd700',
'#90ee90',
'#00ced1',
'#1e90ff',
'#c71585',
'rgba(255, 69, 0, 0.68)',
'rgb(255, 120, 0)',
'hsv(51, 100, 98)',
'hsva(120, 40, 94, 0.5)',
'hsl(181, 100%, 37%)',
'hsla(209, 100%, 56%, 0.73)',
'#c7158577'
]
};
},
@ -100,27 +105,36 @@ ColorPicker is a color selector supporting multiple color formats.
```
:::
### Predefine colors
### Predefined colors
:::demo ColorPicker supports predefine colors
:::demo ColorPicker supports predefined color options
```html
<el-color-picker v-model="color5" show-alpha :predefine="predefineColors"></el-color-picker>
<el-color-picker
v-model="color5"
show-alpha
:predefine="predefineColors">
</el-color-picker>
<script>
export default {
data() {
return {
color5: 'hsva(180, 65, 20, 0.5)',
color5: 'rgba(255, 69, 0, 0.68)',
predefineColors: [
'rgba(19, 206, 102, 0.18)',
'rgb(25, 159, 147)',
'hsv(250, 54, 98)',
'hsva(180, 65, 20, 0.5)',
'hsl(170, 32%, 87%)',
'hsla(45, 62%, 47%, 0.13)',
'#7486de',
'#45aa9477',
'#892345'
'#ff4500',
'#ff8c00',
'#ffd700',
'#90ee90',
'#00ced1',
'#1e90ff',
'#c71585',
'rgba(255, 69, 0, 0.68)',
'rgb(255, 120, 0)',
'hsv(51, 100, 98)',
'hsva(120, 40, 94, 0.5)',
'hsl(181, 100%, 37%)',
'hsla(209, 100%, 56%, 0.73)',
'#c7158577'
]
}
}
@ -159,7 +173,7 @@ ColorPicker is a color selector supporting multiple color formats.
| 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) |
| popper-class | custom class name for ColorPicker's dropdown | string | — | — |
| predefine | predefine some colors | array | — | — |
| predefine | predefined color options | array | — | — |
### Events
| Event Name | Description | Parameters |

62
examples/docs/es/color-picker.md
View File

@ -6,17 +6,22 @@
color2: null,
color3: 'rgba(19, 206, 102, 0.8)',
color4: '#409EFF',
color5: 'hsva(180, 65, 20, 0.5)',
color5: 'rgba(255, 69, 0, 0.68)',
predefineColors: [
'rgba(19, 206, 102, 0.18)',
'rgb(25, 159, 147)',
'hsv(250, 54, 98)',
'hsva(180, 65, 20, 0.5)',
'hsl(170, 32%, 87%)',
'hsla(45, 62%, 47%, 0.13)',
'#7486de',
'#45aa9477',
'#892345'
'#ff4500',
'#ff8c00',
'#ffd700',
'#90ee90',
'#00ced1',
'#1e90ff',
'#c71585',
'rgba(255, 69, 0, 0.68)',
'rgb(255, 120, 0)',
'hsv(51, 100, 98)',
'hsva(120, 40, 94, 0.5)',
'hsl(181, 100%, 37%)',
'hsla(209, 100%, 56%, 0.73)',
'#c7158577'
]
};
},
@ -100,27 +105,36 @@ ColorPicker es un selector de color que soporta varios formatos de color.
```
:::
### Colores predefinidos
### Predefined colors
:::demo ColorPicker admite colores predefinidos
:::demo ColorPicker supports predefined color options
```html
<el-color-picker v-model="color5" show-alpha :predefine="predefineColors"></el-color-picker>
<el-color-picker
v-model="color5"
show-alpha
:predefine="predefineColors">
</el-color-picker>
<script>
export default {
data() {
return {
color5: 'hsva(180, 65, 20, 0.5)',
color5: 'rgba(255, 69, 0, 0.68)',
predefineColors: [
'rgba(19, 206, 102, 0.18)',
'rgb(25, 159, 147)',
'hsv(250, 54, 98)',
'hsva(180, 65, 20, 0.5)',
'hsl(170, 32%, 87%)',
'hsla(45, 62%, 47%, 0.13)',
'#7486de',
'#45aa9477',
'#892345'
'#ff4500',
'#ff8c00',
'#ffd700',
'#90ee90',
'#00ced1',
'#1e90ff',
'#c71585',
'rgba(255, 69, 0, 0.68)',
'rgb(255, 120, 0)',
'hsv(51, 100, 98)',
'hsva(120, 40, 94, 0.5)',
'hsl(181, 100%, 37%)',
'hsla(209, 100%, 56%, 0.73)',
'#c7158577'
]
}
}
@ -158,7 +172,7 @@ ColorPicker es un selector de color que soporta varios formatos de color.
| show-alpha | especifica si se muestra el control deslizante para el valor alpha | boolean | — | false |
| color-format | formato de color del `v-model` | string | hsl / hsv / hex / rgb | hex (si show-alpha es false)/ rgb (si show-alpha es true) |
| popper-class | nombre de clase para el dropdown del ColorPicker | string | — | — |
| predefine | colores predefinidos | array | — | — |
| predefine | predefined color options | array | — | — |
### Eventos
| Nombre de Evento | Descripción | Parametros |

56
examples/docs/zh-CN/color-picker.md
View File

@ -6,17 +6,22 @@
color2: null,
color3: 'rgba(19, 206, 102, 0.8)',
color4: '#409EFF',
color5: 'hsva(180, 65, 20, 0.5)',
color5: 'rgba(255, 69, 0, 0.68)',
predefineColors: [
'rgba(19, 206, 102, 0.18)',
'rgb(25, 159, 147)',
'hsv(250, 54, 98)',
'hsva(180, 65, 20, 0.5)',
'hsl(170, 32%, 87%)',
'hsla(45, 62%, 47%, 0.13)',
'#7486de',
'#45aa9477',
'#892345'
'#ff4500',
'#ff8c00',
'#ffd700',
'#90ee90',
'#00ced1',
'#1e90ff',
'#c71585',
'rgba(255, 69, 0, 0.68)',
'rgb(255, 120, 0)',
'hsv(51, 100, 98)',
'hsva(120, 40, 94, 0.5)',
'hsl(181, 100%, 37%)',
'hsla(209, 100%, 56%, 0.73)',
'#c7158577'
]
};
},
@ -104,23 +109,32 @@
:::demo ColorPicker 支持预定义颜色
```html
<el-color-picker v-model="color5" show-alpha :predefine="predefineColors"></el-color-picker>
<el-color-picker
v-model="color5"
show-alpha
:predefine="predefineColors">
</el-color-picker>
<script>
export default {
data() {
return {
color5: 'hsva(180, 65, 20, 0.5)',
color5: 'rgba(255, 69, 0, 0.68)',
predefineColors: [
'rgba(19, 206, 102, 0.18)',
'rgb(25, 159, 147)',
'hsv(250, 54, 98)',
'hsva(180, 65, 20, 0.5)',
'hsl(170, 32%, 87%)',
'hsla(45, 62%, 47%, 0.13)',
'#7486de',
'#45aa9477',
'#892345'
'#ff4500',
'#ff8c00',
'#ffd700',
'#90ee90',
'#00ced1',
'#1e90ff',
'#c71585',
'rgba(255, 69, 0, 0.68)',
'rgb(255, 120, 0)',
'hsv(51, 100, 98)',
'hsva(120, 40, 94, 0.5)',
'hsl(181, 100%, 37%)',
'hsla(209, 100%, 56%, 0.73)',
'#c7158577'
]
}
}

5
packages/color-picker/src/components/predefine.vue
View File

@ -1,6 +1,5 @@
<template>
<div class="el-color-predefine">
预设：
<div class="el-color-predefine__colors">
<div class="el-color-predefine__color-selector"
:class="{selected: item.selected, 'is-alpha': item._alpha < 100}"
@ -24,8 +23,8 @@
},
data() {
return {
rgbaColors: this.parseColors(this.colors, this.color),
}
rgbaColors: this.parseColors(this.colors, this.color)
};
},
methods: {
handleSelect(index) {

17
packages/theme-chalk/src/color-picker.scss
View File

@ -5,6 +5,7 @@
display: flex;
font-size: 12px;
margin-top: 8px;
width: 280px;
@include e(colors) {
display: flex;
@ -13,20 +14,24 @@
}
@include e(color-selector) {
margin: 0 0 6px 6px;
width: 24px;
height: 24px;
border: 1px #8c939d solid;
border-radius: 2px;
margin: 0 0 8px 8px;
width: 20px;
height: 20px;
border-radius: 4px;
cursor: pointer;
&:nth-child(10n + 1) {
margin-left: 0;
}
&.selected {
border: 3px $--color-primary solid;
box-shadow: 0 0 3px 2px $--color-primary;
}
> div {
display: flex;
height: 100%;
border-radius: 3px;
}
@include when(alpha) {