Collapse
@xui/collapseAnimates its content open and closed.
Install
pnpm add @xui/collapse Add the barrel to a standalone component's imports:
import { XuiCollapseImports } from '@xui/collapse';
@Component({
imports: [XuiCollapseImports],
// …
})Examples
Default
Loading preview…
<div class="max-w-md">
<button xuiButton size="sm" (click)="toggle()">{{ open() ? 'Hide' : 'Show' }} details</button>
<xui-collapse class="mt-2" [open]="open()">
<div class="border-border rounded-lg border p-4">
<p xuiText color="muted">
Content is removed from the DOM while closed, so it cannot be focused or announced.
</p>
</div>
</xui-collapse>
</div>Keep children mounted
Loading preview…
<div class="max-w-md">
<button xuiButton size="sm" (click)="toggle()">Toggle</button>
<xui-collapse class="mt-2" keepChildrenMounted [open]="open()">
<div class="border-border rounded-lg border p-4">
<p xuiText color="muted">Still in the DOM while closed, but inert and aria-hidden.</p>
</div>
</xui-collapse>
</div>API
Animates its content open and closed.
Inputs
classClassValueThe user-defined classes. Merged last so they win over the base classes.''openbooleanWhether the content is expanded. Two-way bindable with [(open)].falsekeepChildrenMountedbooleanKeep the content in the DOM while closed.falsedurationnumberTransition length in milliseconds.200Outputs
transitionEndbooleanEmits once the open or close transition has finished.