Examples
Production split-layout patterns with copy-ready Plain CSS and Tailwind implementations.
Vertical JSON panel
A flexible editor above a constrained preview that can collapse from its resize handle.
Vertical JSON panel (Plain CSS)
{ "nodes": 4, "connections": 3 }Vertical JSON panel (Tailwind CSS)
{ "nodes": 4, "connections": 3 }Application builder workspace
A realistic editor shell where toolbar icon buttons hide or restore the project navigator and properties inspector.
Application builder workspace (Plain CSS)
Application builder workspace (Tailwind CSS)
customer-profile.component.ts
1
export class CustomerProfileComponent2 readonly customer = input.required<Customer>();3 readonly mode = signal('details');Consumer persistence
Save only resizeEnd values to application preferences. TailNG never writes to local storage.
Persist final pane sizes
ts
readonly panelSizes = signal<Record<string, number>>(loadPanelSizes());
saveLayout(event: TngSplitResizeEvent): void {
this.panelSizes.update((sizes) => ({
...sizes,
[event.previousPaneId]: event.previousPaneSize,
[event.nextPaneId]: event.nextPaneSize,
}));
this.preferences.savePanelSizes(this.panelSizes());
}