Separator

The QSeparator component is used to separate sections of text, other components, etc… It creates a colored line across the width of the parent. It can be horizontal or vertical.

Installation


// quasar.conf.js

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

Usage

Take the following just as examples. Doesn’t mean you can use QSeparator only on QCard, QList or QToolbar.

Horizontal



Horizontal with inset



Vertical



Custom colored



Color CSS classes

Should you need, there are four special Quasar CSS classes which apply the color of QSeparator: text-separator, bg-separator, text-dark-separator, bg-dark-separator.

QSeparator API