选项卡

选项卡是一种使用较少的窗口空间显示更多信息的方法。 本页通过QTab、QTab和QRouteTab描述选项卡选择部分。

该组件的一种常见用例是在布局的页眉/页脚中。 请参考布局页眉和页脚以获得参考。

TIP

QTabPanels配合使用,这是一个严格指向面板(选项卡内容)本身的组件。

安装

从下面的列表中仅选择您正在使用的内容。

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

WARNING

QRouteTab不会也不能与UMD版本一起使用,因为在那种环境下您没有Vue Router。

用法

TIP

当宽度大于容器宽度时,QTab可以水平滚动。 相应地调整您的浏览器以查看此操作。

在桌面上,你会看到两边有可以点击的V形符号。

在手机上,你可以用手指平移选项卡。

如果要强制箭头在手机上可见,请使用mobile-arrows属性。

基础

Basic

外部、内部和手机可见箭头

Outside, inside and visible on mobile arrows

垂直

Vertical (example with QSplitter)

稠密

Dense

个别颜色

Individual colors

波纹

No ripple and custom ripple color

自定义指示线

在下面的示例中,请注意最后两个QTab:顶部的指示线和没有指示线。

Custom indicator

选项卡通知

有多种方式显示选项卡通知:使用QBadge、通过一个警报点或(v1.9.14+)一个警报图标(可以是任何)

Tab notifications

对齐

当容器宽度(而非窗口宽度)大于配置的断点时,QTab会做出响应,并且align属性(请参见下文)变为活动状态。 为了进行演示,下面的选项卡禁用了断点。

Alignment

在下面示例的第二个QTab中,如果窗口宽度小于1024px,则“Movies”和“Photos”标签将替换为“"More…”下拉菜单。

带下拉菜单

With a dropdown

在QToolbar上

注意,我们需要指定shrink属性。 默认情况下,QTabs尝试扩展到所有可用的水平空间,但是在这种情况下,我们将其用作QToolbar的子元素,因此我们不希望这样做。

Tabs in a QToolbar

动态更新

Dynamic tabs

与QTabsPanel一起使用

TIP

QTabPanels也可以独立使用。 它们不依赖于QTab的存在。 而且,它们可以放置在页面中的任何位置,而不仅仅是QTabs附近。

Tabs with tab panels

更多信息: Tab Panels.

连接Vue Router

您可以通过QRouteTab组件将选项卡与Vue Router一起使用。 这个组件继承了QTab的所有东西,但是它也绑定了router-link属性。 这些允许监听当前的应用路由,并在单击/点击时触发路由。

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

WARNING

QRouteTab会根据您的应用路由变为“激活”状态,而不是取决于v-model。 因此,v-model的初始值或直接更改v-model也不会更改您的应用路由。

处理自定义导航

<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.navigate = false // we cancel the default navigation

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

    navCancel (e) {
      e.navigate = false // we cancel the default navigation
    },

    navRedirect (e, go) {
      e.navigate = false // we cancel the default navigation

      go({ query: { tab: '2', noScroll: true } })
    },

    navPass () {}
  }
}
</script>

QTabs API

Loading API...
Please wait...

QTab API

Loading API...
Please wait...

QRouteTab API

Loading API...
Please wait...