Vitral 0.2
Mensagens

ProgressBar

Quanto de uma tarefa já foi feito, numa barra fina, com valor ou indeterminada.

Testado com WAI-ARIA

Importação

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

Determinado

Uploading photos
35%
<script setup lang="ts">import { Button, ProgressBar, StackPanel } from '@vitral/vue';import { onBeforeUnmount, ref } from 'vue'; const value = ref(35);let timer: ReturnType<typeof setInterval> | undefined; function run() {    clearInterval(timer);    value.value = 0;    timer = setInterval(() => {        value.value = Math.min(100, value.value + Math.round(Math.random() * 12));        if (value.value >= 100) clearInterval(timer);    }, 300);} onBeforeUnmount(() => clearInterval(timer));</script> <template>    <StackPanel orientation="horizontal" spacing="0.75rem" align="start" wrap>        <StackPanel spacing="0.375rem" style="width: 24rem">            <span id="pb-upload">Uploading photos</span>            <ProgressBar :value="value" aria-labelledby="pb-upload" />        </StackPanel>        <Button label="Run" icon="refresh" severity="secondary" size="small" @click="run" />    </StackPanel></template>

Rótulo

`unit` acompanha o valor e vira o texto falado dele; `show-value` desligado o esconde; o slot o substitui.

Copying files
64 of 100 files
No label
<script setup lang="ts">import { ProgressBar, StackPanel } from '@vitral/vue';</script> <template>    <StackPanel orientation="horizontal" spacing="0.75rem" align="start" wrap>        <StackPanel spacing="0.375rem" style="width: 24rem">            <span id="pb-files">Copying files</span>            <ProgressBar :value="64" unit=" of 100 files" aria-labelledby="pb-files" />        </StackPanel>        <StackPanel spacing="0.375rem" style="width: 24rem">            <span id="pb-quiet">No label</span>            <ProgressBar :value="80" :show-value="false" aria-labelledby="pb-quiet" />        </StackPanel>    </StackPanel></template>

Indeterminado

Um trabalho de duração desconhecida; nenhum valor é anunciado.

Connecting…
<script setup lang="ts">import { ProgressBar, StackPanel } from '@vitral/vue';</script> <template>    <StackPanel spacing="0.375rem" style="width: 24rem">        <span id="pb-connect">Connecting…</span>        <ProgressBar mode="indeterminate" aria-labelledby="pb-connect" />    </StackPanel></template>

API

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

Props

NomeTipoDescrição
valuenumber0–100.
mode'determinate' | 'indeterminate'`'determinate'` (o padrão) ou `'indeterminate'`, para trabalho de duração desconhecida.
showValuebooleanMostra o valor ao lado da barra. O padrão é true.
unitstringSegue o valor no rótulo. O padrão é `'%'`.

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

Slots

NomeProps do slotDescrição
default(props: { value: number })Substitui o rótulo do valor.

Usado nestes templates