Framework7 - Tabs

Description

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

Tabs Layout

The following code defines the layout for the tabs −

<!-- 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>

Where −

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

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

  • <div 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 links (<a> tags) with tab-link class and href attribute equal to the id attribute of target tab −

<!-- 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>

Switch Multiple Tabs

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

<!-- 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>

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

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

S.No Tabs Types & Description
1 Inline Tabs

Inline tabs are sets of grouped in inline that allow you to quickly flip between them.
2 Switch Tabs From Navbar

We can place tabs in navigation bar that allow you to flip between them.
3 Switch Views From Tab Bar

Single tab can be used to switch between views with its own navigation and layout.
4 Animated Tabs

You can use simple transition (animation) to switch tabs.
5 Swipeable Tabs

You can create swipeable tabs with simple transition by using the tabs-swipeable-wrap class for the tabs.
6 Tabs JavaScript Events

JavaScript events can be used when you are working with JavaScript code for the tabs.
7 Show Tab Using JavaScript

You can switch or show the tab using JavaScript methods.
Advertisements