Vitral 0.2
Panel

Toolbar

A row of controls in start, center and end groups, with optional arrow-key navigation between them.

WAI-ARIA tested

Import

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

Start, center and end

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

Roving focus

Tab reaches the bar once; the arrow keys move between its buttons. The disabled one is skipped.

<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

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

Props

NameTypeDescription
rovingbooleanThe APG toolbar keyboard: one tab stop for the whole bar, Left/Right (and Home/End) moving between its controls. Off by default, because a toolbar holding a text field needs those keys inside the field.

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

Slots

NameSlot propsDescription
start——
center——
end——