Toggle
Overview
Section titled “Overview”Toggle renders NaviusToggle, the headless primitive that owns pressed state and
aria-pressed, and layers a cva-style Variant/Size class set on top. The consumer’s
own class is merged in last through Cn.Merge, so overrides win over the preset.
Install
Section titled “Install”navius add toggle --to ./src/MyApp --namespace MyApp.Ui@using Zits.Ui.Components
<ZitsToggle @bind-Pressed="_bold" Variant="outline"> <BoldIcon /></ZitsToggle>Parts and props
Section titled “Parts and props”Toggle is a single control with no part tree. Pressed, PressedChanged,
DefaultPressed, Disabled, ChildContent, and Attributes pass through to
NaviusToggle unchanged. The styled wrapper adds:
| Prop | Type | Default | Description |
|---|---|---|---|
Variant |
string |
"default" |
One of default, outline. Selects the Tailwind class set. |
Size |
string |
"default" |
One of default, sm, lg. Selects the Tailwind class set. |
Styling surface
Section titled “Styling surface”Attributes on ZitsToggle is forwarded to the rendered NaviusToggle and merged with
the Variant/Size class set via Cn.Merge, with the caller’s classes applied last.
| Parameter | Values |
|---|---|
Variant |
default · outline |
Size |
default · sm · lg |
Data attribute hooks
Section titled “Data attribute hooks”| Part | Attribute | Description |
|---|---|---|
| Root | data-pressed |
Present when pressed, emitted by the composed NaviusToggle primitive. |