Tab Bar is a particular case of Toolbar, but it contains icons (or icons with labels) instead of plain links and inteded to be used with Tabs.
Tab bar layout is almost the same as for Toolbar, but Tab bar has additional "tabbar" class:
<div class="toolbar tabbar">
<div class="toolbar-inner">
<a href="#tab1" class="tab-link active">
<i class="icon demo-icon-1"></i>
</a>
<a href="#tab2" class="tab-link">
<i class="icon demo-icon-2"></i>
</a>
<a href="#tab3" class="tab-link">
<i class="icon demo-icon-3"></i>
</a>
<a href="#tab4" class="tab-link">
<i class="icon demo-icon-4"></i>
</a>
</div>
</div>
By default, all Tab Bar elements (links) equally spaced along toolbar - they have equal space between each other. But here is important note about links size
On iPhone all links will have the same size equal to [screen width] / [number of links]
On iPad all links will be centered with minimal width equal to 105px
If you need to add badges to Tab Bar icons, just put <span class="badge">
inside of icon:
<div class="toolbar tabbar">
<div class="toolbar-inner">
<a href="#tab1" class="tab-link active">
<i class="icon demo-icon-1"></i>
</a>
<a href="#tab2" class="tab-link">
<i class="icon demo-icon-2">
<span class="badge bg-red">5</span>
</i>
</a>
<a href="#tab3" class="tab-link">
<i class="icon demo-icon-3"></i>
</a>
<a href="#tab4" class="tab-link">
<i class="icon demo-icon-4">
<span class="badge bg-green">15</span>
</i>
</a>
</div>
</div>
If you need to use Tab Bar icons with labels we need one more "tabbar-labels" class on Tab Bar, and to put <span class="tabbar-label">
inside of link:
<div class="toolbar tabbar tabbar-labels">
<div class="toolbar-inner">
<a href="#tab1" class="tab-link active">
<i class="icon demo-icon-1"></i>
<span class="tabbar-label">Label 1</span>
</a>
<a href="#tab2" class="tab-link">
<i class="icon demo-icon-2">
<span class="badge bg-red">5</span>
</i>
<span class="tabbar-label">Label 2</span>
</a>
<a href="#tab3" class="tab-link">
<i class="icon demo-icon-3"></i>
<span class="tabbar-label">Label 3</span>
</a>
<a href="#tab4" class="tab-link">
<i class="icon demo-icon-4"></i>
<span class="tabbar-label">Label 4</span>
</a>
</div>
</div>
Note that Tab Bar with labels will have more height instead of usual 44px: 50px on iPhone and 55px on iPad
Because of more height, you should use "tabbar-labels-fixed" or "tabbar-labels-through" for Fixed and Through layouts with Tab Bar
Scrollable Tab Bar is available only for Material Theme
When you have a lot of links and they all don't fit into view, then it could be useful to use scrollable Tab Bar. It allows to swipe/scroll through tab links.
All we need to make Tab Bar scrollable is just to add additional "tabbar-scrollable" class to Tab Bar:
<div data-page="home" class="page toolbar-fixed navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="center">Scrollable Tab Bar</div>
</div>
</div>
<!-- Additional "tabbar-scrollable" class -->
<div class="toolbar tabbar tabbar-scrollable">
<div class="toolbar-inner">
<a href="#tab-1" class="tab-link active">Tab 1</a>
<a href="#tab-2" class="tab-link">Tab 2</a>
<a href="#tab-3" class="tab-link">Tab 3</a>
<a href="#tab-4" class="tab-link">Tab 4</a>
<a href="#tab-5" class="tab-link">Tab 5</a>
<a href="#tab-6" class="tab-link">Tab 6</a>
<a href="#tab-7" class="tab-link">Tab 7</a>
<a href="#tab-8" class="tab-link">Tab 8</a>
<a href="#tab-9" class="tab-link">Tab 9</a>
<a href="#tab-10" class="tab-link">Tab 10</a>
<a href="#tab-11" class="tab-link">Tab 11</a>
<a href="#tab-12" class="tab-link">Tab 12</a>
</div>
</div>
...
</div>
myApp.hideToolbar(toolbar, isAnimated) | Hide specified tab bar.toolbar - HTMLElement or string (with CSS Selector) of required tab bar. Required.isAnimated - Boolean - Default: true |
myApp.showToolbar(toolbar, isAnimated) | Show specified tab bar.toolbar - HTMLElement or string (with CSS Selector) of required tab bar. Required.isAnimated - Boolean - Default: true |
Framework7 allows you to hide/show Tab Bar automatically for some Ajax loaded pages where you may not need it. It is useful only when you use through-type layout.
To make it work all you need is to add "no-tabbar" class to loaded page (<div class="page no-tabbar">
):
<!-- Page has additional "no-tabbar" class -->
<div data-page="about" class="page no-tabbar">
<div class="page-content">
<div class="content-block">
<p><a href="#" class="back button">Go Back</a></p>
...
</div>
</div>
</div>