Tu View PlusColorPicker
Used for select and display colors.
Basic usage
Color Picker basic usage.
#49629A
Disabled
Set disabled to disable the selector.
#49629A
Color format
Set the format of the color value through format, supporting hex and rgb.
hex
#49629A
rgb
rgb(73, 98, 154)
Preset & History
The preset color and history color areas can be opened through `showPreset` and `showHistory`. Historical colors require users to control the display content themselves.
Trigger
set the properties of the trigger through trigger-props.
Customize trigger element
Customize trigger element.
#49629A
Size
Besides default size, tu-color-picker component provides three additional sizes for you to choose among different scenarios. Use attribute size to set additional sizes with mini, small, large.
#49629A
#49629A
#49629A
#49629A
Only panel
Only use the color selection panel.
Hex
#
Preset Colors
Hex
#
Preset Colors
ColorPicker API
ColorPicker Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| model-value | Value | String | - |
| default-value | Default value (uncontrolled state) | String | - |
| format | Color value format | String | - |
| size | Size | String | medium |
| show-text | Show color value | Boolean | false |
| show-history | Show history colors | Boolean | false |
| show-preset | Show preset colors | Boolean | false |
| disabled | Disabled | Boolean | false |
| disabled-alpha | Disable transparency channel | Boolean | false |
| hide-trigger | There is no trigger element, only the color panel is displayed | Boolean | false |
| trigger-props | Can accept Props of all Trigger components | Object | - |
| history-colors | Color array of historical colors | Array | - |
| preset-colors | Color array of preset colors | Array | colors |
ColorPicker Events
| Name | Description | Type |
|---|---|---|
| change | Triggered when the color value changes | Function |
| popup-visible-change | Triggered when the color panel is expanded and collapsed | Function |