Framework7 - 標籤頁

描述

標籤頁是一組邏輯上分組的內容，允許我們快速地在它們之間切換，並像手風琴一樣節省空間。

標籤頁佈局

以下程式碼定義了標籤頁的佈局：

<!-- Tabs wrapper, shoud have "tabs" class.It is a required element -->
<div class = "tabs">
   <!-- The tab, should have "tab" class and unique id attribute -->
   
   <!-- The tab is active by default - "active" class -->
   <div class = "tab active" id = "tab1">
      ...  The content for Tab 1 goes here ...
   </div>
   
   <!-- The second tab, should have "tab" class and unique id attribute -->
   <div class = "tab" id = "tab2">
      ... The content for Tab 2 goes here ...
   </div>
</div>

其中：

• <div class = "tabs"> - 這是所有標籤頁的必需包裝器。如果我們遺漏了它，標籤頁將完全無法工作。

• <div class = "tab"> - 這是一個單獨的標籤頁，應具有唯一的 id 屬性。

• <div class = "tab active"> - 這是一個單獨的活動標籤頁，它使用額外的 active 類使標籤頁可見（活動）。

在標籤頁之間切換

您可以在標籤頁佈局中使用一些控制器，以便使用者可以在它們之間切換。

為此，您需要建立帶有 tab-link 類和 href 屬性（等於目標標籤頁的 id 屬性）的連結（<a> 標籤）：

<!-- Here the link is used to activates 1st tab, has the same href attribute (#tab1) as the id attribute of 1st tab (tab1)  -->
<a href = "#tab1" class = "tab-link active">Tab 1</a>

<!-- Here the link is used to activates 2st tab, has the same href attribute (#tab2) as the id attribute of 2st tab (tab2)  -->
<a href = "#tab2" class = "tab-link">Tab 2</a>

<a href = "#tab3" class = "tab-link">Tab 3</a>

切換多個標籤頁

如果您使用單個標籤頁連結在多個標籤頁之間切換，則可以使用類而不是使用 ID 和 data-tab 屬性。

<!-- For Top Tabs  -->
<div class = "tabs tabs-top">
   <div class = "tab tab1 active">...</div>
   <div class = "tab tab2">...</div>
   <div class = "tab tab3">...</div>
</div>

<!-- For Bottom Tabs -->
<div class = "tabs tabs-bottom">
   <div class = "tab tab1 active">...</div>
   <div class = "tab tab2">...</div>
   <div class = "tab tab3">...</div>
</div>

<!-- For Tabs links -->
<div class = "tab-links">
   <!-- Links are switch top and bottom tabs to .tab1 -->
   <a href = "#" class = "tab-link" data-tab = ".tab1">Tab 1</a>
   <!-- Links are switch top and bottom tabs to .tab2 -->
   <a href = "#" class = "tab-link" data-tab = ".tab2">Tab 2</a>
   <!-- Links are switch top and bottom tabs to .tab3 -->
   <a href = "#" class = "tab-link" data-tab = ".tab3">Tab 3</a>
</div>

標籤頁連結的 data-tab 屬性包含目標標籤頁/標籤頁的 CSS 選擇器。

我們可以使用不同的標籤頁方式，這些方式在下面的表格中指定：