Toolbar

Overview

Toolbar renders NaviusToolbar (role="toolbar", single Tab stop, roving arrow-key focus) as a bordered, rounded row, with each item wrapper (ZitsToolbarButton, ZitsToolbarLink, ZitsToolbarSeparator, ZitsToolbarToggleGroup, ZitsToolbarToggleItem) composing the matching NaviusToolbar.* part styled to fit.

Install

navius add toolbar --to ./src/MyApp --namespace MyApp.Ui

Usage

@using Zits.Ui.Components

<ZitsToolbar aria-label="Formatting options">
    <ZitsToolbarToggleGroup Type="multiple" @bind-Value="_format" aria-label="Text formatting">
        <ZitsToolbarToggleItem Value="bold" aria-label="Bold">B</ZitsToolbarToggleItem>
    </ZitsToolbarToggleGroup>
    <ZitsToolbarSeparator />
    <ZitsToolbarLink href="#" target="_blank">Docs</ZitsToolbarLink>
    <ZitsToolbarButton class="ml-auto">Reset</ZitsToolbarButton>
</ZitsToolbar>

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

Parts and props

Orientation, Loop, Dir (root), Disabled (Button/ToggleGroup/ToggleItem), and Type/Value/ValueChanged/DefaultValue (ToggleGroup) are the primitive’s own props and pass through unchanged. The styled wrappers add no new props; each contributes only its Tailwind class set over the matching NaviusToolbar.* part.

Styling surface

Every part accepts class/Attributes, merged with its own base class through Cn.Merge.

Parameter	Values
ZitsToolbar.Orientation	horizontal · vertical
ZitsToolbarToggleGroup.Type	single · multiple

Data attribute hooks

Part	Attribute	Description
Root, Separator	data-orientation	horizontal/vertical, emitted by the composed primitive; drives the axis-dependent layout classes.
ToggleItem	data-pressed	Present when the toggle is active, emitted by the composed primitive; drives the active background/text styling.

Underlying primitives

• NaviusToolbar