# Splitter

> Resizable two-pane split. Drag the divider or focus it and use arrows. Two-way `[(position)]` (0–100).

Source: https://ngwr.dev/reference/components/splitter

## Installation

```angular-ts
import { WrSplitter } from 'ngwr/splitter';

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

## Horizontal

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

## Vertical

## API

| 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` |