コンポーネント一覧
Card
カード全体を押せるようにするなら onPress を渡す。中にボタンを置くと押し分けが曖昧になる。
デモ
使い分け
こうする
- 1 枚に 1 つの主題。見出し・本文・操作の順に置く
- 一覧に並べるなら同じ高さに揃える
こうしない
- 押せるカードの中にボタンを置かない。押し分けが曖昧になる
- カードの中にカードを入れない。面が重なって階層が読めなくなる
Props
| 名前 | 型 | 説明 |
|---|---|---|
| variant | 'solid' | 'outline' | 'soft' | 'ghost' | 'plain' | |
| radius | 'none' | 'sm' | 'md' | 'lg' | 'full' | |
| onPress | () => void | 押せるカードにする。指定すると role とキーボード操作が付く |
| isDisabled | boolean | |
| children | ReactNode | |
| classNames | ClassNames<typeof cardSlots> |
Slot
構成部位に data-slot が出力されます。 CSS の上書きやテストはこれを狙ってください。
- root必須
- header
- body必須
- footer
- image
アクセシビリティ
| キー | 動作 |
|---|---|
| Enter / Space | 押す（`onPress` があるときだけフォーカスに入る） |
- `onPress` を渡したときだけ button になり、Enter / Space で発火してフォーカスリングが付く。 渡さなければ非対話の器のままで、タブ順に入らない
- キーボードだけで操作できます。フォーカスリングはコントラスト比 3:1 以上です。
- 本文のコントラスト比は light / dark とも 4.5:1 以上を検査で保証しています。
prefers-reduced-motionが有効なときはアニメーションを行いません。
