PrimeBlocks: One-Time Purchase Replaces Subscription Model 🎉Learn More

MeterGroup

MeterGroup displays scalar measurements within a known range.

Import #


import MeterGroup from 'primevue/metergroup';

Basic #

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

Space used (15%)


<MeterGroup :value="value" />

Multiple #

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

Apps (16%)
Messages (8%)
Media (24%)
System (10%)


<MeterGroup :value="value" />

Icon #

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

Apps (16%)
Messages (8%)
Media (24%)
System (10%)


<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.

Apps (16%)
Messages (8%)
Media (24%)
System (10%)


<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.

Apps (24%)
Messages (16%)
Media (24%)
System (12%)


<MeterGroup :value="value" orientation="vertical" labelOrientation="vertical" />

Min-Max #

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

Apps (8%)
Messages (4%)
Media (12%)
System (5%)


<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


<MeterGroup :value="value" labelPosition="start">
    <template #label="{ value }">
        <div class="flex flex-wrap gap-4">
            <template v-for="val of value" :key="val.label">
                <Card class="flex-1 border border-surface shadow-none">
                    <template #content>
                        <div class="flex justify-between gap-8">
                            <div class="flex flex-col gap-1">
                                <span class="text-surface-500 dark:text-surface-400 text-sm">{{ val.label }}</span>
                                <span class="font-bold text-lg">{{ val.value }}%</span>
                            </div>
                            <span class="w-8 h-8 rounded-full inline-flex justify-center items-center text-center" :style="{ backgroundColor: `${val.color1}`, color: '#ffffff' }">
                                <i :class="val.icon" />
                            </span>
                        </div>
                    </template>
                </Card>
            </template>
        </div>
    </template>
    <template #meter="slotProps">
        <span :class="slotProps.class" :style="{ background: `linear-gradient(to right, ${slotProps.value.color1}, ${slotProps.value.color2})`, width: slotProps.size }" />
    </template>
    <template #start="{ totalPercent }">
        <div class="flex justify-between mt-4 mb-2 relative">
            <span>Storage</span>
            <span :style="{ width: totalPercent + '%' }" class="absolute text-right">{{ totalPercent }}%</span>
            <span class="font-medium">1TB</span>
        </div>
    </template>
    <template #end>
        <div class="flex justify-between mt-4">
            <Button label="Manage Storage" outlined size="small" />
            <Button label="Update Plan" size="small" />
        </div>
    </template>
</MeterGroup>

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.

Build Faster Design Better

490+ ready to use UI blocks crafted with PrimeVue and Tailwind CSS.

Learn More

name	type	default	description
value	MeterItem[]	null	Current value of the metergroup.
min	number	0	Mininum boundary value.
max	number	100	Maximum boundary value.
orientation	"horizontal" \| "vertical"	horizontal	Specifies the layout of the component, valid values are 'horizontal' and 'vertical'.
labelPosition	"start" \| "end"	end	Specifies the label position of the component, valid values are 'start' and 'end'.
labelOrientation	"horizontal" \| "vertical"	horizontal	Specifies the label orientation of the component, valid values are 'horizontal' and 'vertical'.
dt	any	null	It generates scoped CSS variables using design tokens for the component.
pt	PassThrough<MeterGroupPassThroughOptions>	null	Used to pass attributes to DOM elements inside the component.
ptOptions	any	null	Used to configure passthrough(pt) options of the component.
unstyled	boolean	false	When enabled, it removes component related styles in the core.

name	parameters	returnType	description
label	scope: { value: MeterItem, // Current value of the component totalPercent: number, // Total percent of the metergroup items percentages: number, // Array of sequential sum of values of metergroup items }	VNode<RendererNode, RendererElement, Object>[]	Custom label template.
meter	scope: { value: MeterItem, // Current value of the meter item index: number, // Current index of the meter item class: string, // Style class of the meter item orientation: string, // Current orientation of the component size: string, // Current width of the meter item totalPercent: number, // Total percent of the metergroup items }	VNode<RendererNode, RendererElement, Object>[]	Custom meter template.
icon	scope: { value: MeterItem, // Current value of the component class: string, // Style class of the icon }	VNode<RendererNode, RendererElement, Object>[]	Custom icon template.
start	scope: { value: MeterItem, // Current value of the component totalPercent: number, // Total percent of the metergroup items percentages: number, // Array of sequential sum of values of metergroup items }	VNode<RendererNode, RendererElement, Object>[]	Custom start template.
end	scope: { value: MeterItem, // Current value of the component totalPercent: number, // Total percent of the metergroup items percentages: number, // Array of sequential sum of values of metergroup items }	VNode<RendererNode, RendererElement, Object>[]	Custom end template.

name	type	default	description
instance	any	null	Defines instance.
props	MeterGroupProps	null	Defines valid properties.
context	MeterGroupContext	null	Defines current inline state.
attrs	any	null	Defines valid attributes.
parent	any	null	Defines parent options.
global	undefined \| object	null	Defines passthrough(pt) options in global config.

name	type	default	description
root	MeterGroupPassThroughOptionType	null	Used to pass attributes to the root's DOM element.
meters	MeterGroupPassThroughOptionType	null	Used to pass attributes to the meter container's DOM element.
meter	MeterGroupPassThroughOptionType	null	Used to pass attributes to the meter's DOM element.
labelList	MeterGroupPassThroughOptionType	null	Used to pass attributes to the label list's DOM element.
label	MeterGroupPassThroughOptionType	null	Used to pass attributes to the label list item's DOM element.
labelIcon	MeterGroupPassThroughOptionType	null	Used to pass attributes to the label icon type's DOM element.
labelMarker	MeterGroupPassThroughOptionType	null	Used to pass attributes to the label list type's DOM element.
labelText	MeterGroupPassThroughOptionType	null	Used to pass attributes to the label's DOM element.

name	type	default	description
value	MeterItem	null	Current value of the meter item
index	number	null	Current index of the meter item

MeterGroup

Import #

Basic #

Multiple #

Icon #

Label #

Vertical #

Min-Max #

Template #

Accessibility #

Screen Reader

Keyboard Support

MeterGroup API

MeterGroup #

Props #

Slots #

Interfaces #

MeterGroupPassThroughMethodOptions #

MeterGroupPassThroughOptions #

MeterGroupPassThroughAttributes #

MeterGroupContext #

MeterItem #

Types #

MeterGroupPassThroughOptionType #

MeterGroupEmits #

name	type	default	description
label	string	null	Current label of the meter item.
value	number	null	Current value of the meter item.
color	string	null	Current color of the meter item.
icon	string	null	Current icon of the meter item.
[key: string]	any	null