Splitter

import { WrSplitter } from 'ngwr/splitter';

@Component({ imports: [WrSplitter] })
export class MyComponent {}

<wr-splitter [(position)]="pos">
  <div wrSplitterStart>Files</div>
  <div wrSplitterEnd>Editor</div>
</wr-splitter>

Files

Editor

Preview

Logs

Name	Description	Type	Default
`position`	Position of the divider as a percentage (0–100). Two-way bindable.	`number`	`50`
`orientation`	Divider direction: - `'horizontal'` — vertical divider, drags L/R (panes side by side). - `'vertical'` — horizontal divider, drags U/D (panes stacked).	`'horizontal' \| 'vertical'`	`'horizontal'`
`minPosition`	Minimum allowed position.	`number`	`0`
`maxPosition`	Maximum allowed position.	`number`	`100`
`disabled`	Disable dragging.	`boolean`	`false`
`dividerLabel`	Accessible name of the divider. A focusable `role="separator"` is an interactive widget, so it needs one — without it a screen reader reaching the divider announces nothing but "separator" and its number. Falls back to `splitter.divider`.	`string \| null`	`null`

Installation