Toolbar is a fixed (with Fixed and Through layout types) area at the bottom of a screen that contains navigation elements.
Toolbar does not have any parts, just plain links inside.
Toolbar layout is very simple:
<div class="toolbar">
<div class="toolbar-inner">
<a href="#" class="link">Link 1</a>
<a href="#" class="link">Link 2</a>
<a href="#" class="link">Link 3</a>
</div>
</div>
By default, all Toolbar elements (links) equally spaced along toolbar - they have equal space between each other.
If we have initialized View we can use following methods available for Toolbars:
myApp.hideToolbar(toolbar, isAnimated) | Hide specified toolbar.toolbar - HTMLElement or string (with CSS Selector) of required toolbar. Required.isAnimated - Boolean - Default: true |
myApp.showToolbar(toolbar, isAnimated) | Show specified toolbar.toolbar - HTMLElement or string (with CSS Selector) of required toolbar. Required.isAnimated - Boolean - Default: true |
view.hideToolbar(isAnimated) | Hide toolbar in this ViewisAnimated - Boolean - Default: true |
view.showToolbar(isAnimated) | Show toolbar in this ViewisAnimated - Boolean - Default: true |
And the following example:
var myApp = new Framework7();
var $ = Framework7.$;
var mainView = myApp.addView('.view-main');
$('.hide-toolbar').on('click', function () {
mainView.hideToolbar();
});
$('.show-toolbar').on('click', function () {
mainView.showToolbar();
});
Framework7 allows you to hide/show Toolbar automatically for some Ajax loaded pages where you may not need Toolbar. It is useful only when you use through-type layout.
To make it work all you need is to add "no-toolbar" class to loaded page (<div class="page no-toolbar">
):
<!-- Page has additional "no-toolbar" class -->
<div data-page="about" class="page no-toolbar">
<div class="page-content">
<div class="content-block">
<p><a href="#" class="back button">Go Back</a></p>
...
</div>
</div>
</div>
Bottom Toolbar is supported only in Material Theme. In iOS Theme it is on the bottom by default
In Material Theme Toolbar/Tabbar is usually on top of the app right below the Navbar. But if you really need to Toolbar on bottom you can do it by just using addional "toolbar-bottom" class:
Framework7 allows you to hide/show Toolbar automatically for some Ajax loaded pages where you may not need Toolbar. It is useful only when you use through-type layout.
<div data-page="home" class="page toolbar-fixed navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="center">Bottom Toolbar</div>
</div>
</div>
<!-- Toolbar has additional "toolbar-bottom" class -->
<div class="toolbar toolbar-bottom">
<div class="toolbar-inner">
<a href="#" class="link">Link 1</a>
<a href="#" class="link">Link 2</a>
<a href="#" class="link">Link 3</a>
</div>
</div>
<div class="page-content">
...
</div>
</div>