element-plus/docs/en-US/component/color-picker.md
Aex 4510816802
refactor(componentes): deprecate the icon font of some components (#4067)
* refactor(components): [el-breadcumb] icon

* refactor(components): el-tabs icon

* refactor(components): color picker icon

* refactor(components): menus icon

* refactor(components): loading spinner icon

* fix(components): panel-data-pick elicon import

* refactor(components): dropdown item icon

* refactor(components): tabs plus icon

* fix: message & tabs icon test

* fix(components): breadcrumb docs

* fix(components): colorPicker docs

* fix(components): loading docs

Co-authored-by: imswk <syfzxx@vip.qq.com>
2021-10-28 23:37:26 +08:00

2.6 KiB

title lang
ColorPicker en-US

ColorPicker

ColorPicker is a color selector supporting multiple color formats.

Basic usage

:::demo ColorPicker requires a string typed variable to be bound to v-model.

color-picker/basic

:::

Alpha

:::demo ColorPicker supports alpha channel selecting. To activate alpha selecting, just add the show-alpha attribute.

color-picker/alpha

:::

Predefined colors

:::demo ColorPicker supports predefined color options

color-picker/predefined-color

:::

Sizes

:::demo

color-picker/sizes

:::

Attributes

Attribute Description Type Accepted Values Default
model-value / v-model binding value string
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)
popper-class custom icon compontent for ColorPicker's dropdown string / Component
predefine predefined color options array

Events

Event Name Description Parameters
change triggers when input value changes color value
active-change triggers when the current active color changes active color value