ctrlk

使用

#fff

With swatches
Size
md
Full width

颜色格式

ColorPicker 支持所有 CSS Color Module Level 4 的颜色格式和表示法: hex, rgb, hsl ,hwb,lab,lch,oklab,oklch.

预定义色板

使用swatches属性, 可以显示预定义的色板, 方便用户直接选择.

swatches属性是一个颜色数组.

注意: 色板颜色格式应该和format相匹配.

ColorPicker预定义了8个主题色板: "primary", "secondary", "accent", "info", "warning", "error","success", "neutral", 如果是为@rtdui的组件提供颜色就非常有用. 可以和自定义颜色组合使用:

<ColorPicker
  swatches={[
    "primary",
    "secondary",
    "accent",
    "info",
    "warning",
    "error",
    "success",
    "neutral",
    "#2e2e2e",
    "#868e96",
    "#fa5252",
    "#e64980",
  ]}
/>

尺寸

ColorPicker的size属性支持 xs, sm, md, lg, xl预定义的尺寸. 也支持任意CSS长度.

额外的fullWidth属性直接设置宽度为100%.

受控与非受控模式

与原生input组件类似, ColorPicker的value为受控属性, defaultValue为非受控属性. onChange回调属性, 额外的onChangeEnd回调属性会在结束拖拉后触发.

注意: value或defaultValue的初始值支持所有CSS支持的颜色格式. 但注意匹配正确的格式, 比如: 旧的rgba表示法: rgba(r,g,b,a) 必须要带有a值, 不可省略.

RTD UIv6.1.0