选项卡(Tabs)

Quasar选项卡是一种使用较少窗口空间显示更多信息的方式。
该组件的一个常见用例是在QToolbar中的布局页眉/页脚中。 请参阅布局和工具栏以供参考。

安装

编辑 /quasar.conf.js:

framework: {
  components: [
    'QTabs',
    'QTab',
    'QTabPane',
    'QRouteTab'
  ]
}

基本用法

以下是使用Tabs组件许多功能的基本示例。

<q-tabs>
  <!-- 选项卡 - 注意slot="title" -->
  <q-tab default count="5" slot="title" name="tab-1" icon="message" />
  <q-tab disable slot="title" name="tab-2" icon="fingerprint" />
  <q-tab alert slot="title" name="tab-3" icon="account_box" />
  <q-tab slot="title" name="tab-4" icon="accessibility" />
  <q-tab slot="title" name="tab-5" icon="build" />

  <!-- 目标 -->
  <q-tab-pane name="tab-1">Tab One</q-tab-pane>
  <q-tab-pane name="tab-2">Tab Two</q-tab-pane>
  <q-tab-pane name="tab-3">Tab Three</q-tab-pane>
  <q-tab-pane name="tab-4">Tab Four</q-tab-pane>
  <q-tab-pane name="tab-5">Tab Five</q-tab-pane>
</q-tabs>

以上示例将QTabPane组件用作选项卡的内容容器（或目标容器）。还可以为每个选项卡使用Vue路由器，而不是定位QTabPane。此外，QTabPanes是可选的，您可以在QTab上使用v-model。我们稍后会介绍这些功能。

QTab和QTabPane上的name属性将选项卡链接到目标（窗格）。

从示例中可以看到，我们有一个主要的Tab容器（QTabs）和单独的Tab（QTab）。首先看一下Tab容器：

QTabs（容器组件）

使用QTabs组件来包裹你的选项卡。

Vue属性

Vue属性 类型 说明
align 字符串 选项卡容器中选项卡的对齐类型。允许的值是“left”（默认）、“center”、“right”或“justify”。
position 字符串 选项卡的屏幕位置。允许的值是top 或 bottom。
color 字符串 Quasar标准的CSS颜色。
text-color (Quasar v0.15.7+) 来自Quasar调色板的一个颜色，用来覆盖文本颜色
inverted 布尔 设置为true，以反转选项卡颜色。
two-lines 布尔 设置为true，选项卡的标签应该换行到第二行。
no-pane-border 布尔 避免在QTabPanes周围绘制边框。
glossy 布尔 应用光泽效果

支持v-model（这是可选的）。在这种情况下，您需要一个在您的作用域中包含当前选定选项卡名称的Vue变量（通过QTab上的name 属性）。更改该值还会使QTab选择相应的QTab。

v-model的基本用法：

<template>
  <div>
    <q-tabs v-model="selectedTab">
      <q-tab slot="title" name="tab-1" icon="message" />
      <q-tab slot="title" name="tab-2" icon="fingerprint" />
      <q-tab slot="title" name="tab-3" icon="account_box" />

      ...可选的`QTabPane`s...
    </q-tabs>
    <q-btn @click="selectThirdTab">Select Third Tab</q-btn>
  </div>
</template>

<script>
import { QTabs, QTab, QBtn } from 'quasar'

export default {
  components: {
    QTabs,
    QTab,
    QBtn
  },
  data () {
    return {
      // 初始化为默认选择第二个选项卡
      selectedTab: 'tab-2'
    }
  },
  methods: {
    selectThirdTab () {
      // 我们选择'name'设置为'tab-3'的第三个标签
      this.selectedTab = 'tab-3'
    }
  }
}
</script>

Vue方法

Vue方法 说明
selectTab（name） 通过使用名称来设置活动选项卡。

Vue事件

活动 说明
@select 当选定的选项卡更改时触发。

溢出行为

在桌面上，如果选项卡不能完全显示，用户将被提供不透明的渐变填充形式的滚动操作。当悬浮在选项卡上时，选项卡转向一个箭头按钮。用户可以连续按下按钮，看不见的标签将滚动。

如果用户使用小屏幕设备（如电话）并且所有选项卡都可以放在屏幕上，它们将自动对齐并共享完整的屏幕宽度。如果选项卡放不下，则用户还将看到箭头以指示用户可以滑动选项卡。

QTab（子组件）

QTab组件用于为您的Tab定义标题。可以通过name链接到QTabPane。
如果您想使用带有选项卡的Vue路由器（单击一个选项卡会在您的应用中触发路由更改），请参阅下一节中的QRouteTab组件。

重要。不要忘记在QTab上指定slot="title"。

Vue属性

Vue属性 类型 说明
default 布尔 在您想默认选中的选项卡上设置为“true”
label 字符串 用于选项卡的标签。
icon 字符串 用于选项卡的图标。
disable 布尔 如果禁用，用户将无法选择该选项卡。
hidden 布尔 如果设置为“true”，则隐藏该选项卡。
hide 字符串 可能的值：icon或label。在狭窄的屏幕上，两者中的一个将被隐藏。
name 字符串 标签的ID。默认值是Quasar添加的uid。
alert 布尔 当’true’时，该选项卡上有一个红点，以便引起用户的注意。
count 数字，字符串 一个数字，表示标签内容中有未读或未查看项的数量。
color 字符串 该选项卡的图标或文本的颜色，应与默认值不同。

Vue方法

Vue方法 说明
select() 使该选项卡被选中。

Vue事件

活动 说明
@select 当QTab被选中时触发。
@click 当用户点击/轻击Tab时触发。

使用“v-model”

以编程方式在选项卡之间做切换的最佳方法是使用’v-model’。下面是另一个例子，稍显复杂，它包含一个QSelect来解释使用v-model的效果。

<q-select
  type="radio"
  v-model="tabsModel"
  :options="tabsOptions"
></q-select>

<q-tabs v-model="tabsModel">
  <q-tab name="xtab-1" icon="message" slot="title" />
  <q-tab name="xtab-2" icon="account_box" slot="title" />
  <q-tab name="xtab-3" icon="mail" slot="title" />

  <q-tab-pane name="xtab-1">Tab One</q-tab-pane>
  <q-tab-pane name="xtab-2">Tab Two</q-tab-pane>
  <q-tab-pane name="xtab-3">Tab Three</q-tab-pane>
</q-tabs>
// 以上模板的数据
data () {
  return {
    tabsModel: 'xtab-2',
    tabsOptions: [
      {label: 'Tab 1', value: 'xtab-1'},
      {label: 'Tab 2', value: 'xtab-2'},
      {label: 'Tab 3', value: 'xtab-3'}
    ]
  }
}

注意
当选项卡最初呈现时，组件使用的v-model中存储的值，就如上面的tabsModel，也会向用户指示选定的选项卡。如果您没有使用v-model，则可以使用default属性设置最初的活动选项卡。

QTabPane（子组件）

当每个选项卡的内容相对较小或较简单时，选项卡窗格组件很有用。如果你有复杂的内容，你会希望使用下面的选项卡路由组件。

Vue属性

Vue属性 类型 说明
name 字符串 必需的。选项卡的名称并且也是目标ID。
keep-alive 布尔 即使当前选定的选项卡更改，也会保持组件活跃。

为了显示每个选项卡各自窗格的正确内容，选项卡和窗格的名称应匹配。

QRouteTab（子组件）

选项卡路由器组件与QTab组件一样，共享相同的属性，但它也具有绑定到它的Vue路由器属性。这些属性允许触发您的特定路由。

额外的Vue路由器属性。

Vue属性 类型 说明
to 字符串，对象 标签应该路由到的文字路径或vue-router对象。
exact 布尔 如果为true，路由器将被强制进入“完全匹配模式”
append 布尔 如果为true，则将路径添加到当前路径。
replace 布尔 如果为true，则不会有使用过的路由的历史记录。

请参考Vue-Router Link文档来感受如何使用这些属性。

用法

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

当用户导航到指定路由时，您的选项卡将被自动选择。

如果使用QRouteTab，请勿在QTab上使用v-model或selectTab()方法。

布局中的选项卡

在大多数情况下，您将希望在布局组件中的使用选项卡。 下面是一个如何完成这个过程的例子。

<q-layout>
  ...
  <q-layout-header>
    <q-tabs>
      <q-route-tab
        icon="mail"
        to="/mails"
        exact
        slot="title"
      />

      <q-route-tab
        icon="alarm"
        to="/alarms"
        exact
        slot="title"
      />
    </q-tabs>
  </q-layout-header>
  ...
</q-layout>

有关更多信息，请参阅以下文档：Quasar布局组件

着色

使用调色板中的一种Quasar颜色，如primary，secondary，orange，teal或变体（teal-4，orange-10）作为CSS类：

<!-- 适用于所有标签: -->
<q-tabs color="orange">...</q-tabs>

<!--
  仅适用于特定的选项卡。
  在这种情况下，您可以以不同的方式给选项卡着色
-->
<q-tab slot="title" color="orange" />

你也可以通过添加布尔inverted属性（仅适用于QTabs而不适用于QTab或QRouteTab）反转颜色（例如参见演示）：

<!-- 默认颜色，在“inverted”颜色模式下 -->
<q-tabs color="orange" inverted>...</q-tabs>

绿色文本颜色的透明背景示例（v0.15.7 +）：

<q-tabs color="transparent" text-color="green">...</q-tabs>

自定义文本颜色（v0.15.7 +）的浅色示例：

<q-tabs color="amber" text-color="dark">...</q-tabs>

页眉中的选项卡对齐

默认情况下，在大宽度窗口中，选项卡左侧对齐。 如果你想保持全行排满的对齐方式（填充宽度上的所有可用空间），那么在对齐属性中添加justify：

<q-tabs align="justify">...</q-tabs>

要居中或向右对齐，请使用align="center" or align="right"。

工具栏 下拉刷新