QSplitter

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

Installation


// quasar.conf.js

return {
  framework: {
    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



Horizontal



Adding to separator



Custom dragging limits (50-100)



On a dark background with customized separator



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

Embedded



Image Fun



Reactive Images



QSplitter API