Tabs     

Quasar Tabs are a way of displaying more information using less window real estate.
One common use case for this component is in Layout’s header/footer in a QToolbar. Please refer to Layouts and Toolbar for references.

Installation

Edit /quasar.conf.js:

framework: {
  components: [
    'QTabs',
    'QTab',
    'QTabPane',
    'QRouteTab'
  ]
}

Basic Usage

Below is a basic example of the Tabs component using many of its features.

<q-tabs>
  <!-- Tabs - notice slot="title" -->
  <q-tab default count="5" slot="title" name="tab-1" icon="message" />
  <q-tab disable slot="title" name="tab-2" icon="fingerprint" />
  <q-tab alert slot="title" name="tab-3" icon="account_box" />
  <q-tab slot="title" name="tab-4" icon="accessibility" />
  <q-tab slot="title" name="tab-5" icon="build" />

  <!-- Targets -->
  <q-tab-pane name="tab-1">Tab One</q-tab-pane>
  <q-tab-pane name="tab-2">Tab Two</q-tab-pane>
  <q-tab-pane name="tab-3">Tab Three</q-tab-pane>
  <q-tab-pane name="tab-4">Tab Four</q-tab-pane>
  <q-tab-pane name="tab-5">Tab Five</q-tab-pane>
</q-tabs>

The above example is using QTabPane component as the content container (or target container) for the tabs. There is also the ability to use Vue Router for each tab instead of targeting a QTabPane. Also, QTabPanes are optional and you can use v-model on QTabs. We’ll cover those features later.

The name prop on QTab and QTabPane links the tab to the targets (panes).

As you can see from the example, we have a main Tab container with (QTabs) and singular Tabs themselves with (QTab). Let’s look at the Tabs container first:

QTabs (Container Component)

Use the QTabs component to wrap your Tabs.

Vue Properties

There is support for v-model (which is optional). In this case, you need a Vue variable in your scope which will contain the name of the current selected tab (through name prop on QTab). Changing the value will also make QTabs select the according QTab.

Basic usage with v-model:

<template>
  <div>
    <q-tabs v-model="selectedTab">
      <q-tab slot="title" name="tab-1" icon="message" />
      <q-tab slot="title" name="tab-2" icon="fingerprint" />
      <q-tab slot="title" name="tab-3" icon="account_box" />

      ...optional `QTabPane`s...
    </q-tabs>
    <q-btn @click="selectThirdTab">Select Third Tab</q-btn>
  </div>
</template>

<script>
import { QTabs, QTab, QBtn } from 'quasar'

export default {
  components: {
    QTabs,
    QTab,
    QBtn
  },
  data () {
    return {
      // initializing for second tab to be selected by default
      selectedTab: 'tab-2'
    }
  },
  methods: {
    selectThirdTab () {
      // we select third tab which has `name` set to 'tab-3'
      this.selectedTab = 'tab-3'
    }
  }
}
</script>

Vue Methods

Vue Events

Overflow Behavior

On a desktop, if the Tabs cannot be displayed completely, the user will be offered a scroll action in the form of an opaque gradient fill. When hovered over, it turns to an arrow button. The user can press continually on the button, and the unseen Tabs will scroll by.

If the user is on a device with a small screen (like a phone) and all Tabs can fit on the screen, they will be automatically justify aligned and share the complete screen width. If the Tabs do not fit, then the user will also see the arrow to indicate the user can swipe through the Tabs.

QTab (Child Component)

QTab component is used to define a title for your Tab. Can be linked to a QTabPane through name prop.
If you want to use Vue Router with a Tab (clicking on a Tab triggers a route change in your app), then please refer to QRouteTab component in next section.

IMPORTANT. Do not forget to specify slot="title" on QTab.

Vue Properties

Vue Methods

Vue Events

Usage with “v-model”

Best way to programmatically switch between Tabs is by using a v-model. Here’s another example, a little bit more complex which includes a QSelect to explain the effects of using a v-model.

<q-select
  type="radio"
  v-model="tabsModel"
  :options="tabsOptions"
></q-select>

<q-tabs v-model="tabsModel">
  <q-tab name="xtab-1" icon="message" slot="title" />
  <q-tab name="xtab-2" icon="account_box" slot="title" />
  <q-tab name="xtab-3" icon="mail" slot="title" />

  <q-tab-pane name="xtab-1">Tab One</q-tab-pane>
  <q-tab-pane name="xtab-2">Tab Two</q-tab-pane>
  <q-tab-pane name="xtab-3">Tab Three</q-tab-pane>
</q-tabs>

// Data for template above
data () {
  return {
    tabsModel: 'xtab-2',
    tabsOptions: [
      {label: 'Tab 1', value: 'xtab-1'},
      {label: 'Tab 2', value: 'xtab-2'},
      {label: 'Tab 3', value: 'xtab-3'}
    ]
  }
}

Note
When the tabs are initially rendered, the value stored in the v-model used by your component, as with tabsModel above, will also indicate to the user a selected tab. If you aren’t using v-model, you can set the initially active tab with the default prop.

QTabPane (Child Component)

The Tabs Pane component is useful, when the content of each tab is relatively small or simple. If you have complex content, you’ll propably want to use the Tabs Router Component below.

Vue Properties

In order to show the proper content for each tab in each pane, the names of the tabs and panes should match.

QRouteTab (Child Component)

The Tabs Router component is just like the QTab component and shares the same properties, however it also has Vue Router properties bound to it. These allow the triggering of your specific routing.

Additional Vue Router Properties.

Please refer to Vue-Router Link documentation to get a feeling how to use these props.

Usage

<!-- Tabs -->
<q-tabs>
  <q-route-tab
    icon="mail"
    to="/mails"
    exact
    slot="title"
  />
  <q-route-tab
    icon="alarm"
    to="/alarms"
    exact
    slot="title"
  />
</q-tabs>

Your Tabs will be auto-selected when user navigates to the specified routes.

DO NOT use v-model or selectTab() method on QTabs if using QRouteTab.

Tabs in a Layout

You will, in most cases, want to use tabs within a layout component. Below is an example of how this would be done.

<q-layout>
  ...
  <q-layout-header>
    <q-tabs>
      <q-route-tab
        icon="mail"
        to="/mails"
        exact
        slot="title"
      />

      <q-route-tab
        icon="alarm"
        to="/alarms"
        exact
        slot="title"
      />
    </q-tabs>
  </q-layout-header>
  ...
</q-layout>

Please refer to the following documentation for more information: Quasar Layout Component

Coloring

Use one of the Quasar colors from the Color Palette, like “primary”, “secondary”, “orange”, “teal” or variants (“teal-4”, “orange-10”) for color/text-color properties:

<!-- Applied to all tabs: -->
<q-tabs color="orange">...</q-tabs>

<!--
  Applied only to a specific tab.
  In this case you can color Tabs differently:
-->
<q-tab slot="title" color="orange" />

You can also invert the colors (see demo for example) by adding the Boolean inverted prop (works only on QTabs and NOT on QTab or QRouteTab):

<!-- default color, on `inverted` color mode -->
<q-tabs color="orange" inverted>...</q-tabs>

Example of transparent background with green text color (v0.15.7+):

<q-tabs color="transparent" text-color="green">...</q-tabs>

Example of light color with custom text color (v0.15.7+):

<q-tabs color="amber" text-color="dark">...</q-tabs>

Alignment of Tabs in the Header

By default, on large width windows the Tabs are aligned to the left. If you wish to maintain a justify alignment (filling all available space on the width), then add justify to the align prop:

<q-tabs align="justify">...</q-tabs>

To align center or to the right, use align="center" or align="right".

Full height of Tabs in the Header

By adding the class q-py-none to the q-toolbar, the tabs will take the full height:

<q-layout-header>
    <q-toolbar color="primary" class="q-py-none">
        <q-toolbar-title>
            <img alt="Logo" src="~assets/your-logo.png">
        </q-toolbar-title>
        <q-tabs>
            <q-route-tab :to="{name:'home'}" slot="title" label="Home"/>
            <q-route-tab :to="{name:'user'}" slot="title" label="User"/>
        </q-tabs>
    </q-toolbar>
</q-layout-header>