组件

颜色选择器 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。

#基础用法

color-picker/basic Vue React

Ink color

color-picker/basic.vue

<script setup lang="ts">
import { parseColor } from "@ark-ui/vue/color-picker";
import { ColorPicker } from "@bysages/vue";
</script>

<template>
  <ColorPicker.Root :default-value="parseColor('#1e5aa8')">
    <ColorPicker.Label>Ink color</ColorPicker.Label>
    <ColorPicker.Control>
      <ColorPicker.ChannelInput channel="hex" />
      <ColorPicker.Trigger>
        <ColorPicker.ValueSwatch />
      </ColorPicker.Trigger>
    </ColorPicker.Control>
    <ColorPicker.Positioner>
      <ColorPicker.Content>
        <ColorPicker.Area>
          <ColorPicker.AreaBackground />
          <ColorPicker.AreaThumb />
        </ColorPicker.Area>
        <ColorPicker.ChannelSlider channel="hue">
          <ColorPicker.ChannelSliderTrack>
            <ColorPicker.ChannelSliderThumb />
          </ColorPicker.ChannelSliderTrack>
        </ColorPicker.ChannelSlider>
      </ColorPicker.Content>
    </ColorPicker.Positioner>
  </ColorPicker.Root>
</template>

#属性

#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`		取色器是否必填

#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`		—