开发预览更新于 2026-05-10

ColorSwatch 颜色块

单个颜色样本，常用于调色板。支持选中环、新增按钮变体。

基础用法

任意 CSS 颜色（含 token var(--accent-1)）。selected 显示选中环，add 切换为虚线 + 加号占位。

<CfColorSwatch color="var(--accent-1)" :selected="true" />
<CfColorSwatch color="var(--status-success)" />
<CfColorSwatch color="#dc3545" />
<CfColorSwatch add label="添加颜色" />

<CfColorSwatch color="var(--accent-1)" selected />
<CfColorSwatch color="var(--status-success)" />
<CfColorSwatch color="#dc3545" />
<CfColorSwatch add label="添加颜色" />

尺寸 / 形状 / 状态

3 档尺寸，square / round 两种形状，可选中、可禁用。

<CfColorSwatch size="sm" color="var(--accent-1)" />
<CfColorSwatch size="md" color="var(--accent-1)" />
<CfColorSwatch size="lg" color="var(--accent-1)" />
<CfColorSwatch shape="round" color="var(--accent-1)" />
<CfColorSwatch :selected="true" color="var(--accent-1)" />
<CfColorSwatch disabled color="var(--accent-1)" />

<CfColorSwatch size="sm" color="var(--accent-1)" />
<CfColorSwatch size="md" color="var(--accent-1)" />
<CfColorSwatch size="lg" color="var(--accent-1)" />
<CfColorSwatch shape="round" color="var(--accent-1)" />
<CfColorSwatch selected color="var(--accent-1)" />
<CfColorSwatch disabled color="var(--accent-1)" />

API

属性	类型	默认值	说明
`color`	`string`	—	任意 CSS 颜色或 token
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	18 / 24 / 32 px
`shape`	`'square' \| 'round'`	`'square'`
`selected`	`boolean`	`false`	选中环
`add`	`boolean`	`false`	新增占位（虚线 + 加号）
`disabled`	`boolean`	`false`
`label`	`string`	—	自定义 aria-label