# splitViewHandle

> The split view's part of a divider, beside `resizeHandle()`: measures the panes before a drag starts, remembers the settled layout, moves the divider with ←/→, and collapses or restores the pane before it with Enter.

```ts
import { splitViewHandle } from "@sdxc/ui/app";
```

The split view's part of a divider, beside `resizeHandle()`: measures the panes before a
drag starts, remembers the settled layout, moves the divider with ←/→, and collapses or
restores the pane before it with Enter. Put it before `resizeHandle()` in `mix`.

## Signature

```ts
splitViewHandle(pane: SplitViewPane): MixinDescriptor<HTMLElement>
```

Returns: A mixin descriptor for the divider.

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `pane` | `SplitViewPane` | The pane before the divider, which Enter collapses. |

## Examples

```tsx
<div data-resizable-handle mix={[splitViewHandle("list"), resizeHandle("horizontal", session)]} />
```

## Used with it

The events, constants and types its module publishes, each imported from `@sdxc/ui/app` too.

### SPLIT_VIEW_ITEM_ATTRIBUTE

Attribute an app puts on each list link j/k steps through, in list order.

#### Signature

```ts
const SPLIT_VIEW_ITEM_ATTRIBUTE = "data-split-view-item"
```

### setSplitViewCollapsed

Collapses or restores `pane` and remembers it. The list and the detail never both
collapse: collapsing one brings the other back, so the view always shows a record.

#### Signature

```ts
setSplitViewCollapsed(root: HTMLElement, pane: SplitViewPane, collapsed: boolean): void
```

#### Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| `root` | `HTMLElement` | The split view. |
| `pane` | `SplitViewPane` | The pane to change. |
| `collapsed` | `boolean` | Whether it ends collapsed. |

### SplitViewKeyScope

Where a split view's j/k answer: `"page"` anywhere in the document, `"view"` only while
focus is inside the view, for a view shown on a page whose own keys come first.

#### Signature

```ts
type SplitViewKeyScope = "page" | "view"
```

One of `"page"`, `"view"`.