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