MeterGroup 在已知范围内显示标量测量值。
import MeterGroup from 'primevue/metergroup';
MeterGroup 需要一个 value 作为要显示的数据，其中集合中的每个项目都应该是一种 MeterItem 类型。
<MeterGroup :value="value" />
向数组中添加更多项目会在组中显示仪表。
<MeterGroup :value="value" />
图标可以显示在标签旁边，而不是默认的标记。
<MeterGroup :value="value" />
标签相对于仪表的位置使用 labelPosition 属性定义。标签的默认方向是水平的，垂直替代方案可通过 labelOrientation 选项获得。
<MeterGroup :value="value" labelPosition="start" labelOrientation="vertical" />
MeterGroup 的布局通过 orientation 属性配置，该属性接受 horizontal 或 vertical 作为可用选项。
<MeterGroup :value="value" orientation="vertical" labelOrientation="vertical" />
边界通过 min 和 max 值配置，它们的默认值分别为 0 和 100。
<MeterGroup :value="value" :max="200" />
MeterGroup 提供对标签、仪表项以及仪表周围内容的模板支持。
<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>
MeterGroup 组件使用 meter 角色，以及 aria-valuemin、aria-valuemax 和 aria-valuenow 属性。可以使用 aria-labelledby 属性定义描述组件的值。
组件不包含任何交互元素。