Bar

The QBar is a small component for creating the top bar on different types of mobile or desktop websites/apps. For instance, in desktop apps QBar will have things like the close, minimize or maximize buttons and other menu controls for your application.

QBar is especially useful for frame-less Electron apps where you integrate it in the QHeader.

Installation

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

Usage

TIP

For responsiveness, use Visibility Quasar CSS Classes. For finer tuning you can go write your own CSS media breakpoints or even go with QResizeObserver.

Styling

MacOS style
Windows style
iOS style
Android style

With other components

QMenu
QDialog
QHeader with QToolbar

Frameless Electron Window

QBar component can come in really handy when developing Electron apps, especially if you choose to use a frameless window.

Read more on Frameless Electron Window page.

QBar API

Loading API...
Please wait...