mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-15 18:01:24 +08:00

refactor(style): adjust component size to large/default/small (#4491 )

* refactor(style): adjust component size to large/default/small

* refactor(components): avatar size & use flex instead of block

* refactor(components): adjust check button size

* refactor(components): adjust tag size

* refactor(components): adjust size doc

* fix(components): datetime-picker demo style width

* refactor(components): color-picker size & block to flex

* refactor(components): adjust slider input size

* refactor(components): adjust radio input size for demo

* refactor(components): adjust select size & docs

* refactor(components): adjust form radio size & docs

* refactor(components): add windicss for docs

* refactor(components): adjust skeleton avatar size to css var

* refactor(components): simplify typography size demo

* refactor(components): adjust dropdown size & demo

* refactor(components): adjust descriptions size

* fix(components): datetime-picker showcase class pollute global button

* chore(ci): upgrade docs dependencies to fix ci

* fix(ci): add highlight because vitepress not export it

* fix(ci): disable line for no-console

* fix(ci): remove mini to fix test

* fix(style): code font size

* fix(style): button span flex style

* fix(style): button padding horizontal default 15px

* refactor(components): adjust tag padding size & demo

* refactor(components): adjust form line-height for input

* refactor(components): adjust dropdown menu size & button padding

* fix(style): picker separator block to flex center

* fix: dropdown button span items-center

* style: adjust input-with-icon & size demo & fix input vitepress load

* chore: upgrade dependencies

* chore: upgrade dependencies

* ci: fix website build

* ci: regenerate pnpm-lock.yaml

* ci: use dev pnpm-lock

* ci: update pnpm-lock.yaml

2021-12-12 17:54:21 +08:00

2.6 KiB

Raw Blame History

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	large / default /small	—
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

2.6 KiB Raw Blame History