ion-tabs

陰影

分頁是頂層導覽元件，用於實作基於分頁的導覽。此元件是個別 Tab 元件的容器。

ion-tabs 元件沒有任何樣式，並作為路由出口以處理導覽。它不提供任何 UI 回饋或在分頁之間切換的機制。為了執行此操作，應提供 ion-tab-bar 作為 ion-tabs 的直接子項目。

ion-tabs 和 ion-tab-bar 都可以作為獨立元素使用。它們不相互依賴即可運作，但它們通常一起使用以實作行為類似原生應用程式的基於分頁的導覽。

ion-tab-bar 需要定義一個插槽，才能投影到 ion-tabs 元件中的正確位置。

基本用法

分頁可用於顯示不同的內容，而無需變更 URL。當分頁不用於導覽，而是用於顯示不同的內容時，這非常有用。

搭配路由器的用法

分頁可以與 Ionic 路由器一起使用，以實作基於分頁的導覽。分頁列和活動分頁將根據 URL 自動解析。這是分頁導覽最常見的模式。

最佳實務

Ionic 提供了關於分頁路由模式的最佳實務指南。請查看關於 Angular、React 和 Vue 的指南以取得其他資訊。

介面

TabsCustomEvent

雖然不是必要，但此介面可以用來取代 CustomEvent 介面，以便使用從此元件發出的 Ionic 事件進行更強的類型檢查。

interface TabsCustomEvent extends CustomEvent {
  detail: { tab: string };
  target: HTMLIonTabsElement;
}

屬性

此元件沒有可用的屬性。

事件

名稱	描述	冒泡
ionTabsDidChange	當導覽已完成轉換至新元件時發出。	false
ionTabsWillChange	當導覽即將轉換至新元件時發出。	false

方法

getSelected

描述	取得目前選取的分頁。此方法僅適用於原生 JavaScript 專案。分頁的 Angular、React 和 Vue 實作與每個架構的路由器耦合。
簽章	getSelected() => Promise<string ｜ undefined>

getTab

描述	依其 tab 屬性的值或元素參照取得特定的分頁。此方法僅適用於原生 JavaScript 專案。分頁的 Angular、React 和 Vue 實作與每個架構的路由器耦合。
簽章	getTab(tab: string ｜ HTMLIonTabElement) => Promise<HTMLIonTabElement ｜ undefined>

select

描述	依其 tab 屬性的值或元素參照選取分頁。此方法僅適用於原生 JavaScript 專案。分頁的 Angular、React 和 Vue 實作與每個架構的路由器耦合。
簽章	select(tab: string ｜ HTMLIonTabElement) => Promise<boolean>

CSS 陰影部分

此元件沒有可用的 CSS 陰影部分。

CSS 自訂屬性

此元件沒有可用的 CSS 自訂屬性。

插槽

名稱	描述
``	如果提供的內容沒有插槽，則會放置在具名插槽之間。
bottom	內容會放置在螢幕底部。
top	內容會放置在螢幕頂部。