Components / Collapsible

Collapsible

An interactive component which expands and collapses a panel. The brain handles the open state, ARIA wiring, and publishes the content size for height transitions; toggle the chevron below to feel it.

Examples

@lzitser23 starred 3 repositories

@navius/primitives

razor

<ZitsCollapsible @bind-Open="_open" class="flex w-[350px] flex-col gap-2">
    <div class="flex items-center justify-between gap-4 px-4">
        <h4 class="text-sm font-semibold">@@lzitser23 starred 3 repositories</h4>
        <ZitsCollapsibleTrigger class="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-accent">
            <ChevronsUpDownIcon class="h-4 w-4" />
            <span class="sr-only">Toggle</span>
        </ZitsCollapsibleTrigger>
    </div>
    <div class="rounded-md border px-4 py-2 font-mono text-sm">@@navius/primitives</div>
    <ZitsCollapsibleContent class="flex flex-col gap-2">
        <div class="rounded-md border px-4 py-2 font-mono text-sm">@@navius/colors</div>
        <div class="rounded-md border px-4 py-2 font-mono text-sm">@@navius/icons</div>
    </ZitsCollapsibleContent>
</ZitsCollapsible>

@code { private bool _open; }

Anatomy

Compose the parts: a root that owns the open state, a trigger, and the collapsible content panel.

razor

ZitsCollapsible            (owns Open / DefaultOpen)
├── ZitsCollapsibleTrigger
└── ZitsCollapsibleContent  (mounts/unmounts; KeepMounted to keep it in the DOM while closed)

Installation

Terminal bash

navius add collapsible

API reference

ZitsCollapsible (root):

Prop	Type	Default
Open	bool	false
OpenChanged	EventCallback<bool>	-
DefaultOpen	bool	false
Disabled	bool	false

ZitsCollapsibleContent:

Prop	Type	Default
KeepMounted	bool	false