チップと選択チップ
システムで唯一の丸い部品で、選べる候補を表します。選ぶと spark の淡い色に変わります。無効なチップは動きません。
バリエーション
プロパティ
コード
import { Chip } from "@/components/ui/kit/ui";
<Chip>チップ</Chip>すべての状態
Chip · 通常
Chip · ホバー
Chip · フォーカス
Chip · 押下中
Chip · 無効
Chip · 選択中
ChoiceChips
ChoiceChips · 無効
使い方
使っているトークン
| --paper | … |
|---|---|
| --line-control | … |
| --ink-2 | … |
| --spark | … |
| --spark-tint | … |
| --spark-deep | … |
| --font-label | … |
| --dur-instant | … |
値はスタイルシートからその場で読み込んでいるため、サイトの表示テーマに合わせて変わります。
仕様
- きっかけ
- 長さ
- --dur-instant 100ms
- イージング
- --ease-out cubic-bezier(0.16, 1, 0.3, 1)
- 動きを減らす設定