Framework7-工具栏 - 芒果文档

描述

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

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

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 types & Description

Hide Toolbar

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

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.

S.No

Toolbar Methods & Description

myApp.hideToolbar(toolbar)

It hides the specified toolbar.

myApp.showToolbar(toolbar)

It shows the specified toolbar.

view.hideToolbar()

It hides the specified toolbar in the view.

view.showToolbar()

It shows the specified toolbar in the view.

例

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

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


      
      
      Toolbar Layout
      
      
   

   
      
         
         
            
               
                  Toolbar Layout
               
            
            
            
               
                  
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                        Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida. 
                        Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Aenean 
                        sagittis interdum leo in molestie. Aliquam sodales in diam eu consectetur. 
                        Sed posuere a orci id imperdiet.
                     
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                        Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida. 
                        Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Aenean 
                        sagittis interdum leo in molestie. Aliquam sodales in diam eu consectetur. 
                        Sed posuere a orci id imperdiet.
                  
               
            
            
            
               
                  Link 1
                  Link 2
                  Link 3

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

描述

工具栏的方法

例

输出