Vitral 0.2
Messages

MeterGroup

Several values on one bar, with a legend, read out as a single total.

WAI-ARIA tested

Import

main.ts
import { MeterGroup } from '@vitral/vue';

Basic

  • Apps14%
  • Messages12%
  • Media24%
  • System10%
<script setup lang="ts">import { MeterGroup } from '@vitral/vue'; const storage = [    { label: 'Apps', value: 14, icon: 'grip' },    { label: 'Messages', value: 12, icon: 'bell' },    { label: 'Media', value: 24, icon: 'image' },    { label: 'System', value: 10, icon: 'sliders' }];</script> <template>    <MeterGroup :value="storage" aria-label="Storage used" /></template>

Label first, custom colours

  • Done45%
  • In review20%
  • Blocked5%
<script setup lang="ts">import { MeterGroup } from '@vitral/vue'; const sprint = [    { label: 'Done', value: 45, color: 'var(--vt-success-color)' },    { label: 'In review', value: 20, color: 'var(--vt-warn-color)' },    { label: 'Blocked', value: 5, color: 'var(--vt-danger-color)' }];</script> <template>    <MeterGroup :value="sprint" label-position="start" aria-label="Sprint progress" style="width: 100%" /></template>

Vertical

  • Apps14%
  • Messages12%
  • Media24%
  • System10%
<script setup lang="ts">import { MeterGroup } from '@vitral/vue'; const storage = [    { label: 'Apps', value: 14, icon: 'grip' },    { label: 'Messages', value: 12, icon: 'bell' },    { label: 'Media', value: 24, icon: 'image' },    { label: 'System', value: 10, icon: 'sliders' }];</script> <template>    <MeterGroup :value="storage" orientation="vertical" aria-label="Storage used, vertical" style="height: 12rem" /></template>

API

Read from packages/vue/src/components/MeterGroup/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
valueMeterItem[]—
minnumberDefaults to 0.
maxnumberDefaults to 100.
orientation'horizontal' | 'vertical'—
labelPosition'start' | 'end'The legend after the track (the default) or before it.
labelOrientation'horizontal' | 'vertical'How the legend is laid out. Defaults to across, or down for a vertical meter.
valueTemplatestringHow a value is written, in the legend and to assistive technology. `{value}` is a percentage. Defaults to `'{value}%'`.

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Slots

NameSlot propsDescription
label(props: { value: MeterItem[]; totalPercent: number; percentages: number[] })Replaces the legend.
icon(props: { value: MeterItem; index: number })An item's icon or marker.
start(props: { totalPercent: number })—
end(props: { totalPercent: number })—

Used in these templates