UI Component Lab English

← コンポーネント一覧

データ表示

Meter メーター

ストレージの使用量や電池の残量など、決まった範囲の中の測定値を示す棒。

40%

40GB / 100GB

別名

見分けるポイント

現在の値まで塗られた横長の棒。値が良くない範囲に入ると、黄や赤などに色が変わることがある。

挙動

  • 操作する部品ではなく、値を示すだけのもの。
  • このデモはネイティブの <meter> に low・high・optimum を付けているため、ブラウザが範囲に応じて棒の色を変える。ボタンで値を変えられる。

キーボード操作

キー動作
—なし。デモのボタンは Tab と Enter / Space で操作する。

使い分け・注意点

  • 作業の進み具合には使わない。それにはプログレスバーを使う。
  • 最大値には意味が必要（ディスクの容量など）。色だけでは状態が伝わらない人もいるため、数値も文字で示す。
  • プログレスバー: メーターは範囲の中の測定値を示し、プログレスバーは作業の進み具合を示す。

出典