コンポーネント一覧
Progress
所要時間が読めるなら value を渡す。読めないなら省略して不確定表示にする。嘘の進捗は信頼を損なう。
デモ
使い分け
こうする
- 終わりが分かる処理に使う。分からないなら Spinner
- label で何の進捗かを書く
こうしない
- 数十秒以上かかる処理で止まったままにしない。途中経過を更新する
Props
| 名前 | 型 | 説明 |
|---|---|---|
| size | 'sm' | 'md' | 'lg' | |
| color | 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | |
| label | ReactNode | |
| value | number | 省略すると不確定表示になる |
| minValue | number | |
| maxValue | number | |
| showValueLabel | boolean | 数値ラベルを表示する |
| classNames | ClassNames<typeof progressSlots> |
Slot
構成部位に data-slot が出力されます。 CSS の上書きやテストはこれを狙ってください。
- root必須
- label
- track必須
- indicator必須
- valueLabel
アクセシビリティ
- progressbar として現在値・最小値・最大値を伝える。`label` を省略すると何の進捗か分からない
- キーボードだけで操作できます。フォーカスリングはコントラスト比 3:1 以上です。
- 本文のコントラスト比は light / dark とも 4.5:1 以上を検査で保証しています。
prefers-reduced-motionが有効なときはアニメーションを行いません。