# Split Panel

> Source: https://design.nanatec.co.ke/components/split-panel/
> Two adjacent panels separated by a draggable divider that the user can reposition. Beyond a basic split, this panel supports collapsing, magnetic auto-collapse while dragging, position persistence, animated transitions, and a rich drag lifecycle.

Two adjacent panels separated by a draggable divider that the user can reposition. Beyond a basic split, this panel supports collapsing, magnetic auto-collapse while dragging, position persistence, animated transitions, and a rich drag lifecycle.

## Preview

```html
<nana-split-panel style="height:200px;width:100%">
  <div slot="start" style="padding:1rem">Start</div>
  <div slot="end" style="padding:1rem">End</div>
</nana-split-panel>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/split-panel";
```

## Basic usage

```html
<nana-split-panel style="height:200px;width:100%">
  <div slot="start" style="padding:1rem">Start</div>
  <div slot="end" style="padding:1rem">End</div>
</nana-split-panel>
```

## Collapsible

Add `collapsible` to let a panel snap closed past a threshold.

```html
<nana-split-panel collapsible position="40" style="height:200px;width:100%">
  <div slot="start" style="padding:1rem">Start</div>
  <div slot="end" style="padding:1rem">End</div>
</nana-split-panel>
```

## API

## Events

| Event | Type | Description |
|---|---|---|
| `name` | `CustomEvent` | — |
| `nana-reposition` | `CustomEvent` | Emitted whenever the divider's position changes (`detail.position`). |
| `nana-reposition-start` | `CustomEvent` | Emitted when the user starts dragging the divider. |
| `nana-reposition-end` | `CustomEvent` | Emitted when the user stops dragging the divider. |
| `nana-collapse` | `CustomEvent` | Emitted when a panel collapses. |
| `nana-expand` | `CustomEvent` | Emitted when a panel expands. |

## Slots

| Slot | Description |
|---|---|
| `start` | Content to place in the start panel. |
| `end` | Content to place in the end panel. |
| `divider` | The divider. Useful for slotting in a custom icon that renders as a handle. |

## CSS Variables

| Variable | Default | Description |
|---|---|---|
| `--divider-width` | `4px` | The width of the visible divider. |
| `--divider-hit-area` | `12px` | The invisible region around the divider where dragging can occur. |
| `--min` | `0%` | The minimum allowed size of the primary panel. |
| `--max` | `100%` | The maximum allowed size of the primary panel. |
| `--transition-duration` | `200ms` | Duration of animated collapse / expand / reset. |

## CSS Parts

| Part | Description |
|---|---|
| `panel` | Both the start and end panels |
| `start` | The start panel |
| `end` | The end panel |
| `divider` | The divider that separates the start and end panels |

## Accessibility

<ul class="a11y-grid not-content">
  <li>Keyboard accessible</li>
  <li>Screen-reader labels</li>
  <li>Focus-visible states</li>
  <li>ARIA roles and states</li>
  <li>WCAG 2.2 AA contrast</li>
</ul>

## Related components

<ul class="related not-content">
  <li><a href="/components/card/">Card</a></li>
  <li><a href="/components/details/">Details</a></li>
  <li><a href="/components/divider/">Divider</a></li>
  <li><a href="/components/dialog/">Dialog</a></li>
  <li><a href="/components/drawer/">Drawer</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-split-panel--docs