选项卡(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 字符串 选项卡的屏幕位置。允许的值是topbottom
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 字符串 可能的值:iconlabel。在狭窄的屏幕上,两者中的一个将被隐藏。
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-modelselectTab()方法。

布局中的选项卡

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

<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颜色,如primarysecondaryorangeteal或变体(teal-4orange-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"