MeterGroup

MeterGroupは、既知の範囲内でスカラー測定値を表示します。

インポート#


import { MeterGroup } from 'primereact/metergroup';
         

基本#

MeterGroupは、表示するデータとしてvalueを必要とし、コレクション内の各アイテムはMeterItem型である必要があります。

  1. 使用容量（15％）

<MeterGroup values={values} />
         

複数#

配列にアイテムを追加すると、メーターがグループで表示されます。

  1. アプリ（16％）
  2. メッセージ（8％）
  3. メディア（24％）
  4. システム（10％）

<MeterGroup values={values} />
         

アイコン#

デフォルトのマーカーの代わりに、ラベルの横にアイコンを表示できます。

  1. アプリ（16％）
  2. メッセージ（8％）
  3. メディア（24％）
  4. システム（10％）

<MeterGroup values={values} />
         

ラベル#

メーターに対するラベルの位置は、labelPositionプロパティを使用して定義します。ラベルのデフォルトの向きは水平で、垂直の代替手段は以下から利用できます。 labelOrientationオプション。

  1. アプリ（16％）
  2. メッセージ（8％）
  3. メディア（24％）
  4. システム（10％）

<MeterGroup values={values} labelPosition="start" labelOrientation="vertical" />
         

垂直#

MeterGroupは、表示するデータとしてvalueを必要とし、コレクション内の各アイテムはMeterItem型である必要があります。

  1. アプリ（24％）
  2. メッセージ（16％）
  3. メディア（24％）
  4. システム（12％）

<MeterGroup values={values} orientation="vertical" labelOrientation="vertical" />
         

最小-最大#

境界は、デフォルトがそれぞれ0と100であるminおよびmaxの値で構成されます。

  1. アプリ（8％）
  2. メッセージ（4％）
  3. メディア（12％）
  4. システム（5％）

<MeterGroup values={values} max="200" />
         

テンプレート#

MeterGroupは、表示するデータとしてvalueを必要とし、コレクション内の各アイテムはMeterItem型である必要があります。

アプリ25%
メッセージ15%
メディア20%
システム10%
ストレージ70%1TB

<MeterGroup values={values} />
         

アクセシビリティ#

スクリーンリーダー

MeterGroupコンポーネントは、aria-valuemin、aria-valuemax、aria-valuenow属性に加えてmeterロールを使用します。コンポーネントを説明する値は、aria-labelledbyプロパティを使用して定義できます。

キーボードサポート

コンポーネントにはインタラクティブな要素は含まれていません。

                    PrimeReact 10.8.3 by PrimeTek