计量组

计量组在已知范围内显示标量测量值。


import { MeterGroup } from 'primereact/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" />
         

计量组需要一个 value 作为要显示的数据,其中集合中的每个项目都应该是 MeterItem 类型。

  1. 应用 (24%)
  2. 消息 (16%)
  3. 媒体 (24%)
  4. 系统 (12%)

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

边界通过 minmax 值配置,它们的默认值分别为 0 和 100。

  1. 应用 (8%)
  2. 消息 (4%)
  3. 媒体 (12%)
  4. 系统 (5%)

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

计量组需要一个 value 作为要显示的数据,其中集合中的每个项目都应该是 MeterItem 类型。

应用25%
消息15%
媒体20%
系统10%
存储70%1TB

<MeterGroup values={values} />
         

屏幕阅读器

MeterGroup 组件除了 aria-valueminaria-valuemaxaria-valuenow 属性外,还使用 meter 角色。可以使用 aria-labelledby 属性定义用于描述组件的值。

键盘支持

组件不包含任何交互元素。