Skip to content

E
Element
Commit 674f8648 authored by 杨奕's avatar 杨奕 Committed by GitHub
Browse files
Options

ColorPicker: update docs for predefine (#10237)

parent 38e9b6ec
Hide whitespace changes
Inline Side-by-side
Showing with 124 additions and 78 deletions
examples/docs/en-US/color-picker.md
View file @ 674f8648
......@@ -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 |
......
examples/docs/es/color-picker.md
View file @ 674f8648
......@@ -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 |
......
examples/docs/zh-CN/color-picker.md
View file @ 674f8648
......@@ -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'
]
}
}
......
packages/color-picker/src/components/predefine.vue
View file @ 674f8648
<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) {
......
packages/theme-chalk/src/color-picker.scss
View file @ 674f8648
......@@ -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) {
......
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