QSplitter

The QSplitter component allow containers to be split vertically and/or horizontally through a draggable separator bar.

Installation


// quasar.conf.js

return {
  framework: {
    // NOT needed if using auto-import feature:
    components: [
      'QSplitter'
    ]
  }
}

Usage

WARNING

The use of the before and after slots is required.

Click and drag on the splitter separator bar to see results.

Basic

Basic



Horizontal

Horizontal



Custom dragging limits

Custom dragging limits (50-100)



Model units

By default, the CSS unit used is ‘%’ (percentage). But you can also use ‘px’ (pixels), as in the example below.

Model in pixels



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.

Reverse model



Adding content to separator

Adding to separator



Dark design

On a dark background with customized separator



Embedded

A QSplitter can be embedded in another QSplitter’s before and/or after slots, like shown in example below.

Embedded



Fun examples

Image Fun



Reactive Images



QSplitter API