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 のレイアウトは、利用可能なオプションとして *horizontal* または *vertical* を受け入れる *orientation* プロパティで設定されます。
<MeterGroup :value="value" orientation="vertical" labelOrientation="vertical" />
境界は、デフォルトがそれぞれ 0 と 100 である *min* と *max* 値で設定されます。
<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* プロパティを使用して定義できます。
コンポーネントには、インタラクティブな要素は含まれていません。