选项卡

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

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

TIP

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

QTabs API

QTab API

QRouteTab API

用法

TIPS

  • 当宽度大于容器宽度时,QTab可以水平滚动。 相应地调整您的浏览器以查看此操作。
  • 在桌面上,你会看到两边有可以点击的V形符号。
  • 在手机上,你可以用手指平移选项卡。
  • 如果要强制箭头在手机上可见,请使用mobile-arrows属性。

WARNING

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

基础




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




垂直




稠密




个别颜色




波纹




自定义指示线

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




选项卡通知

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




对齐

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




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

带下拉菜单




在QToolbar上

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




动态更新




与QTabsPanel一起使用

TIP

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




更多信息: 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一起使用QTabs时,不建议同时使用v-model(尽管你仍然可以),因为当前活动标签的真实来源是由当前路由而不是v-model决定的。每个QRouteTab变得"active"取决于你的应用程序的路由,而不是由于v-model。所以v-model的初始值或直接改变v-model不会同时改变你的应用程序的路由。

将QRouteTab与当前路由相匹配
uped for v2.9+

  • 如果它被设置为精确(exact)匹配:
    1. 它所指向的路由必须被Vue Router认为是"exact-active"的(完全匹配路由,不考虑哈希和查询)。
    2. 假设Vue Router处于历史模式,它必须与配置的路由哈希(如果有的话)匹配。
    3. 它必须与配置的路由查询(如果有的话)相匹配–当前路由查询中任何额外的查询参数都不会使标签激活(如果你想这样,不要使用exact)。
  • 否则,如果它没有设置为精确(exact)匹配:
    1. 它所指向的路由必须被Vue Router认为是"active"(松散地匹配路由,不考虑哈希和查询)。
    2. 假设Vue Router处于历史模式,它是否配置了一个哈希值?如果是的话,它必须完全匹配。
    3. 它是否配置了查询?如果是,那么配置的查询必须包括在当前路由查询中。
    4. 如果多个QRouteTab仍然匹配当前路由(例如:路由是/cars/brands/tesla,我们有QRouteTab指向非确切的/cars、非确切的/cars/brands、非确切的/cars/brands/tesla),那么匹配当前路由的最具体的一个获胜(在这种情况下是/cars/brands/tesla)
    5. 如果仍有多个QRouteTabs符合上述标准,那么具有最接近当前路由查询的QRouteTabs获胜(具有配置的查询,并且当前路由查询的额外参数数量最少)。
    6. 如果仍有多个QRouteTabs符合上述条件,那么具有所产生的href的那个长度较大的QRouteTabs获胜。

配置的"精确"QRouteTabs总是胜过松散匹配(非精确)的。

处理自定义导航
uped for v2.9+

TIP

请参考页面顶部的QRouteTab API卡,以获得对下面使用的@click事件的更深入描述。

<template>
  <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 immediately" @click="navPass" />
  </q-tabs>
</template>

<script>
export default {
  setup () {
    function 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)
    }

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

    function navRedirect (e, go) {
      e.preventDefault() // we cancel the default navigation

      // call this at your convenience
      go({
        to: { query: { tab: '2', noScroll: true } },
        // replace: boolean; default is what the tab is configured with
        // returnRouterError: boolean; default is false
      })
      .then(vueRouterResult => { /* ... */ })
      .catch(vueRouterError => {
        /* ...will not reach here unless returnRouterError === true */
      })
    }

    function navPass () {}

    return { navDelay, navCancel, navRedirect, navPass }
  }
}
</script>