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 元件除了 aria-valuemin、aria-valuemax 和 aria-valuenow 屬性之外，還使用 meter 角色。 可以使用 aria-labelledby prop 定義描述元件的值。
元件不包含任何互動式元素。