选项卡 | Quasar Framework 中文网

选项卡

选项卡是一种使用较少的窗口空间显示更多信息的方法。本页通过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>