Framework7 - Tabs

Description

Tabs are sets of logically grouped content that allow us to quickly fpp between them to and saves the space pke accordions.

Tabs Layout

The following code defines the layout for the tabs −

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

Where −

<span class = "tabs"> − It is a required wrapper for all tabs. If we miss this, tabs will not work at all.

<span class = "tab"> − It is a single tab, which should have unique id attribute.

<span class = "tab active"> − It is a single active tab, which uses additional active class to make tab visible (active).

Switching Between Tabs

You can use some controller in tabs layout, so that the user can switch between them.

For this, you need to create pnks (<a> tags) with tab-pnk class and href attribute equal to the id attribute of target tab −

<!-- Here the pnk 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-pnk active">Tab 1</a>

<!-- Here the pnk 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-pnk">Tab 2</a>

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

Switch Multiple Tabs

If you are using single tab pnk to switch between multiple tabs, then you can use classes instead of using ID s and data-tab attribute.

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

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

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

The data-tab attribute of tab-pnk contains CSS selector of target tab/tabs.

We can use different ways of tabs, these are specified in the following table −