コンポーネント一覧
ColorPicker
色の一覧はモデルが持つ。同じコードでも Raster では Print Inks、Tactile では Textile Dyes が並ぶ。
デモ
使い分け
こうする
- 選択肢はテーマの 8 色に任せる。自前の色を足さない（検査の外に出る）
こうしない
- 自由な色相を入力させない。コントラストが保証できなくなる
Props
| 名前 | 型 | 説明 |
|---|---|---|
| size | 'sm' | 'md' | 'lg' | |
| label | ReactNode | |
| description | ReactNode | |
| errorMessage | ReactNode | |
| value | string | 選択中の色の id。制御する場合に渡す |
| defaultValue | string | 非制御時の初期値。未指定ならテーマの既定色 |
| onChange | (colorId: string) => void | |
| colors | readonly NoviColorOption[] | 並べる色。**省略時はテーマのカラーセット全色**。順序も含めてそのまま出す |
| showLabels | boolean | 色名を各スウォッチの下に出す。既定は false（スウォッチだけ並べる） |
| isDisabled | boolean | |
| isReadOnly | boolean | |
| isRequired | boolean | |
| isInvalid | boolean | |
| name | string | |
| classNames | ClassNames<typeof colorPickerSlots> |
Slot
構成部位に data-slot が出力されます。 CSS の上書きやテストはこれを狙ってください。
- root必須
- label
- description
- errorMessage
- list必須
- item必須
- swatch必須
- indicator
- itemLabel
アクセシビリティ
| キー | 動作 |
|---|---|
| ← → ↑ ↓ | 色を移動して選ぶ |
- radiogroup として提示され、矢印キーで色を移動する。選択は色だけでなく `indicator` でも示す。各色には名前が読み上げられる
- キーボードだけで操作できます。フォーカスリングはコントラスト比 3:1 以上です。
- 本文のコントラスト比は light / dark とも 4.5:1 以上を検査で保証しています。
prefers-reduced-motionが有効なときはアニメーションを行いません。