Framework7 导航栏和工具栏(1/2)

本篇文章主要介绍了" Framework7 导航栏和工具栏"，主要涉及到方面的内容，对于web前端感兴趣的同学可以参考一下： 在向应用添加导航栏和工具栏之前，我们需要决定使用哪种布局。Framework7在这方面很自由，有3种不同类型的导航栏/工具栏布局，它们对应着在页面/视图中的不同...

在向应用添加导航栏和工具栏之前，我们需要决定使用哪种布局。

Framework7在这方面很自由，有3种不同类型的导航栏/工具栏布局，它们对应着在页面/视图中的不同位置。静态布局（静态布局可能是最少使用的布局），固定布局，穿透布局

静态

.view   
  .pages    
    .page   
      .page-content   
        .navbar   
        // other page content
        .toolbar 

固定

.view
  .pages.navbar-fixed.navbar-through
    .page
      .navbar
      .page-content
      .toolbar

穿透

view
  .navbar
  .pages.navbar-through.toolbar-through
    .page
      .page-content
  .toolbar

导航栏是一个固定区域 （在固定和穿透布局类型中） 。它位于屏幕顶部，包含页面标题和导航元素。

导航栏包含3个部分：左、中、右。每个部分都可以包含任意的HTML内容，但推荐按照如下方式使用：

• 左部 用来放置返回链接、图标以及单独的文字链接。

• 中部 用来显示页面标题和标签链接（即按钮控制）。

• 右部 和左部一样

 含有图标和文本的链接

    

        

            
                
                返回
            
        
        
Center
        

            
                
            
        
    

自动隐藏导航栏

在通过Ajax载入的页面上，当你不需要导航栏时，Framework7允许你自动隐藏导航栏。它只在你使用穿透类型的布局时才有用。为了实现这一点，你要做的是添加"no-navbar"类到载入的页面中(

    

    



    

        

            
Go Back
            ...
        
    

 导航结合Popover实现点击下拉效果