Nested splitters are useful for editor-like shells with a sidebar, top context region, main
canvas, and a secondary status or log area.
Project sidebar
Folders, views, or explorer items usually live here.
Editor header
Toolbar, breadcrumbs, or active file info.
Canvas
This is the main content region that usually needs the most space.
Output panel
Logs, errors, or test output fit naturally in a smaller bottom region.
`,
})
export class SplitterNestedWorkspaceDemoComponent {
protected readonly outerPanels: SplitterPanel[] = [
{ id: 'sidebar', size: 22, minSize: 180, maxSize: 320 },
{ id: 'main', size: 78, minSize: 540 },
];
protected readonly innerPanels: SplitterPanel[] = [
{ id: 'header', size: 18, minSize: 90, maxSize: 160 },
{ id: 'canvas', size: 60, minSize: 240 },
{ id: 'footer', size: 22, minSize: 100, maxSize: 180 },
];
}
```
## Keyboard resizing
```ts
import { Component, signal } from '@angular/core';
import {
ButtonComponent,
SplitterComponent,
SplitterPanelDirective,
type SplitterPanel,
type SplitterResizeEvent,
} from 'ui';
@Component({
selector: 'app-splitter-keyboard-demo',
standalone: true,
imports: [ButtonComponent, SplitterComponent, SplitterPanelDirective],
template: `
Reset
Last resize: {{ lastResize() || 'none' }}
Tab to the gutter, then use arrow keys for small adjustments or Home /
End to move toward the panel limits.
`,
})
export class SplitterKeyboardDemoComponent {
protected readonly panels: SplitterPanel[] = [
{ id: 'details', size: 35, minSize: 220, maxSize: 420 },
{ id: 'preview', size: 65, minSize: 320 },
];
protected readonly lastResize = signal('');
protected onResize(event: SplitterResizeEvent): void {
this.lastResize.set(`${event.panelId}: ${event.newSize.toFixed(0)}%`);
}
protected reset(): void {
this.lastResize.set('');
}
}
```
## Accessibility
### Group and separator semantics
`ui-splitter` renders the whole layout as a grouped region and exposes each active gutter as a keyboard-focusable `separator`. The gutter reflects `aria-orientation`, `aria-valuenow`, `aria-valuemin`, and `aria-valuemax`.
### Keyboard behavior
The gutter supports keyboard resizing.
| Key | Action |
| --- | --- |
| Tab / Shift+Tab | Moves focus to or from a resizable gutter. |
| ArrowLeft / ArrowRight | Resize horizontal panels in small steps. |
| ArrowUp / ArrowDown | Resize vertical panels in small steps. |
| Home | Moves the gutter toward the minimum size of the leading panel. |
| End | Moves the gutter toward the minimum size of the trailing panel. |
### Labels and constraints
Use a meaningful `ariaLabel` when the default splitter label is not specific enough for the surrounding screen. Panel size constraints are not just visual rules; they also prevent keyboard resizing from creating unusable regions.