选项卡是使用更少的窗口空间显示更多信息的一种方式。此页面通过 QTabs、QTab 和 QRouteTab 描述了选项卡选择部分。
此组件的一个常见用例是在布局的头部/底部。请参阅布局和头部和底部以供参考。
提示
与QTabPanels配合使用效果极佳，该组件严格指的是面板（选项卡内容）本身。
用法
提示
- 当宽度超过容器宽度时，QTabs 可以水平滚动。相应地调整您的浏览器以查看其运行情况。
- 在桌面设备上，您会在两侧看到可以点击的左右箭头。
- 在移动设备上，您可以用手指平移选项卡。
- 如果要强制在移动设备上显示箭头，请使用
mobile-arrows道具。
警告
如果您没有安装 Vue Router，则 QRouteTab 不会也不可能与 UMD 版本一起使用。
基本
外部、内部和在移动设备上可见的箭头
垂直
紧凑
单个颜色
水波纹
自定义指示器
在下面的示例中，请注意最后两个 QTabs：顶部指示器和无指示器。
选项卡通知
有多种方法可以显示选项卡通知：使用 QBadge、通过警报点或警报图标（可以是任何图标）。
对齐方式
QTabs 是响应式的，并且align 道具（见下文）在容器宽度（不是窗口宽度）大于配置的断点时变为活动状态。出于演示目的，以下选项卡已禁用断点。
在下面的示例中，第二个 QTabs 中，如果窗口宽度低于 1024px，则“电影”和“照片”选项卡将被“更多...”下拉菜单替换。
带下拉菜单
在 QToolbar 上
请注意，我们需要指定shrink 道具。默认情况下，QTabs 尝试扩展到所有可用的水平空间，但在这种情况下，我们将其用作 QToolbar 的子元素，因此我们不希望这样做。
动态更新
与 QTabsPanel 结合使用
提示
QTabPanels 也可以作为独立组件使用。它们不依赖于 QTabs 的存在。此外，它们可以放置在页面上的任何位置，而不仅仅是在 QTabs 附近。
更多信息：选项卡面板。
连接到 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>警告
当将 QTabs 与 QRouteTab 一起使用时，不建议也使用 v-model（尽管您仍然可以使用），因为当前活动选项卡的真相来源由当前路由而不是 v-model 确定。每个 QRouteTab 根据应用程序的路由变为“活动”，而不是由于 v-model。因此，v-model 的初始值或直接更改 v-model 也不会更改应用程序的路由。
将 QRouteTab 与当前路由匹配针对 v2.9+ 更新
- 如果将其设置为
exact匹配- 它指向的路由必须被 Vue Router 视为“精确活动”（完全匹配路由，忽略哈希和查询）。
- 假设 Vue Router 处于历史模式，它必须与配置的路由哈希（如果有）匹配。
- 它必须与配置的路由查询（如果有）匹配 - 当前路由查询中的任何额外查询参数都不会使选项卡处于活动状态（如果您需要这样做，请不要使用
exact）。
- 否则，如果未将其设置为
exact匹配- 它指向的路由必须被 Vue Router 视为“活动”（松散匹配路由，忽略哈希和查询）。
- 假设 Vue Router 处于历史模式，它是否配置了哈希？如果是，则必须完全匹配。
- 它是否配置了查询？如果是，则配置的查询必须包含在当前路由查询中。
- 如果多个 QRouteTab 仍然与当前路由匹配（例如：路由是 /cars/brands/tesla，并且我们有指向非精确 /cars、非精确 /cars/brands、非精确 /cars/brands/tesla 的 QRouteTabs），则最匹配当前路由的特定路由获胜（在本例中为 /cars/brands/tesla）。
- 如果仍然有多个 QRouteTabs 匹配上述条件，则查询最接近当前路由查询的那个获胜（具有配置的查询，并且当前路由查询具有最少的额外参数）。
- 如果仍然有多个 QRouteTabs 匹配上述条件，则生成的 href 最长的那个获胜。
配置的exact QRouteTabs 始终优先于松散匹配（非精确）的 QRouteTabs。
处理自定义导航针对 v2.9+ 更新
提示
请参阅页面顶部的 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>