MeterGroup

MeterGroup displays scalar measurements within a known range.

Import #


import { MeterGroupModule } from 'primeng/metergroup';

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%)

<p-meterGroup [value]="value" />

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%)

<p-meterGroup [value]="value" />

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%)

<p-meterGroup [value]="value" />

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%)

<p-meterGroup 
    [value]="value" 
    labelPosition="start" 
    labelOrientation="vertical" />

Vertical #

Layout of the MeterGroup is configured with the orientation property that accepts either horizontal or vertical as available options.

  1. Apps (16%)
  2. Messages (8%)
  3. Media (24%)
  4. System (10%)

<p-meterGroup 
    [value]="value" 
    orientation="vertical" 
    labelOrientation="vertical" 
    [style]="{ height: '300px' }" />

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%)

<p-meterGroup [value]="value" [max]="200" />

Template #

MeterGroup provides templating support for labels, meter items, and content around the meters.

Apps25%
Messages15%
Media20%
System10%
Storage70%1TB

<p-meterGroup [value]="value" labelPosition="start">
    <ng-template pTemplate="label">
        <div class="flex flex-wrap gap-3">
            <ng-container *ngFor="let meterItem of value; let index = index">
                <p-card class="flex-1">
                    <div class="flex justify-content-between gap-5">
                        <div class="flex flex-column gap-1">
                            <span class="text-secondary text-sm">{{ meterItem.label }}</span>
                            <span class="font-bold text-lg">{{ meterItem.value }}%</span>
                        </div>
                        <span class="w-2rem h-2rem border-circle inline-flex justify-content-center align-items-center text-center" [style]="{ 'background-color': meterItem.color1, color: '#ffffff' }">
                            <i [class]="meterItem.icon"></i>
                        </span>
                    </div>
                </p-card>
            </ng-container>
        </div>
    </ng-template>
    <ng-template pTemplate="meter" let-value let-class="class" let-width="size">
        <span [class]="class" [style]="{ background: 'linear-gradient(to right, ' + value.color1 + ', ' + value.color2 + ')', width: width }"></span>
    </ng-template>
    <ng-template pTemplate="start" let-totalPercent="totalPercent">
        <div class="flex justify-content-between mt-3 mb-2 relative">
            <span>Storage</span>
            <span [style]="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
            <span class="font-medium">1TB</span>
        </div>
    </ng-template>
    <ng-template pTemplate="end">
        <div class="flex justify-content-between mt-3">
            <p-button label="Manage Storage" [outlined]="true" size="small" />
            <p-button label="Update Plan" size="small" />
        </div>
    </ng-template>
</p-meterGroup>

Style #

Following is the list of structural style classes, for theming classes visit theming page.

NameElement
p-metergroupContainer element.
p-metergroup-horizontalContainer element when orientation mode is horizontal.
p-metergroup-verticalContainer element when orientation mode is vertical.
p-metergroup-meter-containerContainer of the meters.
p-metergroup-meterContent of a meter.
p-metergroup-label-listContainer element of the list of labels.
p-metergroup-label-list-startContainer element when label position is start.
p-metergroup-label-list-endContainer element when label position is end.
p-metergroup-label-list-horizontalContainer element when label orientation is horizontal.
p-metergroup-label-list-verticalContainer element when label orientation is vertical.
p-metergroup-label-list-itemContainer element of a list item.
p-metergroup-label-list-typeContainer element of a list type.
p-metergroup-labelContent of a label.

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.

PrimeNG 17.18.15 by PrimeTek