Window Splitter
Window splitters divide a container into two resizable panes for code editor layouts, preview panels, or master-detail views.
Try it
Usage
Set value to the primary pane percentage and orientation for horizontal or vertical splits. Provide two child panes.
import { RuiWindowSplitter } from '@ecopages/radiant-ui/window-splitter';
<RuiWindowSplitter value={50} orientation="horizontal" label="Split view">
<div>Editor</div>
<div>Preview</div>
</RuiWindowSplitter>Initial pane ratio
value sets the primary pane percentage, clamped between 20 and 80. Users can drag the splitter to adjust.
Orientation
Use horizontal for side-by-side panes and vertical for stacked editor/console layouts.
Theming
Window Splitter maps to semantic border, surface, and focus roles, never Tailwind palette steps:
| Part | CSS roles |
|---|---|
Frame (rui-window-splitter) | border, radius-container |
| Panes | background, on-background, --space-inset |
| Separator | border |
| Separator focus | focus-ring |
Override at the theme layer, not in component CSS.
API
RuiWindowSplitter is a custom element (<rui-window-splitter>) that owns the separator and pane sizing; the RuiWindowSplitter JSX view projects the two panes.
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
value | number | 50 | Primary pane size as a percentage (clamped 20–80). |
orientation | horizontal · vertical | horizontal | Split axis. |
label | string | Split view | Accessible name for the separator. |
Slots
| Slot | Description |
|---|---|
primary | First pane content. |
secondary | Second pane content. |
Events
| Event | Detail | Description |
|---|---|---|
rui-splitter-change | { value: number } | Emitted when the separator moves. |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
primary | JsxRenderable | First pane content for the RuiWindowSplitter view. | |
secondary | JsxRenderable | Second pane content. |
CSS classes
Public BEM classes on the composed surface (documented via @cssclass on RuiWindowSplitterElement):
| Class | Description |
|---|---|
.rui-window-splitter | Root surface. |
.rui-window-splitter--horizontal | Side-by-side panes. |
.rui-window-splitter--vertical | Stacked panes. |
.rui-window-splitter__pane | A pane region. |
.rui-window-splitter__separator | Focusable separator (role="separator"). |
Theme roles
| Part | CSS variables consumed |
|---|---|
| Frame | --border, --radius-container |
| Panes | --background, --on-background, --space-inset |
| Separator | --border |
| Separator focus | --focus-ring |
Accessibility
- The splitter handle is keyboard focusable and adjustable with arrow keys.
- Provide
labelso screen readers identify the split region. - Ensure both panes remain usable at minimum sizes; avoid content that breaks at narrow widths.