使用

#fff

Format

With swatches

Size

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值, 不可省略.

@rtdui/core/ColorPicker

属性名	类型	是否必须	默认值	说明
alphaLabel	string \| undefined	no		Alpha slider <code>aria-label</code> prop
defaultValue	string \| undefined	no		Uncontrolled component default value
focusable	boolean \| undefined	no	true	Determines whether interactive elements (sliders thumbs and swatches) should be focusable
format	ColorFormat \| undefined	no	hex	Color format
fullWidth	boolean \| undefined	no	false	Determines whether the component should take 100% width of its container
hueLabel	string \| undefined	no		Hue slider <code>aria-label</code> prop
onChange	((value: string) => void) \| undefined	no		Called when value changes
onChangeEnd	((value: string) => void) \| undefined	no		Called when the user stops dragging one of the sliders or changes the value with arrow keys
onColorSwatchClick	((color: string) => void) \| undefined	no		Called when one of the color swatches is clicked
saturationLabel	string \| undefined	no		Saturation slider <code>aria-label</code> prop
size	string \| undefined	no	"md"	Controls size of hue, alpha and saturation sliders
swatches	string[] \| undefined	no		An array of colors in one of the supported formats. Used to render swatches list below the color picker.
swatchesPerRow	number \| undefined	no	7	Number of swatches per row
value	string \| undefined	no		Controlled component value
withPicker	boolean \| undefined	no	true	Determines whether the color picker should be displayed