参考

颜色选择器 Color Picker

ColorPicker：颜色选择器。控件大小的色块显示当前颜色，展开后提供取色区域和通道滑块。部件：Root、Label、Control、Trigger、Positioner、Content、Area、AreaThumb、AreaBackground、ValueText、ValueSwatch、ChannelSlider、ChannelSliderLabel、ChannelSliderTrack、ChannelSliderThumb、ChannelSliderValueText、ChannelInput、TransparencyGrid、SwatchGroup、SwatchTrigger、SwatchIndicator、Swatch、EyeDropperTrigger、FormatTrigger、FormatSelect、HiddenInput、Context。

Root · Label · Control · Trigger · Positioner · Content · Area · AreaThumb · ValueText · AreaBackground · ChannelSlider · ChannelSliderLabel · ChannelSliderTrack · ChannelSliderThumb · ChannelSliderValueText · ChannelInput · TransparencyGrid · SwatchGroup · SwatchTrigger · SwatchIndicator · Swatch · EyeDropperTrigger · FormatTrigger · FormatSelect

#AreaBackground

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#AreaThumb

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Area

属性	类型	默认值	描述
`xChannel`	`ColorChannel \| undefined`		—
`yChannel`	`ColorChannel \| undefined`		—

#ChannelInput

属性	类型	默认值	描述
`channel`	`ExtendedColorChannel`		—
`orientation`	`Orientation \| undefined`		—

#ChannelSliderLabel

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#ChannelSliderThumb

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#ChannelSliderTrack

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#ChannelSliderValueText

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#ChannelSlider

属性	类型	默认值	描述
`channel`	`ColorChannel`		—
`orientation`	`Orientation \| undefined`		—

#Content

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Control

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#EyeDropperTrigger

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#FormatSelect

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#FormatTrigger

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#HiddenInput

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Label

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Positioner

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Root

属性	类型	默认值	描述
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	色样按钮的高度，可为 `sm`、`md` 或 `lg`
`closeOnSelect`	`boolean`	`false`	选择色样后是否关闭取色器
`defaultFormat`	`colorPicker.ColorFormat`	`"rgba"`	初始颜色格式；无需控制取色器颜色格式时使用
`defaultOpen`	`boolean`		取色器初始是否展开；无需控制展开状态时使用
`defaultValue`	`colorPicker.Color`	`#000000`	初始颜色值；无需控制取色器颜色值时使用
`disabled`	`boolean`		取色器是否禁用
`format`	`colorPicker.ColorFormat`		取色器的受控颜色格式
`id`	`string`		组件内部状态机的唯一标识
`ids`	`Partial<{ root: string; control: string; trigger: string; label: string; input: string; hiddenInput: string; content: string; area: string; areaGradient: string; positioner: string; formatSelect: string; areaThumb: string; channelInput(id: string): string; channelSliderTrack(id: colorPicker.ColorChannel): string; channelSliderThumb(id: colorPicker.ColorChannel): string; }>`		取色器内各元素的 id；便于组合使用
`initialFocusEl`	`() => HTMLElement \| null`		取色器打开时的初始焦点元素
`inline`	`boolean`		取色器是否内联
`invalid`	`boolean`		取色器是否无效
`modelValue`	`colorPicker.Color`		取色器的 v-model 值
`name`	`string`		表单输入字段的名称
`open`	`boolean`		取色器的受控展开状态
`openAutoFocus`	`boolean`	`true`	取色器打开时是否自动聚焦
`positioning`	`colorPicker.PositioningOptions`		取色器的定位选项
`readOnly`	`boolean`		取色器是否只读
`required`	`boolean`		取色器是否必填

事件	载荷
`exitComplete`	`—`
`valueChange`	`details: ValueChangeDetails`
`update:modelValue`	`value: Color`
`openChange`	`details: OpenChangeDetails`
`update:open`	`open: boolean`
`valueChangeEnd`	`details: ValueChangeDetails`
`focusOutside`	`event: FocusOutsideEvent`
`formatChange`	`details: FormatChangeDetails`
`interactOutside`	`event: InteractOutsideEvent`
`pointerDownOutside`	`event: PointerDownOutsideEvent`
`update:format`	`format: ColorFormat`

#SwatchGroup

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#SwatchIndicator

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#SwatchTrigger

属性	类型	默认值	描述
`disabled`	`boolean \| undefined`		色样触发器是否禁用
`value`	`string \| Color`		颜色值

#Swatch

属性	类型	默认值	描述
`respectAlpha`	`boolean \| undefined`		颜色是否包含 alpha 通道
`value`	`string \| Color`		颜色值

#TransparencyGrid

属性	类型	默认值	描述
`size`	`string \| undefined`		—

#Trigger

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#ValueSwatch

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#ValueText

属性	类型	默认值	描述
`format`	`ColorStringFormat`		—

#View

属性	类型	默认值	描述
`format`	`ColorFormat`		—