选项卡是一种使用较少的窗口空间显示更多信息的方法。 本页通过QTab、QTab和QRouteTab描述选项卡选择部分。
该组件的一种常见用例是在布局的页眉/页脚中。 请参考布局和页眉和页脚以获得参考。
TIP
与QTabPanels配合使用，这是一个严格指向面板（选项卡内容）本身的组件。
QTabs API
QTab API
QRouteTab API
WARNING
QRouteTab不会也不能与UMD版本一起使用，因为在那种环境下您没有Vue Router。
用法
TIP
当宽度大于容器宽度时，QTab可以水平滚动。 相应地调整您的浏览器以查看此操作。
在桌面上，你会看到两边有可以点击的V形符号。
在手机上，你可以用手指平移选项卡。
如果要强制箭头在手机上可见，请使用mobile-arrows属性。
基础
外部、内部和手机可见箭头
垂直
稠密
个别颜色
波纹
自定义指示线
在下面的示例中，请注意最后两个QTab：顶部的指示线和没有指示线。
选项卡通知
有多种方式显示选项卡通知：使用QBadge、通过一个警报点或（v1.9.14+）一个警报图标（可以是任何）
对齐
当容器宽度（而非窗口宽度）大于配置的断点时，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会根据您的应用路由变为“激活”状态，而不是取决于v-model。 因此，v-model的初始值或直接更改v-model也不会更改您的应用路由。
处理自定义导航
<template>
<div class="q-pa-md">
<div class="q-gutter-y-md" style="max-width: 600px">
<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 immediatelly" @click="navPass" />
</q-tabs>
</div>
</div>
</template>
<script>
export default {
methods: {
navDelay (e, go) {
e.navigate = false // we cancel the default navigation
// console.log('triggering navigation in 2s')
setTimeout(() => {
// console.log('navigating as promised 2s ago')
go()
}, 2000)
},
navCancel (e) {
e.navigate = false // we cancel the default navigation
},
navRedirect (e, go) {
e.navigate = false // we cancel the default navigation
go({ query: { tab: '2', noScroll: true } })
},
navPass () {}
}
}
</script>