The QSplitter component allow containers to be split vertically and/or horizontally through a draggable separator bar.
/* * No installation step is necessary. * It gets installed by default by @quasar/app v2+. */
The use of the
after slots is required.
Click and drag on the splitter separator bar to see results.
Custom dragging limits
By default, the CSS
unit used is ‘%’ (percentage). But you can also use ‘px’ (pixels), as in the example below.
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
Adding content to separator
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.
A QSplitter can be embedded in another QSplitter’s
after slots, like shown in example below.