Panel stack
@xui/panel-stackA stack of screens with a back-navigating header — a drill-down in a fixed space. Only the top panel renders; pushing slides in from the right, popping slides back. The slide and focus are not testable in jsdom, so this story is the real check.
Install
pnpm add @xui/panel-stack Add the barrel to a standalone component's imports:
import { XuiPanelStackImports } from '@xui/panel-stack';
@Component({
imports: [XuiPanelStackImports],
// …
})Examples
Default
Source only — this one needs a component of its own to run, so there is nothing to render here.
<xui-panel-stack class="h-96 w-80" [initialPanel]="{ title: 'Settings', content: settings }" />
<ng-template #settings let-stack="stack">
<div class="flex flex-col p-2">
<button
xuiButton
variant="ghost"
class="justify-start"
(click)="stack.openPanel({ title: 'Account', content: account, data: { user: 'rene' } })"
>
Account →
</button>
<button
xuiButton
variant="ghost"
class="justify-start"
(click)="stack.openPanel({ title: 'Notifications', content: notifications })"
>
Notifications →
</button>
</div>
</ng-template>
<ng-template #account let-data let-stack="stack">
<div class="flex flex-col gap-3 p-4 text-sm">
<p class="text-foreground-muted">Signed in as <b class="text-foreground">{{ data.user }}</b>.</p>
<button
xuiButton
variant="outline"
class="justify-start"
(click)="stack.openPanel({ title: 'Password', content: password })"
>
Change password →
</button>
</div>
</ng-template>
<ng-template #notifications>
<div class="flex flex-col gap-2 p-4 text-sm">
<xui-checkbox [checked]="true" label="Email" />
<xui-checkbox label="Push" />
</div>
</ng-template>
<ng-template #password>
<div class="flex flex-col gap-3 p-4 text-sm">
<input xuiInput placeholder="New password" type="password" />
<input xuiInput placeholder="Confirm" type="password" />
</div>
</ng-template>API
A stack of screens with a back-navigating header — a master/detail flow in a fixed space, the way a settings drill-down or a wizard reads.
Inputs
classClassValueThe user-defined classes. Merged last so they win over the base classes.''initialPanelXuiPanel<D>The panel at the bottom of the stack. It cannot be popped — there is always something to show.showPanelHeaderbooleanShow the header with the panel title and its back button. Turn it off to supply your own navigation.trueOutputs
openedXuiPanelEmits the panel that was just pushed onto the stack.closedXuiPanelEmits the panel that was just popped off the stack.Methods
openPanel(panel: XuiPanel<P>): voidclosePanel(): void