Tabs

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.

One common use case for this component is in Layout’s header/footer. Please refer to Layouts and Header & Footer for references.

TIP

Works great along with QTabPanels, a component which refers strictly to the panels (tab content) themselves.

QTabs API

Loading API...

QTab API

Loading API...

QRouteTab API

Loading API...

Usage

TIPS

  • 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 mobile-arrows prop.

WARNING

QRouteTab won’t and cannot work with the UMD version if you don’t also install Vue Router.

Basic

Basic



Outside, inside and visible on mobile arrows

Outside, inside and visible on mobile arrows



Vertical

Vertical (example with QSplitter)



Dense

Dense



Individual colors

Individual colors



Ripple

No ripple and custom ripple color



Custom indicator

In the examples below, please notice the last two QTabs: indicator at top and no indicator.

Custom indicator



Tab notifications

There are multiple ways to display tab notifications: with a QBadge, through an alert dot or an alert icon (can be any).

Tab notifications



Alignment

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.

Alignment



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.

With dropdown

With a dropdown



On QToolbar

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.

Tabs in a QToolbar



Dynamic update

Dynamic tabs



Along with QTabsPanel

TIP

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.

Tabs with tab panels



More info: Tab Panels.

Connecting to Vue Router

You can use tabs together with Vue Router through QRouteTab component. 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>

WARNING

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.

Handling custom navigation

<template>
  <div class="q-pa-md">
    <div class="q-gutter-y-md" style="max-width: 600px">
      <q-tabs
        no-caps
        class="bg-orange text-white shadow-2"
      >
        <q-route-tab :to="{ query: { tab: '1' } }" exact replace label="Activate in 2s" @click="navDelay" />
        <q-route-tab :to="{ query: { tab: '2' } }" exact replace label="Do nothing" @click="navCancel" />
        <q-route-tab :to="{ query: { tab: '3' } }" exact replace label="Navigate to the second tab" @click="navRedirect" />
        <q-route-tab :to="{ query: { tab: '4' } }" exact replace label="Navigate immediatelly" @click="navPass" />
      </q-tabs>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    navDelay (e, go) {
      e.preventDefault() // we cancel the default navigation

      // console.log('triggering navigation in 2s')
      setTimeout(() => {
        // console.log('navigating as promised 2s ago')
        go()
      }, 2000)
    },

    navCancel (e) {
      e.preventDefault() // we cancel the default navigation
    },

    navRedirect (e, go) {
      e.preventDefault() // we cancel the default navigation
      go({ query: { tab: '2', noScroll: true } })
    },

    navPass () {}
  }
}
</script>