Splitter resizes neighboring panels by dragging the separator.
Only panels placed directly inside kbq-splitter, without a wrapper element, participate in the layout.
The appearance input sets how the separator is drawn:
| Variant | Description |
|---|---|
divider | Dividing line. Used by default |
transparent | Invisible separator. Use it when panels differ by background or have their own borders |
handle | Drag handle at the center of the boundary |
kbqSplitterOptionsProvider sets the default appearance for the whole application or for one injector.
The orientation input sets the layout direction: horizontal places panels in a row, vertical in a column.
The disabled input forbids resizing: the separators stop reacting to the pointer and the keyboard, leave the tab order and show the plain cursor.
Three inputs set the size of a panel:
| Input | Description |
|---|---|
size | Initial size. Panels without size share the remaining space |
minSize | Smallest size the panel can be reduced to |
maxSize | Largest size the panel can be expanded to |
A value can be a number of pixels (240), a pixel string ('240px'), or a share of the splitter ('30%'). Units can be mixed within one splitter. Other units, such as rem or vw, are not supported: such a value is ignored, and a warning is logged in development mode.
When a neighboring panel reaches its constraint, the separator keeps moving: the panels after it give up space, so the next separator moves too.
The snapSizes input sets the sizes a panel snaps to. If either panel beside a separator has snapSizes, the minSize and maxSize of both panels also become snap points. The separator follows the pointer during a drag. The panel snaps after the drag ends.
The snapTolerance input sets the distance from a snap point at which a panel snaps to it. The default is 32 pixels and is set by kbqSplitterOptionsProvider.
The collapsible input lets a panel be collapsed by dragging, and collapsedSize sets the width of the collapsed strip. Such a panel has no sizes in between: a drag stops at minSize, and pulling further collapses it.
When collapsedSize is zero, the panel is completely hidden and no separator remains to restore it. The panel can be expanded through the [(collapsed)] two-way binding, for example with a button or keyboard shortcut.
One of the panels can hold nested resizable areas.
The separator is placed in the tab order between the content of neighboring panels.
Key | Behavior |
|---|---|
| Left Arrow \ Right Arrow | Moves a vertical separator in the direction of the arrow. |
| Up Arrow \ Down Arrow | Moves a horizontal separator in the direction of the arrow. |
| Home | Sets the smallest available size of the panel. A panel already at its minimum collapses, when it is collapsible. |
| End | Sets the largest available size of the panel, squeezing the neighboring panels when needed. |
| Enter | Collapses and expands the panel, when collapsible is set. |
| F6 \ Shift + F6 | Moves focus to the next or the previous panel. |
| Double-click | Resets the sizes to the ones the panels declare. A second double-click sets the panel to its minimum size. |