Collapsible

Overview

Collapsible is a three-part composite over the Navius Collapsible primitive. ZitsCollapsible renders NaviusCollapsible (owns the open state and publishes --collapsible-panel-height/-width), ZitsCollapsibleTrigger renders NaviusCollapsibleTrigger unstyled, and ZitsCollapsibleContent renders NaviusCollapsiblePanel unstyled. All three re-export the underlying primitive parts without adding a Tailwind base class of their own; the consumer supplies the visual treatment via class.

Install

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

Usage

<ZitsCollapsible @bind-Open="_open">
    <ZitsCollapsibleTrigger>Toggle</ZitsCollapsibleTrigger>
    <ZitsCollapsibleContent>Hidden content</ZitsCollapsibleContent>
</ZitsCollapsible>

@code { private bool _open; }

Parts and props

None of the three parts add a prop beyond what the composed Navius primitives already expose. ZitsCollapsible forwards Open, OpenChanged, DefaultOpen, Disabled, and Attributes to NaviusCollapsible. ZitsCollapsibleContent forwards KeepMounted to NaviusCollapsiblePanel. ZitsCollapsibleTrigger forwards only ChildContent/Attributes.

Styling surface

All three parts accept Attributes, forwarded unmodified (no Cn.Merge base class is applied by the styled layer); the consumer’s class is the only styling input. There are no variant/size parameters.

Data attribute hooks

Part	Attribute	Description
Trigger	`data-panel-open`	Present while the panel is open, emitted by `NaviusCollapsibleTrigger`.
Content	`data-open` / `data-closed`	Emitted by `NaviusCollapsiblePanel`; pair with `--collapsible-panel-height`/`-width` for height/width transitions.