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:
Here:
- <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. |