Components / Collapsible

Collapsible

An interactive component which expands and collapses a panel.

@lzitser23 starred 3 repositories

@navius/primitives

razor

<NaviusCollapsible @bind-Open="_open">
    <NaviusCollapsibleTrigger>Toggle</NaviusCollapsibleTrigger>
    <NaviusCollapsiblePanel class="data-[closed]:hidden">
        <div>@navius/colors</div>
        <div>@navius/engine</div>
    </NaviusCollapsiblePanel>
</NaviusCollapsible>

@code { private bool _open; }

Features

Full keyboard navigation.
Can be controlled (@bind-Open) or uncontrolled (DefaultOpen).
Publishes --collapsible-panel-height / -width so CSS height/width transitions work as a drop-in.
KeepMounted keeps the panel mounted while closed so exit animations can run.

Installation

Install the brain, or copy just this primitive in with the CLI.

Terminal bash

navius add collapsible

Anatomy

Import the parts and assemble them.

razor

@using Navius.Primitives.Components.Collapsible

<NaviusCollapsible>
    <NaviusCollapsibleTrigger />
    <NaviusCollapsiblePanel />
</NaviusCollapsible>

API Reference

Root

Contains all the parts of a collapsible. Renders a div.

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

Data attributes

Data attribute	Values
[data-disabled]	Present when disabled

Trigger

The button that toggles the collapsible. Renders a button.

Prop	Type	Default
ChildContent	RenderFragment?	-

Data attributes

Data attribute	Values
[data-panel-open]	Present while the panel is open.
[data-disabled]	Present when disabled

Panel

The panel that expands and collapses. Renders a div when open (or always, with KeepMounted).

Prop	Type	Default
KeepMounted	bool	false
ChildContent	RenderFragment?	-

Data attributes

Data attribute	Values
[data-open]	Present while open.
[data-closed]	Present while closing (through the exit transition).
[data-starting-style]	Present at the start of the open transition.
[data-ending-style]	Present at the start of the close transition.
[data-disabled]	Present when disabled

Accessibility

Adheres to the disclosure WAI-ARIA design pattern.

Keyboard interactions

Key	Description
`Space`	Opens/closes the collapsible.
`Enter`	Opens/closes the collapsible.