Framework7 Toolbars - Framework7

« Previous Topics
Framework7 Navbars
Framework7 Layouts
Framework7 Environment
Next Topics »
Framework7 Search Bar
Framework7 Status Bar
Framework7 Side Panels

Does Framework7 Toolbars provide easy access through navigation elements?

Description

Toolbar provides easy access to other pages by using navigation elements at the bottom of the screen.

Users can use toolbar in two ways as mentioned in below table:

S.N.

Toolbar types & Description

1

Hide Toolbar
Users can hide the toolbar automatically loading the pages by using no-toolbar class to loaded page.

2

Bottom Toolbar
Place the toolbar at the bottom of the page by using the toolbar-bottom class.

Methods of Toolbar

The following available methods can be used with Toolbars:

S.N.

Toolbar Methods & Description

1

myApp.hideToolbar(toolbar)
This will hide the specified toolbar.

2

myApp.showToolbar(toolbar)
This will show the specified toolbar.

3

view.hideToolbar()
This will hide the specified toolbar in the view.

4

view.showToolbar()
This will show the specified toolbar in the view.

Example

Below example demonstrates use of toolbar layout in the Framework7.

First, we will create one HTML page called toolbar.html as shown below:

Now, initialize your app and views in the custom JS file toolbar.js.

Output

Below are the steps to see how above code works:

  • Save above html code as toolbar.html file in your server root folder.
  • Open this HTML file as http://localhost/toolbar.html and output as below gets displayed.
« Previous Topics
Framework7 Navbars
Framework7 Layouts
Framework7 Environment
Next Topics »
Framework7 Search Bar
Framework7 Status Bar
Framework7 Side Panels

List of Tutorials

List of Topics

Interview Questions

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Framework7 Topics