Source: https://primereact.org/metergroup/

Introducing PrimeReact v11 Alpha 🥁Learn More

• SearchK

• 10.9.7

  • v11(11.0.0)

  • v10(10.9.7)

  • v9(9.6.3)

• FEATURES

• API

• THEMING

• PASS THROUGH

MeterGroup

MeterGroup displays scalar measurements within a known range.

Import#

---

import { MeterGroup } from 'primereact/metergroup';
         

Copy

Basic#

---

MeterGroup requires a value as the data to display where each item in the collection should be a type of MeterItem.

1. Space used (15%)

   <MeterGroup values={values} />

Copy

Multiple#

---

Adding more items to the array displays the meters in a group.

1. Apps (16%)

2. Messages (8%)

3. Media (24%)

4. System (10%)

   <MeterGroup values={values} />

Copy

Icon#

---

Icons can be displayed next to the labels instead of the default marker.

1. Apps (16%)

2. Messages (8%)

3. Media (24%)

4. System (10%)

   <MeterGroup values={values} />

Copy

Label#

---

The position of the labels relative to the meters is defined using the labelPosition property. The default orientation of the labels is horizontal, and the vertical alternative is available through the labelOrientation option.

1. Apps (16%)

2. Messages (8%)

3. Media (24%)

4. System (10%)

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

Copy

Vertical#

---

MeterGroup requires a value as the data to display where each item in the collection should be a type of MeterItem.

1. Apps (24%)

2. Messages (16%)

3. Media (24%)

4. System (12%)

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

Copy

Min-Max#

---

Boundaries are configured with the min and max values whose defaults are 0 and 100 respectively.

1. Apps (8%)

2. Messages (4%)

3. Media (12%)

4. System (5%)

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

Copy

Template#

---

MeterGroup requires a value as the data to display where each item in the collection should be a type of MeterItem.

Apps25%

Messages15%

Media20%

System10%

Storage70%1TB

Manage StorageUpdate Plan

<MeterGroup values={values} />
         

Copy

Accessibility#

---

Screen Reader

MeterGroup component uses meter role in addition to the aria-valuemin, aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using aria-labelledby prop.

Keyboard Support

Component does not include any interactive elements.

• Import

• Basic

• Multiple

• Icon

• Label

• Vertical

• Min-Max

• Template

• Accessibility

PrimeReact 10.9.7 by PrimeTek