Splitter
Two panes, one handle.
About
Two panes split by a draggable gutter, side by side or stacked. Drag the gutter or move it with the arrow keys; ratio sets the first pane's share, minRatio keeps both panes open and collapsible lets either snap shut. Reach for it when a list and a detail view share one screen and the reader decides the split.
Usage
<sui-splitter ratio="0.45" height="200" aria-label="Accounts and detail">
<div slot="start">
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">1000</span><span style="flex:1">Operating Checking</span><span style="font-feature-settings:'tnum'">$88,412.08</span></div>
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">1200</span><span style="flex:1">Accounts Receivable</span><span style="font-feature-settings:'tnum'">$90,740.00</span></div>
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">2000</span><span style="flex:1">Accounts Payable</span><span style="font-feature-settings:'tnum'">($31,204.55)</span></div>
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">4000</span><span style="flex:1">Service Revenue</span><span style="font-feature-settings:'tnum'">$412,880.00</span></div>
</div>
<div slot="end">
<div style="font-weight:620;font-size:13px;margin-bottom:6px">1000 Operating Checking</div>
<div style="font-size:13px;color:var(--ink-muted);line-height:1.7">First Harrison Bank<br>Last reconciled Aug 31, 2026<br>3 unreconciled deposits</div>
</div>
</sui-splitter>
<script type="module">
import { defineCustomElements } from "@shineui/core/loader";
import "@shineui/core/shineui.css";
defineCustomElements();
const el = document.querySelector("sui-splitter");
el.addEventListener("suiResize", (e) => console.log(e.detail));
</script>
import { SuiSplitter } from "@shineui/react";
import "@shineui/core/shineui.css";
export function Example() {
return (
<SuiSplitter ratio="0.45" height="200" aria-label="Accounts and detail" onSuiResize={(e) => console.log(e.detail)}>
<div slot="start">
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">1000</span><span style="flex:1">Operating Checking</span><span style="font-feature-settings:'tnum'">$88,412.08</span></div>
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">1200</span><span style="flex:1">Accounts Receivable</span><span style="font-feature-settings:'tnum'">$90,740.00</span></div>
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">2000</span><span style="flex:1">Accounts Payable</span><span style="font-feature-settings:'tnum'">($31,204.55)</span></div>
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">4000</span><span style="flex:1">Service Revenue</span><span style="font-feature-settings:'tnum'">$412,880.00</span></div>
</div>
<div slot="end">
<div style="font-weight:620;font-size:13px;margin-bottom:6px">1000 Operating Checking</div>
<div style="font-size:13px;color:var(--ink-muted);line-height:1.7">First Harrison Bank<br>Last reconciled Aug 31, 2026<br>3 unreconciled deposits</div>
</div>
</SuiSplitter>
);
}
<script setup>
import { SuiSplitter } from "@shineui/vue";
import "@shineui/core/shineui.css";
const onChange = (e) => console.log(e.detail);
</script>
<template>
<SuiSplitter ratio="0.45" height="200" aria-label="Accounts and detail" @sui-resize="onChange"><div slot="start">
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">1000</span><span style="flex:1">Operating Checking</span><span style="font-feature-settings:'tnum'">$88,412.08</span></div>
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">1200</span><span style="flex:1">Accounts Receivable</span><span style="font-feature-settings:'tnum'">$90,740.00</span></div>
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">2000</span><span style="flex:1">Accounts Payable</span><span style="font-feature-settings:'tnum'">($31,204.55)</span></div>
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">4000</span><span style="flex:1">Service Revenue</span><span style="font-feature-settings:'tnum'">$412,880.00</span></div>
</div>
<div slot="end">
<div style="font-weight:620;font-size:13px;margin-bottom:6px">1000 Operating Checking</div>
<div style="font-size:13px;color:var(--ink-muted);line-height:1.7">First Harrison Bank<br>Last reconciled Aug 31, 2026<br>3 unreconciled deposits</div>
</div></SuiSplitter>
</template>
import { Component } from "@angular/core";
import { SuiSplitter } from "@shineui/angular";
@Component({
standalone: true,
imports: [SuiSplitter],
template: `<sui-splitter ratio="0.45" height="200" aria-label="Accounts and detail" (suiResize)="onChange($event)"><div slot="start">
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">1000</span><span style="flex:1">Operating Checking</span><span style="font-feature-settings:'tnum'">$88,412.08</span></div>
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">1200</span><span style="flex:1">Accounts Receivable</span><span style="font-feature-settings:'tnum'">$90,740.00</span></div>
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">2000</span><span style="flex:1">Accounts Payable</span><span style="font-feature-settings:'tnum'">($31,204.55)</span></div>
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">4000</span><span style="flex:1">Service Revenue</span><span style="font-feature-settings:'tnum'">$412,880.00</span></div>
</div>
<div slot="end">
<div style="font-weight:620;font-size:13px;margin-bottom:6px">1000 Operating Checking</div>
<div style="font-size:13px;color:var(--ink-muted);line-height:1.7">First Harrison Bank<br>Last reconciled Aug 31, 2026<br>3 unreconciled deposits</div>
</div></sui-splitter>`,
})
export class Example {
onChange(e: CustomEvent) { console.log(e.detail); }
}
Basic
ratio is the first pane width as a fraction of the whole, and both panes scroll their own content. The gutter is named "Resize panes" unless the host carries its own aria-label, which wins.
1000Operating Checking$88,412.08
1200Accounts Receivable$90,740.00
2000Accounts Payable($31,204.55)
4000Service Revenue$412,880.00
1000 Operating Checking
First Harrison Bank
Last reconciled Aug 31, 2026
3 unreconciled deposits
Last reconciled Aug 31, 2026
3 unreconciled deposits
<sui-splitter ratio="0.45" height="200" aria-label="Accounts and detail">
<div slot="start">
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">1000</span><span style="flex:1">Operating Checking</span><span style="font-feature-settings:'tnum'">$88,412.08</span></div>
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">1200</span><span style="flex:1">Accounts Receivable</span><span style="font-feature-settings:'tnum'">$90,740.00</span></div>
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">2000</span><span style="flex:1">Accounts Payable</span><span style="font-feature-settings:'tnum'">($31,204.55)</span></div>
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">4000</span><span style="flex:1">Service Revenue</span><span style="font-feature-settings:'tnum'">$412,880.00</span></div>
</div>
<div slot="end">
<div style="font-weight:620;font-size:13px;margin-bottom:6px">1000 Operating Checking</div>
<div style="font-size:13px;color:var(--ink-muted);line-height:1.7">First Harrison Bank<br>Last reconciled Aug 31, 2026<br>3 unreconciled deposits</div>
</div>
</sui-splitter>
Flush panes
flush takes the 14 by 16 px off both panes, so a list sits against the pane edge and the divider the way an inbox does. The divider is a hairline at rest; the grab handle appears on hover, focus and drag, and the pointer has a 7 px zone either side of the line to catch.
1000 Operating Checking
First Harrison Bank
Last reconciled Aug 31, 2026
3 unreconciled deposits
Last reconciled Aug 31, 2026
3 unreconciled deposits
<sui-splitter flush ratio="0.4" height="220" aria-label="Inbox and message">
<sui-list id="sp-flush-list" slot="start" aria-label="Inbox"></sui-list>
<div slot="end" style="padding:14px 16px">
<div style="font-weight:620;font-size:13px;margin-bottom:6px">1000 Operating Checking</div>
<div style="font-size:13px;color:var(--ink-muted);line-height:1.7">First Harrison Bank<br>Last reconciled Aug 31, 2026<br>3 unreconciled deposits</div>
</div>
</sui-splitter>
// setup(root): properties and events
setup(root) {
root.querySelector('#sp-flush-list').items = [
{ id: 'a', title: 'Reconcile Operating Checking', description: 'Three deposits are unmatched', meta: '9:14 AM', unread: true },
{ id: 'b', title: 'INV-1043 was viewed', description: 'Silver Hills Church opened the invoice', meta: 'Yesterday' },
{ id: 'c', title: 'Payroll posted', description: '$21,004.90 to 14 employees', meta: 'Aug 29' },
{ id: 'd', title: 'Quarterly close', description: 'Statements go out on the 5th', meta: 'Aug 28' },
];
}
Vertical
orientation="vertical" stacks the panes and ratio becomes the top pane's share of the height. The slots start and end name the panes in either orientation.
1000Operating Checking$88,412.08
1200Accounts Receivable$90,740.00
2000Accounts Payable($31,204.55)
4000Service Revenue$412,880.00
1000 Operating Checking
First Harrison Bank
Last reconciled Aug 31, 2026
3 unreconciled deposits
Last reconciled Aug 31, 2026
3 unreconciled deposits
<sui-splitter orientation="vertical" ratio="0.6" height="240" aria-label="Register and detail">
<div slot="start">
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">1000</span><span style="flex:1">Operating Checking</span><span style="font-feature-settings:'tnum'">$88,412.08</span></div>
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">1200</span><span style="flex:1">Accounts Receivable</span><span style="font-feature-settings:'tnum'">$90,740.00</span></div>
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">2000</span><span style="flex:1">Accounts Payable</span><span style="font-feature-settings:'tnum'">($31,204.55)</span></div>
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">4000</span><span style="flex:1">Service Revenue</span><span style="font-feature-settings:'tnum'">$412,880.00</span></div>
</div>
<div slot="end">
<div style="font-weight:620;font-size:13px;margin-bottom:6px">1000 Operating Checking</div>
<div style="font-size:13px;color:var(--ink-muted);line-height:1.7">First Harrison Bank<br>Last reconciled Aug 31, 2026<br>3 unreconciled deposits</div>
</div>
</sui-splitter>
Collapsible
collapsible lets either pane snap shut: drag past half of min-ratio, or press an arrow key at the minimum, and the pane closes; the opposite key or a drag reopens it. ratio reads 0 or 1 while a pane is shut.
1000Operating Checking$88,412.08
1200Accounts Receivable$90,740.00
2000Accounts Payable($31,204.55)
4000Service Revenue$412,880.00
journal.csv
2026-08-31,4000,Service Revenue,412880.00
2026-08-31,1200,Accounts Receivable,90740.00
<div style="display:flex;flex-direction:column;gap:10px">
<sui-splitter id="sp-collapse" collapsible ratio="0.35" min-ratio="0.2" height="180" aria-label="Files and editor">
<div slot="start">
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">1000</span><span style="flex:1">Operating Checking</span><span style="font-feature-settings:'tnum'">$88,412.08</span></div>
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">1200</span><span style="flex:1">Accounts Receivable</span><span style="font-feature-settings:'tnum'">$90,740.00</span></div>
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">2000</span><span style="flex:1">Accounts Payable</span><span style="font-feature-settings:'tnum'">($31,204.55)</span></div>
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">4000</span><span style="flex:1">Service Revenue</span><span style="font-feature-settings:'tnum'">$412,880.00</span></div>
</div>
<div slot="end" style="font-family:var(--font-mono);font-size:12px;color:var(--ink-muted);line-height:1.7;white-space:pre">journal.csv
2026-08-31,4000,Service Revenue,412880.00
2026-08-31,1200,Accounts Receivable,90740.00</div>
</sui-splitter>
<span id="sp-collapse-log" style="font:460 13px/1.6 var(--font-sans);color:var(--ink-muted)">Both panes open.</span>
</div>
// setup(root): properties and events
setup(root) {
const log = root.querySelector('#sp-collapse-log');
root.querySelector('#sp-collapse').addEventListener('suiResizeEnd', (e) => {
const r = e.detail;
log.textContent = r === 0 ? 'List shut. Press the arrow key that points into the editor on the gutter to reopen it.' : r === 1 ? 'Editor shut. Press the arrow key that points into the list on the gutter to reopen it.' : `Both panes open at ${Math.round(r * 100)} percent.`;
});
}
Starting ratio and minimum
min-ratio clamps both sides, so neither pane can be dragged shut. A min-ratio above 0.5 is clamped to 0.5.
Starts at 25 percent, floors at 20.
1000 Operating Checking
First Harrison Bank
Last reconciled Aug 31, 2026
3 unreconciled deposits
Last reconciled Aug 31, 2026
3 unreconciled deposits
Starts even, moves only between 40 and 60 percent.
Use a tight range when both panes hold a form.
<div style="display:flex;flex-direction:column;gap:12px">
<sui-splitter ratio="0.25" min-ratio="0.2" height="120" aria-label="Narrow list and detail">
<div slot="start" style="font-size:13px;color:var(--ink-muted)">Starts at 25 percent, floors at 20.</div>
<div slot="end">
<div style="font-weight:620;font-size:13px;margin-bottom:6px">1000 Operating Checking</div>
<div style="font-size:13px;color:var(--ink-muted);line-height:1.7">First Harrison Bank<br>Last reconciled Aug 31, 2026<br>3 unreconciled deposits</div>
</div>
</sui-splitter>
<sui-splitter ratio="0.5" min-ratio="0.4" height="120" aria-label="Even split with a tight range">
<div slot="start" style="font-size:13px;color:var(--ink-muted)">Starts even, moves only between 40 and 60 percent.</div>
<div slot="end" style="font-size:13px;color:var(--ink-muted)">Use a tight range when both panes hold a form.</div>
</sui-splitter>
</div>
Drag and key events
suiResize fires on every drag step and key press; suiResizeEnd fires on release, or at once on a key press, so do the costly relayout there. Neither bubbles, so a nested splitter never reports as the outer one. The gutter is a focusable separator with aria-orientation and aria-valuenow in percent.
1000Operating Checking$88,412.08
1200Accounts Receivable$90,740.00
2000Accounts Payable($31,204.55)
4000Service Revenue$412,880.00
1000 Operating Checking
First Harrison Bank
Last reconciled Aug 31, 2026
3 unreconciled deposits
Last reconciled Aug 31, 2026
3 unreconciled deposits
<div style="display:flex;flex-direction:column;gap:10px">
<sui-splitter id="sp-events" ratio="0.4" height="140" aria-label="Accounts and detail">
<div slot="start">
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">1000</span><span style="flex:1">Operating Checking</span><span style="font-feature-settings:'tnum'">$88,412.08</span></div>
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">1200</span><span style="flex:1">Accounts Receivable</span><span style="font-feature-settings:'tnum'">$90,740.00</span></div>
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">2000</span><span style="flex:1">Accounts Payable</span><span style="font-feature-settings:'tnum'">($31,204.55)</span></div>
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">4000</span><span style="flex:1">Service Revenue</span><span style="font-feature-settings:'tnum'">$412,880.00</span></div>
</div>
<div slot="end">
<div style="font-weight:620;font-size:13px;margin-bottom:6px">1000 Operating Checking</div>
<div style="font-size:13px;color:var(--ink-muted);line-height:1.7">First Harrison Bank<br>Last reconciled Aug 31, 2026<br>3 unreconciled deposits</div>
</div>
</sui-splitter>
<span id="sp-log" style="font:460 13px/1.6 var(--font-sans);color:var(--ink-muted)">Drag the gutter, or focus it and press the arrow keys.</span>
</div>
// setup(root): properties and events
setup(root) {
const log = root.querySelector('#sp-log');
const el = root.querySelector('#sp-events');
const pct = (r) => `${Math.round(r * 100)} percent`;
el.addEventListener('suiResize', (e) => {
log.textContent = `Moving: ${pct(e.detail)}.`;
});
el.addEventListener('suiResizeEnd', (e) => {
log.textContent = `Committed: ${pct(e.detail)}. Relayout the second pane now.`;
});
}
Nested panes
A splitter in a pane gives a third column, and a vertical one inside a horizontal one gives an editor with a console. Name each one, because two unnamed gutters read alike.
1000Operating Checking$88,412.08
1200Accounts Receivable$90,740.00
2000Accounts Payable($31,204.55)
4000Service Revenue$412,880.00
1000 Operating Checking
First Harrison Bank
Last reconciled Aug 31, 2026
3 unreconciled deposits
Last reconciled Aug 31, 2026
3 unreconciled deposits
Reconciliation notes for the period.
<sui-splitter ratio="0.3" height="220" aria-label="Accounts and workspace">
<div slot="start">
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">1000</span><span style="flex:1">Operating Checking</span><span style="font-feature-settings:'tnum'">$88,412.08</span></div>
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">1200</span><span style="flex:1">Accounts Receivable</span><span style="font-feature-settings:'tnum'">$90,740.00</span></div>
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">2000</span><span style="flex:1">Accounts Payable</span><span style="font-feature-settings:'tnum'">($31,204.55)</span></div>
<div style="display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid var(--hairline);font-size:13px"><span style="color:var(--ink-muted)">4000</span><span style="flex:1">Service Revenue</span><span style="font-feature-settings:'tnum'">$412,880.00</span></div>
</div>
<sui-splitter slot="end" orientation="vertical" ratio="0.6" height="190" aria-label="Detail and notes">
<div slot="start">
<div style="font-weight:620;font-size:13px;margin-bottom:6px">1000 Operating Checking</div>
<div style="font-size:13px;color:var(--ink-muted);line-height:1.7">First Harrison Bank<br>Last reconciled Aug 31, 2026<br>3 unreconciled deposits</div>
</div>
<div slot="end" style="font-size:13px;color:var(--ink-muted)">Reconciliation notes for the period.</div>
</sui-splitter>
</sui-splitter>
Keyboard
| Key | Action |
|---|---|
| Tab | Moves focus to the gutter. A pane whose content outgrows it is a tab stop too, so the arrow keys and Page keys can scroll it; a pane that fits adds no stop. A shut pane leaves the gutter where it was. |
| ArrowLeft ArrowRight | Move a side-by-side gutter 2 percent toward the first or the second pane and commit at once. Under dir="rtl" the first pane is on the right, so the keys swap with it. Ignored when vertical. |
| ArrowUp ArrowDown | Move a vertical gutter 2 percent and commit at once. Ignored when side by side. |
| Home | Moves the gutter to the smallest first pane min-ratio allows, or shuts the first pane when collapsible. |
| End | Moves the gutter to the largest first pane min-ratio allows, or shuts the second pane when collapsible. |
| Arrow toward a shut pane | Reopens it to the share it had. With collapsible, an arrow pressed at min-ratio shuts the pane. |
API
<sui-splitter>
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
collapsible | collapsible | boolean | false | Lets either pane snap shut. A drag past half of minRatio closes the pane, a key press at minRatio closes it, and the opposite key reopens it to the share it had. ratio reads 0 or 1 while a pane is shut. Reflected. |
flush | flush | boolean | false | Takes the panes' padding off (it is 14px by 16px), for a list or a table that should sit against the pane edge and the divider, as an inbox does. Reflected. |
height | height | number | 220 | Height of the splitter in px. |
minRatio | min-ratio | number | 0.2 | Smallest share either pane may shrink to. Values above 0.5 clamp to 0.5. With collapsible, a pane pushed past half of this snaps shut instead. |
orientation | orientation | "horizontal" | "vertical" | 'horizontal' | horizontal puts the panes side by side with a gutter that moves left and right; vertical stacks them with a gutter that moves up and down. |
ratio | ratio | number | 0.5 | Share of the whole the first pane takes (0 to 1): its width side by side, its height when vertical. Seeds the split (the reference defaultRatio) and tracks it afterwards. |
Events
| Event | Detail | React | Vue | Description |
|---|---|---|---|---|
suiResize | number | onSuiResize | @sui-resize | Fires while the gutter moves (every drag step and every key press); detail is the new ratio. Does not bubble, so a splitter inside a pane never reports as the outer one. |
suiResizeEnd | number | onSuiResizeEnd | @sui-resize-end | Fires when a resize commits: on pointer release, or straight away on a key press. Detail is the new ratio. Do the expensive work, such as re-laying out a chart or a virtualized table, here. Does not bubble. |
Methods
| Method | Signature | Description |
|---|---|---|
setFocus() | setFocus() => Promise<void> | Moves keyboard focus to the gutter, the splitter's own tab stop, from which the arrow keys move the split. |
Slots
| Slot | Description |
|---|---|
end | Second pane: at the inline-end, or bottom when vertical. |
start | First pane: at the inline-start (the left, or the right under dir="rtl"), or top when vertical. |
Theming
Every design token this element can render with, read from its own stylesheets and the ones it imports. Set a token on :root or on any ancestor and every use below follows it. The values shown are the ones in the theme you are viewing. The list is read per stylesheet, so an element that imports a shared drawing module lists that module's tokens too, whether or not it paints with all of them.
Color7
Typography1
Radius2
Elevation1
Motion2
Every name above is listed with its value and its role in Foundations.