CollapsibleSection
A toggle header with collapsible body, built on the native details element.
Import
import { CollapsibleSection } from "@gumtree/ui/CollapsibleSection" ; Props
| Prop | Type | Default | Description |
|---|---|---|---|
title* | string | - | Section heading text |
defaultOpen | boolean | true | Whether the section is open by default |
children | ComponentChildren | - | Collapsible body content |
Examples
Open by Default
Sections start open and can be collapsed by clicking the header.
Changelog▾
v0.9.4 — Code search: regex support, path filters
v0.9.3 — Merge queue for protected branches
< CollapsibleSection title = "Changelog" >
< p class = "text-xs text-[var(--text-secondary)]" > v0 .9 .4 — Code search : regex support , path filters < /p>
< p class = "text-xs text-[var(--text-secondary)]" > v0 .9 .3 — Merge queue for protected branches < / p>
</ CollapsibleSection > Closed by Default
Start collapsed — user clicks to expand.
Announcements▾
Federation beta is now available.
< CollapsibleSection title = "Announcements" defaultOpen = { false } >
< p class = "text-xs text-[var(--text-secondary)]" > Federation beta is now available . < / p>
</ CollapsibleSection >