Tabs are a way of displaying more information using less window real estate. This page describes the tab selection part through QTabs, QTab and QRouteTab.
Works great along with QTabPanels, a component which refers strictly to the panels (tab content) themselves.
Cherry-pick only what you are using from list below.
/* * No installation step is necessary. * It gets installed by default by @quasar/app v2+. */
QRouteTab won’t and cannot work with the UMD version because in that environment you don’t have Vue Router.
QTabs can be scrolled horizontally when the width is longer than the container width. Adjust your browser accordingly to see this in action.
On a desktop you will see chevrons on either side that can be clicked.
On a mobile, you can pan the tabs with your finger.
If you want to force arrows to be visible on mobile use
Outside, inside and visible on mobile arrows
In the examples below, please notice the last two QTabs: indicator at top and no indicator.
There are multiple ways to display tab notifications: with a QBadge, through an alert dot or (v1.9.14+) an alert icon (can be any).
QTabs are responsive and the
align prop (see below) becomes active when the container width (not window width) is bigger than the configured breakpoint. For demoing purposes, the tabs below have breakpoint disabled.
In the second QTabs from the example below, if window width is below 1024px then the “Movies” and “Photos” tabs will be replaced by a “More…” dropdown.
Notice we need to specify the
shrink prop. By default, QTabs tries to expand to all the available horizontal space, but in this case we are using it as a child of QToolbar so we don’t want that.
Along with QTabsPanel
QTabPanels can be used as standalone too. They do not depend on the presence of a QTabs. Also, they can be placed anywhere within a page, not just near a QTabs.
More info: Tab Panels.
Connecting to Vue Router
You can use tabs together with Vue Router through
This component inherits everything from QTab, however it also has
router-link properties bound to it. These allow for listening to the current app route and also triggering a route when clicked/tapped.
<q-tabs> <q-route-tab icon="mail" to="/mails" exact /> <q-route-tab icon="alarm" to="/alarms" exact /> </q-tabs>
QRouteTab becomes “active” depending on your app’s route and not due to the v-model. So the initial value of v-model or changing the v-model directly will not also change the route of your app.