跳到主要内容

ColorSwatches 色板ColorSwatches

从一小组预设颜色里选一个：主题色、标签色、日历分类色。需要任意取色时请用 ColorPicker。

基本用法

每个颜色都必须有名字（label），读屏和悬停提示都靠它。选中的色块中心弹出白点。

尺寸

禁用与 Field

用于在日历里区分日程

受控用法

onChange 的参数是选中色块的 value。

当前：绿（#4CD787）

规格

色板
悬停 1.14× · 选中时白点 bouncy 弹出

API

ColorSwatches

属性类型默认值说明
colors*ColorSwatch[]—色块列表。
valuestring | null—选中的值（受控）。
defaultValuestring | nullnull初始选中的值（非受控）。
onChange(value: string) => void—选中项变化时触发。
size'sm' | 'md' | 'lg''md'色块直径 22 / 默认 / 38。
disabledboolean—整体禁用。

ColorSwatch

属性类型默认值说明
value*string—选中后回传的值。
color*string—任意 CSS 颜色。
label*string—颜色的名字，用作 aria-label 和悬停提示。
disabledboolean—禁用这一个。

无障碍

  • 根节点是 role="radiogroup"，每个色块是 role="radio" 的按钮，名称取 label。不能只靠颜色区分，所以 label 是必填的。
  • 整组一个 Tab 停靠点（选中项，没选则是第一个可用项）。方向键移动并同时选中，到头循环；Home / End 到两端；禁用项被跳过。
  • 选中用中心白点表示，不依赖颜色本身。很浅的颜色上白点对比度不足，挑预设色时请避开。
  • 请给组 aria-label 或放进带 label 的 Field。