Vitral 0.2
Mensagens

MeterGroup

Vários valores numa só barra, com uma legenda, lidos como um único total.

Testado com WAI-ARIA

Importação

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

Básico

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

Rótulo primeiro, cores personalizadas

  • 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

Lido de packages/vue/src/components/MeterGroup/types.ts, então diz o que o componente aceita de fato.

Props

NomeTipoDescrição
valueMeterItem[]—
minnumberO padrão é 0.
maxnumberO padrão é 100.
orientation'horizontal' | 'vertical'—
labelPosition'start' | 'end'A legenda depois da trilha (o padrão) ou antes dela.
labelOrientation'horizontal' | 'vertical'Como a legenda é disposta. O padrão é na horizontal, ou na vertical para um medidor vertical.
valueTemplatestringComo um valor é escrito, na legenda e para as tecnologias assistivas. `{value}` é uma porcentagem. O padrão é `'{value}%'`.

Mais pt, dt e unstyled de BaseProps; veja pass-through e modo sem estilo.

Slots

NomeProps do slotDescrição
label(props: { value: MeterItem[]; totalPercent: number; percentages: number[] })Substitui a legenda.
icon(props: { value: MeterItem; index: number })O ícone ou marcador de um item.
start(props: { totalPercent: number })—
end(props: { totalPercent: number })—

Usado nestes templates