Collapsible

Previous Next

An interactive component which expands/collapses a panel.

@peduarte starred 3 repositories

@radix-ui/primitives
<Collapsible class="flex w-[350px] flex-col gap-2">
    <CollapsibleTrigger>Toggle</CollapsibleTrigger>
    <CollapsibleContent>Content</CollapsibleContent>
</Collapsible>

Installation

Install the collapsible component using the command or manual steps.

blazor-shadcn add collapsible

Usage

@using BlazorShadcn.Components.UI
<Collapsible>
    <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
    <CollapsibleContent>
        Yes. Free to use for personal and commercial projects.
    </CollapsibleContent>
</Collapsible>

Examples

Basic

<Collapsible>
    <CollapsibleTrigger>Product details</CollapsibleTrigger>
    <CollapsibleContent>...</CollapsibleContent>
</Collapsible>

Settings Panel

Fallback example until Field is implemented.

Radius
Set the corner radius of the element.
<Collapsible>
    <CollapsibleTrigger>Expand settings</CollapsibleTrigger>
    <CollapsibleContent>...</CollapsibleContent>
</Collapsible>

File Tree

Fallback example until Tabs is implemented.

<Collapsible DefaultOpen="true">
    <CollapsibleTrigger>components</CollapsibleTrigger>
    <CollapsibleContent>
        <Collapsible DefaultOpen="true">
            <CollapsibleTrigger>ui</CollapsibleTrigger>
            <CollapsibleContent>button.tsx</CollapsibleContent>
        </Collapsible>
    </CollapsibleContent>
</Collapsible>

API Reference

Collapsible

PropTypeDefault
Openbool?null
DefaultOpenboolfalse
OpenChangedEventCallback<bool>-