Vitral 0.2
Painel

Toolbar

Uma fileira de controles em grupos de início, centro e fim, com navegação opcional pelas setas entre eles.

Testado com WAI-ARIA

Importação

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

Início, centro e fim

<script setup lang="ts">import { Button, Icon, InputText, Toolbar } from '@vitral/vue';import { ref } from 'vue'; const query = ref('');</script> <template>    <Toolbar aria-label="Documents">        <template #start>            <Button label="New" icon="plus" />            <Button label="Upload" icon="upload" severity="secondary" />        </template>        <template #center>            <InputText v-model="query" placeholder="Search" aria-label="Search documents">                <template #prefix>                    <Icon icon="search" />                </template>            </InputText>        </template>        <template #end>            <Button icon="download" severity="secondary" variant="text" aria-label="Download" />            <Button icon="trash" severity="danger" variant="text" aria-label="Delete" />        </template>    </Toolbar></template>

Foco itinerante

O Tab chega à barra uma vez; as setas andam entre os botões dela. O desabilitado é pulado.

<script setup lang="ts">import { Button, Toolbar } from '@vitral/vue';</script> <template>    <Toolbar aria-label="Text formatting" roving>        <template #start>            <Button icon="copy" severity="secondary" variant="text" aria-label="Copy" />            <Button icon="pencil" severity="secondary" variant="text" aria-label="Edit" />            <Button icon="star" severity="secondary" variant="text" aria-label="Favourite" disabled />            <Button icon="externalLink" severity="secondary" variant="text" aria-label="Open" />        </template>        <template #end>            <Button label="Share" icon="user" severity="secondary" />        </template>    </Toolbar></template>

API

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

Props

NomeTipoDescrição
rovingbooleanO teclado de barra de ferramentas do APG: uma só parada de tabulação para a barra inteira, com Esquerda/Direita (e Home/End) movendo entre os controles. Desligado por padrão, porque uma barra com um campo de texto precisa dessas teclas dentro do campo.

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

Slots

NomeProps do slotDescrição
start——
center——
end——