Framework7(07:组件之导航栏和工具栏,状态栏,侧边栏

2016-12-17 本文已影响1584人廖马儿

1.导航栏和工具栏的布局类型

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

Framework7在这方面很自由，有3种不同类型的导航栏/工具栏布局，它们对应着在页面/视图中的不同位置。

静态布局
静态布局可能是最少使用的布局。在这种情况下，导航栏和工具栏只是可以滚动的页面内容的一部分，每个页面都有它自己的导航栏和工具栏
固定布局
在固定布局中，也是每个页面都有它自己的导航栏和工具栏，但是它们在屏幕上始终可见，不会随着页面内容滚动

与静态布局相比，固定布局的不同之处在于:

导航栏和工具栏是Page的子元素(<div class="page">)
每个页面拥有额外的“navbar-fixed”类（对于固定导航栏）和“toolbar-fixed”类（对于固定工具栏）

注意，如果你想要对单视图中的每个页面使用固定布局，可以直接在父页面(<div class="pages">)上添加“navbar-fixed”和“toolbar-fixed”类，而不是对每个单页面分别添加。

穿透布局(iOS only)

这是最有趣，最被广泛使用的布局 —— 在不同页面间切换时，导航栏和工具栏保持不变。通过这种布局，可以实现酷炫的动态导航（不要忘记在视图初始化的时候启用它)

与静态和固定布局相比，穿透布局的不同之处在于：

导航栏和工具栏是视图的子元素(<div class="view">)
具有穿透布局的导航栏和工具栏的视图拥有额外的“navbar-through”类（对于穿透类型的导航栏）和"toolbar-through"类（对于穿透类型的工具栏)
混合布局
对于不同的视图，你可以使用不同的布局，比如在一个视图中使用固定布局，在另一个中使用穿透布局。其实，你也可以在单视图中混合使用这些布局。例如，你可以使用穿透的导航栏和固定的工具栏。

无导航栏/工具栏
如果你不需要导航栏或工具栏，你大可不必包含它们，并且不用在page/pages/view中添加相应的类（“"navbar-fixed”，“navbar-through”，“toolbar-fixed”，“toolbar-through”）

2.导航栏

导航栏是一个固定区域 （在固定 和穿透布局类型中） 。它位于屏幕顶部，包含页面标题和导航元素。
导航栏包含3个部分：左、中、右。每个部分都可以包含任意的HTML内容，但推荐按照如下方式使用：

左部用来放置返回链接、图标以及单独的文字链接。
中部用来显示页面标题和标签链接（即按钮控制）。
右部和左部一样。

3.导航栏布局

<div class="navbar">
    <div class="navbar-inner"> 
        <div class="left">Left</div>
        <div class="center">Center</div> 
        <div class="right">Right</div> 
   </div>
</div>

注意，导航栏的中心元素具有最低的宽度优先级，当屏幕不能放下全部3个元素时，中部会被截断。

4.含有链接的导航栏

要想在左/右部添加链接，只需要添加<a> 标签，以及额外的 link类:

<div class="right">
<a href="#" class="link">Right Link</a>
</div>

额外的 link 类并不是必须的，但是推荐使用，因为它添加了需要的链接尺寸，以及透明度特效。

多个链接

 <div class="left"> 
    <a href="#" class="link">Left 1</a> 
    <a href="#" class="link">Left 2</a>    
</div>

屏幕快照 2016-12-17 下午5.13.25.png

含有图标和文本的链接
只有图标的链接

5.导航栏的相关方法

myApp.hideNavbar(navbar)
myApp.showNavbar(navbar)
view.hideNavbar() 隐藏该视图中的导航栏
view.showNavbar() 显示该视图中的导航栏
myApp.sizeNavbars(viewContainer) 调用这个方法会重新计算指定的View的导航栏的位置，比如:myApp.sizeNavbars('.view-main') iOS only

6.自动隐藏导航栏

在通过Ajax载入的页面上，当你不需要导航栏时，Framework7允许你自动隐藏导航栏。它只在你使用穿透类型的布局时才有用。

为了实现这一点，你要做的是添加"no-navbar"类到载入的页面中(<div class="page no-navbar">)，然后在那里放置一个空的导航栏：

7.工具栏

工具栏是位于屏幕底端的固定（在固定和穿透布局类型中）区域，它包含导航元素。

工具栏不包含任何其他部分，内部只含有普通文本。
默认情况下，所有的工具栏元素（链接）沿着工具栏等距分布 - 它们之间的距离相等。

导航栏的相关视图方法：

myApp.hideToolbar(toolbar)
myApp.showToolbar(toolbar)
view.hideToolbar()
view.showToolbar()

Bottom Toolbar:
(android only)

8.带标签的工具栏

标签栏布局
标签栏和工具栏基本一致，但是它有额外的"tabbar"类：

<div class="toolbar tabbar"> <div class="toolbar-inner"> <a href="#tab1" class="tab-link active"> <i class="icon demo-icon-1"></i> </a> <a href="#tab2" class="tab-link"> <i class="icon demo-icon-2"></i> </a> <a href="#tab3" class="tab-link"> <i class="icon demo-icon-3"></i> </a> <a href="#tab4" class="tab-link"> <i class="icon demo-icon-4"></i> </a> </div></div>

默认情况下，所有的工具栏元素（链接）沿着工具栏等距分布 - 它们之间的距离相等。

9.向图标添加角标

如果你需要向标签栏图标添加徽章，只需在图标内部放入<span class="badge">：

<a href="#tab2" class="tab-link"> 
    <i class="icon demo-icon-2"> 
        <span class="badge bg-red">
             5
        </span> 
    </i> 
</a>

10.带有文案的标签栏

如果你需要使用带有文案的标签栏，需要在标签栏上再加一个"tabbar-labels"类，然后把<span class="tabbar-label">放到链接里：

带有文案的标签栏在不同设备上会有更大的高度而不是44px：在iPhone上是50px，在iPad上是55px

因为这些高度的改变，你需要在固定和穿透布局中使用 "tabbar-labels-fixed"或者 "tabbar-labels-through"。

11.相关的App方法

myApp.hideToolbar(toolbar)
myApp.showToolbar(toolbar)

12.自动隐藏工具栏/导航栏

Framework7 允许你在ajax加载的页面自动隐藏工具栏/导航栏。只有在穿透布局的时候才可以使用。
你唯一需要做的就是在需要加载的页面上加一个类 "no-tabbar"(<div class="page no-tabbar">)

13.状态栏：

状态栏遮罩：
iOS 7+允许创建全屏应用，但是当状态栏覆盖你的应用时，会有navbar缩短20px的问题。
Framework7可以自动检测你的应用是否是全屏模式，如果是的话，自动添加"with-statusbar-overlay"类到<html>
（如果不是的话，移除这个类）。通过"with-statusbar-overlay"类（应用处于全屏模式的时候），<html>
在顶部拥有额外的padding，把整个应用的内容下移状态栏的高度（20px）。
为了配合上面的功能，我们需要在<body>
内添加<div class="statusbar-overlay">
：

<body> 
    <div class="statusbar-overlay">    
    </div>

这个"statusbar-overlay"div总是固定在屏幕顶端，默认隐藏。当应用处于全屏模式，并且html
含有"with-statusbar-overlay"类时，它可见。

为了使我们的状态栏背景变成粉色，我们只需要添加一个CSS规则：

.statusbar-overlay { background: pink;}
这种逻辑允许对状态栏背景自由地控制，我们可以动态改变它的背景。
比如，我们有暗色的带有覆盖效果的左侧边栏。当侧边栏打开时，我们可以让状态栏背景更暗：

/* Default Status bar background */.statusbar-overlay { background: pink; /* We can add transition for smooth color animation */ -webkit-transition: 400ms; transition: 400ms;} /* Change Status bar background when panel opened */body.with-panel-left-cover .statusbar-overlay { background: #222;}

注意：

在大屏幕网络应用上，状态栏文本颜色总是白色的，没有必要改变它。
在PhoneGap应用中，默认情况下，应用状态栏文本颜色总是黑色的。在Framework7中，它不能被改变，但可以通过PhoneGap插件定制，如cordova-plugin-statusbar。

14.侧边栏

让我们看看如何添加侧栏。我们的APP可能包含两种侧栏,一个在左边,另一个在右边。我们应该在body的开始处添加侧栏的html body:

Framework7(07:组件之导航栏和工具栏,状态栏,侧边栏

猜你喜欢

热点阅读