📜  Framework7-工具栏

📅  最后修改于: 2020-10-25 02:46:37             🧑  作者: Mango


描述

通过使用屏幕底部的导航元素,工具栏可轻松访问其他页面。

您可以通过表中指定的两种方式使用工具栏-

S.No Toolbar types & Description
1 Hide Toolbar

You can hide the toolbar automatically when you load the pages by using the no-toolbar class to loaded page.

2 Bottom Toolbar

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

工具栏的方法

以下可用方法可与工具栏一起使用-

S.No Toolbar Methods & Description
1

myApp.hideToolbar(toolbar)

It hides the specified toolbar.

2

myApp.showToolbar(toolbar)

It shows the specified toolbar.

3

view.hideToolbar()

It hides the specified toolbar in the view.

4

view.showToolbar()

It shows the specified toolbar in the view.

下面的示例演示了Framework7中工具栏布局的使用。

首先,我们将创建一个名为toolbar.html的HTML页面,如下所示-


      
      
      Toolbar Layout
      
      
   

   
      

现在,在自定义JS文件toolbar.js中初始化您的应用和视图。

输出

让我们执行以下步骤,看看上面给出的代码如何工作-

  • 将上述给定的HTML代码另存为服务器根文件夹中的toolbar.html文件。

  • 以http://localhost/toolbar.html格式打开此HTML文件,并显示输出,如下所示。