标签面板是一种使用更少窗口空间显示更多信息的方式。本页介绍通过 QTabs、QTab 和 QRouteTab 实现选项卡选择部分。

¥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.

用法(Usage)

¥Usage

基本(Basic)

¥Basic

外部、内部和移动端可见箭头(Outside, inside and visible on mobile arrows)

¥Outside, inside and visible on mobile arrows

垂直(Vertical)

¥Vertical

密集(Dense)

¥Dense

单独颜色(Individual colors)

¥Individual colors

波纹(Ripple)

¥Ripple

自定义指示器(Custom indicator)

¥Custom indicator

在下面的示例中，请注意最后两个 QTabs：顶部有指示符，没有指示符。

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

标签通知(Tab notifications)

¥Tab notifications

有多种方式显示标签通知：使用 QBadge，通过警报点或警报图标（可以是任意的）。

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

对齐(Alignment)

¥Alignment

QTabs 具有响应式功能，当容器宽度（而非窗口宽度）大于配置的断点时，align 属性（见下文）将变为活动状态。为了演示目的，以下选项卡已禁用断点。

¥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.

在下面示例中的第二个 QTabs 中，如果窗口宽度小于 1024px，则 “影片” 和 “照片” 选项卡将被 “更多…” 下拉菜单替换。

¥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 dropdown

在 QToolbar 上(On QToolbar)

¥On QToolbar

请注意，我们需要指定 shrink 属性。默认情况下，QTabs 会尝试扩展到所有可用的水平空间，但在本例中，我们将其用作 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.

动态更新(Dynamic update)

¥Dynamic update

与 QTabsPanel 一起使用(Along with QTabsPanel)

¥Along with QTabsPanel

更多信息：标签面板。

¥More info: Tab Panels.

连接到 Vue Router(Connecting to Vue Router)

¥Connecting to Vue Router

你可以通过 QRouteTab 组件将选项卡与 Vue Router 一起使用。此组件继承了 QTab 的所有内容，但它还绑定了 router-link 属性。这些允许监听当前应用的路由，并在点击/轻触时触发路由。

¥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>

将 QRouteTab 与当前路由匹配

已更新至 v2.9+

(Matching QRouteTab to current route

updated for v2.9+

)

¥Matching QRouteTab to current route

• 如果设置为 exact 匹配：

  ¥If it is set to exact matching:

  1. 它指向的路由必须被 Vue Router 视为 “exact-active”（完全匹配路由，忽略哈希值和查询）。

     ¥The route that it points to must be considered “exact-active” by Vue Router (exactly matches route, disregards hash & query).

  2. 假设 Vue Router 处于历史模式，它必须与配置的路由哈希值匹配（如果有）

     ¥Assuming Vue Router on history mode, it must match the configured route hash (if any)

  3. 它必须与配置的路由查询匹配（如果有）。 - 当前路由查询中的任何额外查询参数都不会激活选项卡（如果你希望（请勿使用 exact）

     ¥It must match the configured route query (if any) - any extra query params in the current route query will not make the tab active (should you want that, do not use exact)

• 否则，如果未设置为与 exact 匹配：

  ¥Else, if it is NOT set to exact matching:

  1. 它指向的路由必须被 Vue Router 视为 “active”（松散匹配路由，忽略哈希值和查询）。

     ¥The route that it points to must be considered “active” by Vue Router (loosely matches route, disregards hash & query).

  2. 假设 Vue Router 处于历史记录模式，它是否配置了哈希值？如果是这样，则必须完全匹配。

     ¥Assuming Vue Router on history mode, is it configured with a hash? If so, it must match exactly.

  3. 是否配置了查询？如果是这样，则配置的查询必须包含在当前路由查询中。

     ¥Is it configured with a query? If so, then the configured query must be included in the current route query.

  4. 如果多个 QRouteTab 仍然与当前路线匹配（例如：路线为 /cars/brands/tesla，并且我们的 QRouteTab 指向不精确的 /cars、不精确的 /cars/brands 和不精确的 /cars/brands/tesla），则与当前路线最匹配的 QRouteTab 获胜（在本例中为 /cars/brands/tesla）。

     ¥If multiple QRouteTab still match the current route (ex: route is /cars/brands/tesla and we have QRouteTabs pointing to non-exact /cars, non-exact /cars/brands, non-exact /cars/brands/tesla), then the most specific one that matches current route wins (in this case /cars/brands/tesla)

  5. 如果仍有多个 QRouteTabs 符合上述条件，则查询最接近当前路由查询的那个将胜出（具有已配置的查询，并且当前路由查询的额外参数最少）。

     ¥If there are still multiple QRouteTabs matching the criteria above, then the one with the query that is closest to the current route query wins (has the configured query and the current route query has the least number of extra params).

  6. 如果仍有多个 QRouteTabs 符合上述条件，则结果 href 较长的那个将胜出。

     ¥If there are still multiple QRouteTabs matching the criteria above, then the one with the resulting href that is the lengthier one wins.

exact 配置的 QRouteTabs 始终优于松散匹配（非精确匹配）的 QRouteTabs。

¥The exact configured QRouteTabs always win over loose-matching (non-exact) ones.

处理自定义导航

已更新至 v2.9+

(Handling custom navigation

updated for v2.9+

)

¥Handling custom navigation

<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>