#header-mark#
ColorPicker 颜色选择器
用于颜色选择,支持多种格式。
基础用法
使用 v-model
与 Vue 实例中的一个变量进行双向绑定,颜色为 RGB 的 HEX 形式。
禁用状态
你可以使用 disabled
属性来定义是否被禁用。
使用 disabled
属性来控制是否为禁用状态。该属性接受一个 bool
类型的值。
提示信息
通过 tooltip
属性在鼠标 hover 时展示提示信息。
自定义样式
您可以自定义按钮的距离。
使用 style
属性,通过 description-width
设置距离,可使用px
、%
等形式。
ColorPicker API
ColorPicker 属性
属性名 | 说明 | 类型 | 默认值 |
---|---|---|---|
v-model/value | 选中项绑定值 | str | — |
label | 按钮文字 | str | — |
concise | 是否为简洁模式 | bool | false |
tooltip | 提示信息 | str | — |
disabled | 按钮是否为禁用状态 | boolean | false |
style | 自定义 css 样式 | str | - |
TIP
style 支持的其它css属性
Sizes相关
- height
- width
- max_height
- max_width
- min_height
- min_width
Display相关
- visibility
- display
- overflow
Box model相关
- border
- margin
- padding
Positioning相关
- top
- left
- bottom
- right
ColorPicker 方法
属性名 | 说明 | 类型 |
---|
src/examples/ipywui/component/color-picker