Split panel
Split panel for lit-material: two panes with a draggable, keyboard-operable divider.
- 1.9 KB gzipped
- @lit-material/split-panel 0.1.2
- Renders on the server
Example
Split panel
Drag the divider, or focus it and use the arrow keys; Enter collapses and restores the left pane.
Request
GET /api/projects
Response
200 OK · 1.2 KiB · 84 ms
Install
npm install @lit-material/split-panel @lit-material/tokensimport "@lit-material/split-panel";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-split-panel>
Two panes with a divider between them that you drag, or move from the keyboard: request and response, editor and preview, list and detail.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
position | position | number | 50 | The start pane's share, in percent. |
min | min | number | 10 | Smallest start pane, in percent. |
max | max | number | 90 | Largest start pane, in percent. |
orientation | orientation | SplitOrientation | "horizontal" | |
label | label | string | "Resize panes" | Accessible name of the divider; name it after the start pane, e.g. "Request". |
disabled | disabled | boolean | false |
Events
| Event | Description |
|---|---|
change | When the divider has moved (after a drag or a key press); detail: { position }. |
Slots
| Slot | Description |
|---|---|
start | The first pane (left, or top when vertical). |
end | The second pane. |
CSS parts
| Part | Description |
|---|---|
divider | The divider. |
CSS custom properties
| Property | Description |
|---|---|
--lit-material-split-panel-divider-size | Divider thickness (default 8px; the visible line is 1px). |