Splitter
@xui/splitterResizable split panes — drag the gutter between two panels to resize them. Panels take percentage sizes with optional min/max; nest splitters for grids.
Install
pnpm add @xui/splitter Add the barrel to a standalone component's imports:
import { XuiSplitterImports } from '@xui/splitter';
@Component({
imports: [XuiSplitterImports],
// …
})Examples
Horizontal
Loading preview…
<xui-splitter class="border-border h-64 w-[720px] rounded-lg border">
<xui-splitter-panel [defaultSize]="30" [min]="15"></xui-splitter-panel>
<xui-splitter-panel [min]="20"></xui-splitter-panel>
</xui-splitter>Three panes
Loading preview…
<xui-splitter class="border-border h-64 w-[720px] rounded-lg border">
<xui-splitter-panel [defaultSize]="25"></xui-splitter-panel>
<xui-splitter-panel [defaultSize]="50"></xui-splitter-panel>
<xui-splitter-panel [defaultSize]="25"></xui-splitter-panel>
</xui-splitter>Vertical
Loading preview…
<xui-splitter orientation="vertical" class="border-border h-80 w-[520px] rounded-lg border">
<xui-splitter-panel [defaultSize]="60"></xui-splitter-panel>
<xui-splitter-panel [min]="15"></xui-splitter-panel>
</xui-splitter>API
One resizable pane inside {@link XuiSplitter}. defaultSize is its initial percentage (0 = auto-distribute the remaining space); min/max bound resizing.
Inputs
defaultSizenumberInitial size as a percentage; 0 means "share the leftover space equally".0minnumberSmallest size this panel may be dragged to, as a percentage of the splitter.0maxnumberLargest size this panel may be dragged to, as a percentage of the splitter.100Resizable split panes. Wrap <xui-splitter-panel> children; drag the gutter between two panels to resize them. orientation runs the panels horizontally (default) or vertically. Sizes are percentages; sizeChange emits them.
Inputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''orientation'horizontal' | 'vertical'Which way the panels are laid out: side by side (horizontal) or stacked (vertical). The handles run across that axis.'horizontal'Outputs
sizeChangenumber[]Emits every panel's size as a percentage, in order, whenever a handle is dragged.