Framework7选项卡

本文概述

• 标签版面
• 在标签之间切换
• 切换多个标签

Framework7选项卡是一组按逻辑分组的内容, 可帮助你在它们之间快速移动并像手风琴一样节省空间。

标签版面

请参见Framework7选项卡的布局：

<!-- Tabs wrapper, should 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”>：它是一个活动标签, 它使用其他活动类使标签可见（活动）。

在标签之间切换

如果希望用户可以在选项卡之间切换, 请在选项卡布局中使用某些控制器。为此, 你应使用tab-link类和href属性等于目标tab的id属性创建链接（<a>标记）：

<！-这里的链接用于激活第一个选项卡, 具有与第一个选项卡（tab1）的id属性相同的href属性（＃tab1）->

<a href = “#tab1” class = “tab-link active”>标签1 </a>

<！-这里的链接用于激活第二个选项卡, 具有与第二个选项卡（tab2）的id属性相同的href属性（＃tab2）->

<a href = “#tab2” class = “tab-link”>标签2 </a>

<a href = “#tab3” class = “tab-link”>标签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>

tab-link的data-tab属性包含目标选项卡的CSS选择器。

Framework7中使用了不同类型的选项卡：