直接跳到内容

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

ColorPicker 颜色选择器已经加载完毕