分頁是一種使用較少視窗實際空間來顯示更多資訊的方式。此頁面描述透過 QTabs、QTab 和 QRouteTab 的分頁選取部分。
此元件的一個常見用例是在 Layout 的標頭/頁尾中。請參閱版面配置和標頭與頁尾以取得參考。
提示
與QTabPanels搭配使用效果極佳，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 視為「exact-active」（完全符合路由，忽略雜湊 & 查詢）。
- 假設 Vue Router 處於歷史模式，它必須符合設定的路由雜湊（如果有的話）
- 它必須符合設定的路由查詢（如果有的話）- 目前路由查詢中的任何額外查詢參數都不會使分頁變為活動狀態（如果您想要這樣做，請勿使用
exact）
- 否則，如果未設定為
exact比對- 它指向的路由必須被 Vue Router 視為「active」（寬鬆符合路由，忽略雜湊 & 查詢）。
- 假設 Vue Router 處於歷史模式，是否使用雜湊設定？如果是，則必須完全符合。
- 是否使用查詢設定？如果是，則設定的查詢必須包含在目前的路由查詢中。
- 如果多個 QRouteTab 仍然符合目前的路由（例如：路由為 /cars/brands/tesla，而我們有指向非精確 /cars、非精確 /cars/brands、非精確 /cars/brands/tesla 的 QRouteTabs），則最符合目前路由的特定路由獲勝（在本例中為 /cars/brands/tesla）
- 如果仍然有多個 QRouteTabs 符合上述條件，則查詢最接近目前路由查詢的 QRouteTab 獲勝（具有設定的查詢，且目前路由查詢的額外參數最少）。
- 如果仍然有多個 QRouteTabs 符合上述條件，則產生的 href 長度較長的 QRouteTab 獲勝。
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>