The QSplitter component allow containers to be split vertically and/or horizontally through a draggable separator bar.
QSplitter API
Usage
WARNING
The use of the before and after slots is required.
Click and drag on the splitter separator bar to see results.
Basic
Horizontal
Custom dragging limits
Model units
By default, the CSS unit used is ‘%’ (percentage). But you can also use ‘px’ (pixels), as in the example below.
Reverse model
By default, the model is connected to the before slot size. But you can reverse that and make it connect to the after slot, as in the example below. This feature turns out especially useful if your unit is set to pixels and you want to control the after slot.
Adding content to separator
TIP
If you use images as content for the separator slot, you might want to add draggable="false" to them, otherwise the native browser behavior might interfere in a negative way.
Dark design
Embedded
A QSplitter can be embedded in another QSplitter’s before and/or after slots, like shown in example below.