#Split View

Split View arranges continuous resizable regions on one axis. It suits stable compositions such as explorer and editor, document and inspector, or canvas and preview. It intentionally has no tabs, collapsible headers, or two-dimensional docking.

npm install @a3s-lab/ui@0.4.0 dockview@8.1.0

<div id="split-view" style="height: 32rem"></div>
<script type="module">
import {
SplitviewPanel,
createSplitview,
themeA3S,
} from "@a3s-lab/ui/dockview";
import "@a3s-lab/ui/dockview/css";

class Panel extends SplitviewPanel {
part = {
update: parameters => {
this.element.textContent = parameters.params.title;
},
dispose() {},
};
constructor(id, component) {
super(id, component);
this.api.initialize(this);
}
getComponent() { return this.part; }
}

const root = document.querySelector("#split-view");
const api = createSplitview(root, {
className: themeA3S.className,
createComponent: options => new Panel(options.id, options.name),
});
api.layout(root.clientWidth, root.clientHeight);
api.addPanel({
id: "explorer",
component: "panel",
minimumSize: 180,
params: { title: "Explorer" },
size: 240,
});
api.addPanel({
id: "editor",
component: "panel",
minimumSize: 320,
params: { title: "Editor" },
size: 720,
});

</script>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

#Framework usage

React useSplitview and the Vue composable expose the native SplitviewApi; they do not duplicate size, order, or business state.

#Sizing strategy

• Give context rails an explicit initial size and useful minimumSize, then let the primary canvas absorb remaining space.
• Enable proportionalLayout when regions should scale with the container. Keep it off when tool widths must remain stable.
• Loading, error, and empty states inside remote content must not restructure the split, or spatial memory will drift.
• Do not squeeze three regions into one narrow row. Switching to one panel, tabs, or a drawer is a host-level responsive decision.

#Lifecycle

Use addPanel(), removePanel(), movePanel(), and panel APIs for order, size, and visibility. Vanilla integrations pass container measurements to api.layout() through ResizeObserver; React and Vue adapters observe their component container.

#Accessibility

A splitter changes layout; it is not navigation. Titles, landmarks, and focus order still come from panel content. If keyboard resizing is unavailable for a frequent task, provide equivalent size presets or a Reset layout action.