Javatpoint Logo
Javatpoint Logo

Framework7 Tabs

Framework7 Tabs are the set of logically grouped content that facilitates you to quickly move between them and save the space like accordion.

Tabs Layout

See the layout of a Framework7 tab:


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

If you want that the user can switch between tabs, use some controller in tabs layout. For this, you should 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 have single tab link and you want to switch between multiple tabs, use classes instead of using ID's and data-tab attribute.

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

There are different types of tabs used in Framework7:

Index Tab Type 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 facilitate 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.

Youtube For Videos Join Our Youtube Channel: Join Now


Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Trending Technologies

B.Tech / MCA