フィードバック
Meter
決まった範囲の中で、今どのくらいの量かを表すメーター。使用率やスコアなどに使います。作業の進み具合を示す Progress とは用途が異なります。
ReactVueWeb Components
Storybook で見る プレイグラウンド
使用例
<Meter label="ストレージ" value={75} valueText="100GB中75GB" status="warning" showValue />設定できる項目
| 名前 | 型 | 既定値 | 説明 |
|---|---|---|---|
value 必須 | number | — | Current value. |
min | number | 0 | Range floor. @default 0 |
max | number | 100 | Range ceiling. @default 100 |
label | ReactNode | — | Visible label. |
status | MeterStatus | primary | Bar color. @default 'primary' |
valueText | string | — | Human-readable value text for AT (e.g. "75 GB of 100 GB"). |
showValue | boolean | false | Show the numeric value on the right of the header. @default false |
アクセシビリティ
- 文字と背景の明るさの差をしっかり取り、読みやすくしています。ライトでもダークでも、見やすさの国際基準 WCAG の最高ランク AAA（明るさの差が 7:1 以上）を満たします。
- マウスがなくても、キーボードだけですべての操作ができます。
- いまどこを操作しているかを示す枠（フォーカスの囲み）が、常にはっきり見えます。
- 利用者が「画面の動きを減らす」設定にしているときは、過剰なアニメーションを止めます。
どのコンポーネントも、だれにとっても使いやすいように、見やすさの国際基準 WCAG の最高ランク AAA（WCAG 2.1 AAA）を満たすよう作っています。