Components / Toolbar

Toolbar

A container for grouping a set of controls: buttons, links, and toggle groups. Follows the WAI-ARIA toolbar pattern: role="toolbar", a single Tab stop, and roving arrow-key focus from the brain. The behaviour comes from the brain; this preview is the real component running in WebAssembly.

Examples

Tab into the toolbar then use the arrow keys to move between controls. Format is a multiple toggle group; alignment is single (radio-like).

Docs

Format: bold · Align: left

razor

<ZitsToolbar aria-label="Formatting options">
    <ZitsToolbarToggleGroup Type="multiple" @bind-Value="_format" aria-label="Text formatting">
        <ZitsToolbarToggleItem Value="bold" aria-label="Bold"><BoldIcon /></ZitsToolbarToggleItem>
        <ZitsToolbarToggleItem Value="italic" aria-label="Italic"><ItalicIcon /></ZitsToolbarToggleItem>
        <ZitsToolbarToggleItem Value="underline" aria-label="Underline"><UnderlineIcon /></ZitsToolbarToggleItem>
    </ZitsToolbarToggleGroup>

    <ZitsToolbarSeparator />

    <ZitsToolbarToggleGroup Type="single" @bind-Value="_align" aria-label="Text alignment">
        <ZitsToolbarToggleItem Value="left"><AlignLeftIcon /></ZitsToolbarToggleItem>
        <ZitsToolbarToggleItem Value="center"><AlignCenterIcon /></ZitsToolbarToggleItem>
        <ZitsToolbarToggleItem Value="right"><AlignRightIcon /></ZitsToolbarToggleItem>
    </ZitsToolbarToggleGroup>

    <ZitsToolbarSeparator />

    <ZitsToolbarLink href="#">Docs</ZitsToolbarLink>
    <ZitsToolbarButton class="ml-auto" @onclick="Reset">Reset</ZitsToolbarButton>
</ZitsToolbar>

@code {
    private IReadOnlyList<string> _format = new List<string> { "bold" };
    private IReadOnlyList<string> _align = new List<string> { "left" };
}

Anatomy

Razor razor

<ZitsToolbar>
    <ZitsToolbarButton />
    <ZitsToolbarLink />
    <ZitsToolbarSeparator />
    <ZitsToolbarToggleGroup>
        <ZitsToolbarToggleItem />
    </ZitsToolbarToggleGroup>
</ZitsToolbar>

Installation

Terminal bash

navius add toolbar

API reference

ZitsToolbar

Prop	Type	Default
Orientation	string	"horizontal"
Loop	bool	true
Dir	string?	-

ZitsToolbarButton

Prop	Type	Default
Disabled	bool	false

ZitsToolbarToggleGroup

Prop	Type	Default
Type	string	"single"
Value	IReadOnlyList<string>?	-
DefaultValue	IReadOnlyList<string>?	-
Disabled	bool	false

ZitsToolbarToggleItem

Prop	Type	Default
Value	string	""
Disabled	bool	false

ZitsToolbarLink (href via splat) and ZitsToolbarSeparator take no parameters of their own; everything else passes through to the brain.