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, color2: null,
color3: 'rgba(19, 206, 102, 0.8)', color3: 'rgba(19, 206, 102, 0.8)',
color4: '#409EFF', color4: '#409EFF',
color5: 'hsva(180, 65, 20, 0.5)', color5: 'rgba(255, 69, 0, 0.68)',
predefineColors: [ predefineColors: [
'rgba(19, 206, 102, 0.18)', '#ff4500',
'rgb(25, 159, 147)', '#ff8c00',
'hsv(250, 54, 98)', '#ffd700',
'hsva(180, 65, 20, 0.5)', '#90ee90',
'hsl(170, 32%, 87%)', '#00ced1',
'hsla(45, 62%, 47%, 0.13)', '#1e90ff',
'#7486de', '#c71585',
'#45aa9477', 'rgba(255, 69, 0, 0.68)',
'#892345' '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 ```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> <script>
export default { export default {
data() { data() {
return { return {
color5: 'hsva(180, 65, 20, 0.5)', color5: 'rgba(255, 69, 0, 0.68)',
predefineColors: [ predefineColors: [
'rgba(19, 206, 102, 0.18)', '#ff4500',
'rgb(25, 159, 147)', '#ff8c00',
'hsv(250, 54, 98)', '#ffd700',
'hsva(180, 65, 20, 0.5)', '#90ee90',
'hsl(170, 32%, 87%)', '#00ced1',
'hsla(45, 62%, 47%, 0.13)', '#1e90ff',
'#7486de', '#c71585',
'#45aa9477', 'rgba(255, 69, 0, 0.68)',
'#892345' '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 | | 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) | | 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 | — | — | | popper-class | custom class name for ColorPicker's dropdown | string | — | — |
| predefine | predefine some colors | array | — | — | | predefine | predefined color options | array | — | — |
### Events ### Events
| Event Name | Description | Parameters | | Event Name | Description | Parameters |

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

@ -6,17 +6,22 @@
color2: null, color2: null,
color3: 'rgba(19, 206, 102, 0.8)', color3: 'rgba(19, 206, 102, 0.8)',
color4: '#409EFF', color4: '#409EFF',
color5: 'hsva(180, 65, 20, 0.5)', color5: 'rgba(255, 69, 0, 0.68)',
predefineColors: [ predefineColors: [
'rgba(19, 206, 102, 0.18)', '#ff4500',
'rgb(25, 159, 147)', '#ff8c00',
'hsv(250, 54, 98)', '#ffd700',
'hsva(180, 65, 20, 0.5)', '#90ee90',
'hsl(170, 32%, 87%)', '#00ced1',
'hsla(45, 62%, 47%, 0.13)', '#1e90ff',
'#7486de', '#c71585',
'#45aa9477', 'rgba(255, 69, 0, 0.68)',
'#892345' '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 ```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> <script>
export default { export default {
data() { data() {
return { return {
color5: 'hsva(180, 65, 20, 0.5)', color5: 'rgba(255, 69, 0, 0.68)',
predefineColors: [ predefineColors: [
'rgba(19, 206, 102, 0.18)', '#ff4500',
'rgb(25, 159, 147)', '#ff8c00',
'hsv(250, 54, 98)', '#ffd700',
'hsva(180, 65, 20, 0.5)', '#90ee90',
'hsl(170, 32%, 87%)', '#00ced1',
'hsla(45, 62%, 47%, 0.13)', '#1e90ff',
'#7486de', '#c71585',
'#45aa9477', 'rgba(255, 69, 0, 0.68)',
'#892345' '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 | | 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) | | 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 | — | — | | popper-class | nombre de clase para el dropdown del ColorPicker | string | — | — |
| predefine | colores predefinidos | array | — | — | | predefine | predefined color options | array | — | — |
### Eventos ### Eventos
| Nombre de Evento | Descripción | Parametros | | Nombre de Evento | Descripción | Parametros |

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

@ -6,17 +6,22 @@
color2: null, color2: null,
color3: 'rgba(19, 206, 102, 0.8)', color3: 'rgba(19, 206, 102, 0.8)',
color4: '#409EFF', color4: '#409EFF',
color5: 'hsva(180, 65, 20, 0.5)', color5: 'rgba(255, 69, 0, 0.68)',
predefineColors: [ predefineColors: [
'rgba(19, 206, 102, 0.18)', '#ff4500',
'rgb(25, 159, 147)', '#ff8c00',
'hsv(250, 54, 98)', '#ffd700',
'hsva(180, 65, 20, 0.5)', '#90ee90',
'hsl(170, 32%, 87%)', '#00ced1',
'hsla(45, 62%, 47%, 0.13)', '#1e90ff',
'#7486de', '#c71585',
'#45aa9477', 'rgba(255, 69, 0, 0.68)',
'#892345' '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 支持预定义颜色 :::demo ColorPicker 支持预定义颜色
```html ```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> <script>
export default { export default {
data() { data() {
return { return {
color5: 'hsva(180, 65, 20, 0.5)', color5: 'rgba(255, 69, 0, 0.68)',
predefineColors: [ predefineColors: [
'rgba(19, 206, 102, 0.18)', '#ff4500',
'rgb(25, 159, 147)', '#ff8c00',
'hsv(250, 54, 98)', '#ffd700',
'hsva(180, 65, 20, 0.5)', '#90ee90',
'hsl(170, 32%, 87%)', '#00ced1',
'hsla(45, 62%, 47%, 0.13)', '#1e90ff',
'#7486de', '#c71585',
'#45aa9477', 'rgba(255, 69, 0, 0.68)',
'#892345' '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> <template>
<div class="el-color-predefine"> <div class="el-color-predefine">
预设：
<div class="el-color-predefine__colors"> <div class="el-color-predefine__colors">
<div class="el-color-predefine__color-selector" <div class="el-color-predefine__color-selector"
:class="{selected: item.selected, 'is-alpha': item._alpha < 100}" :class="{selected: item.selected, 'is-alpha': item._alpha < 100}"
@ -24,8 +23,8 @@
}, },
data() { data() {
return { return {
rgbaColors: this.parseColors(this.colors, this.color), rgbaColors: this.parseColors(this.colors, this.color)
} };
}, },
methods: { methods: {
handleSelect(index) { handleSelect(index) {

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

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