Section
@xui/sectionA titled container for a group of related content.
Install
pnpm add @xui/section Add the barrel to a standalone component's imports:
import { XuiSectionImports } from '@xui/section';@Component({ imports: [XuiSectionImports], // …})Examples
Default
Loading preview…
<xui-section class="max-w-lg" [title]="title" [subtitle]="subtitle" [collapsible]="collapsible" [compact]="compact"> <button right-element xuiButton size="sm" variant="outline">Edit</button> <xui-section-card> <p xuiText color="muted">A section splits into cards separated by hairlines.</p> </xui-section-card> <xui-section-card> <p xuiText color="muted">Each card supplies its own padding.</p> </xui-section-card></xui-section>Collapsible
Loading preview…
<xui-section class="max-w-lg" [title]="title" [subtitle]="subtitle" [collapsible]="collapsible" [compact]="compact"> <button right-element xuiButton size="sm" variant="outline">Edit</button> <xui-section-card> <p xuiText color="muted">A section splits into cards separated by hairlines.</p> </xui-section-card> <xui-section-card> <p xuiText color="muted">Each card supplies its own padding.</p> </xui-section-card></xui-section>Compact
Loading preview…
<xui-section class="max-w-lg" [title]="title" [subtitle]="subtitle" [collapsible]="collapsible" [compact]="compact"> <button right-element xuiButton size="sm" variant="outline">Edit</button> <xui-section-card> <p xuiText color="muted">A section splits into cards separated by hairlines.</p> </xui-section-card> <xui-section-card> <p xuiText color="muted">Each card supplies its own padding.</p> </xui-section-card></xui-section>Without header
Loading preview…
<xui-section class="max-w-lg"> <xui-section-card><p xuiText color="muted">No title, so no header renders.</p></xui-section-card></xui-section>API
A titled container for a group of related content.
Variants
elevation0Inputs
classClassValueThe user-defined classes. Merged last so they win over the variant classes.''elevationXuiSectionVariants['elevation']Drop-shadow depth of the section's card.this.config.elevationtitlestring | nullThe header only renders when there is a title.nullsubtitlestring | nullSecondary text beside the title in the header.nullcollapsiblebooleanLet the header fold the section's body away.falsecompactbooleanReduce the header padding.this.config.compactopenbooleanOpen state of a collapsible section. Works bound or unbound.trueA padded content panel inside a section.
Inputs
classClassValueThe user-defined classes. Merged last so they win over the base classes.''paddedbooleanTurn off the internal padding for content that supplies its own.true