1.導(dǎo)航欄和工具欄的布局類型
在向應(yīng)用添加導(dǎo)航欄和工具欄之前，我們需要決定使用哪種布局关翎。
Framework7在這方面很自由橄登，有3種不同類型的導(dǎo)航欄/工具欄布局，它們對應(yīng)著在頁面/視圖中的不同位置钞螟。
- 靜態(tài)布局
靜態(tài)布局可能是最少使用的布局。在這種情況下谎碍，導(dǎo)航欄和工具欄只是可以滾動的頁面內(nèi)容的一部分鳞滨，每個頁面都有它自己的導(dǎo)航欄和工具欄 - 固定布局
在固定布局中，也是每個頁面都有它自己的導(dǎo)航欄和工具欄椿浓，但是它們在屏幕上始終可見太援，不會隨著頁面內(nèi)容滾動
與靜態(tài)布局相比闽晦，固定布局的不同之處在于:
- 導(dǎo)航欄和工具欄是
Page的子元素(<div class="page">) - 每個頁面擁有額外的“
navbar-fixed”類（對于固定導(dǎo)航欄）和“toolbar-fixed”類（對于固定工具欄）
注意扳碍，如果你想要對單視圖中的每個頁面使用固定布局，可以直接在父頁面(<div class="pages">)上添加“navbar-fixed”和“toolbar-fixed”類仙蛉，而不是對每個單頁面分別添加笋敞。
- 穿透布局(
iOS only)
這是最有趣，最被廣泛使用的布局 —— 在不同頁面間切換時荠瘪，導(dǎo)航欄和工具欄保持不變夯巷。通過這種布局，可以實現(xiàn)酷炫的動態(tài)導(dǎo)航（不要忘記在視圖初始化的時候啟用它)
與靜態(tài)和固定布局相比哀墓，穿透布局的不同之處在于：
- 導(dǎo)航欄和工具欄是視圖的子元素(
<div class="view">) - 具有穿透布局的導(dǎo)航欄和工具欄的視圖擁有額外的“
navbar-through”類（對于穿透類型的導(dǎo)航欄）和"toolbar-through"類（對于穿透類型的工具欄) - 混合布局
對于不同的視圖趁餐，你可以使用不同的布局，比如在一個視圖中使用固定布局篮绰，在另一個中使用穿透布局后雷。其實，你也可以在單視圖中混合使用這些布局。例如臀突，你可以使用穿透的導(dǎo)航欄和固定的工具欄勉抓。
無導(dǎo)航欄/工具欄
如果你不需要導(dǎo)航欄或工具欄，你大可不必包含它們候学，并且不用在page/pages/view中添加相應(yīng)的類（“"navbar-fixed”藕筋，“navbar-through”，“toolbar-fixed”梳码，“toolbar-through”）
2.導(dǎo)航欄
導(dǎo)航欄是一個固定區(qū)域 （在固定 和穿透布局類型中） 隐圾。它位于屏幕頂部，包含頁面標題和導(dǎo)航元素掰茶。
導(dǎo)航欄包含3個部分：左翎承、中、右符匾。每個部分都可以包含任意的HTML內(nèi)容叨咖，但推薦按照如下方式使用：
-
左部 用來放置
返回鏈接、圖標以及單獨的文字鏈接啊胶。 -
中部 用來顯示
頁面標題和標簽鏈接（即按鈕控制）甸各。 - 右部 和左部一樣。
3.導(dǎo)航欄布局
<div class="navbar">
<div class="navbar-inner">
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right">Right</div>
</div>
</div>
注意焰坪，導(dǎo)航欄的中心元素具有最低的寬度優(yōu)先級趣倾，當屏幕不能放下全部3個元素時，中部會被截斷某饰。
4.含有鏈接的導(dǎo)航欄
-
要想在
左/右部添加鏈接儒恋，只需要添加<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>
含有圖標和文本的鏈接
只有圖標的鏈接
5.導(dǎo)航欄的相關(guān)方法
myApp.hideNavbar(navbar)
myApp.showNavbar(navbar)
view.hideNavbar() 隱藏該視圖中的導(dǎo)航欄
view.showNavbar() 顯示該視圖中的導(dǎo)航欄
myApp.sizeNavbars(viewContainer) 調(diào)用這個方法會重新計算指定的View的導(dǎo)航欄的位置牧嫉，比如:myApp.sizeNavbars('.view-main') iOS only
6.自動隱藏導(dǎo)航欄
在通過Ajax載入的頁面上，當你不需要導(dǎo)航欄時减途，Framework7允許你自動隱藏導(dǎo)航欄酣藻。它只在你使用穿透類型的布局時才有用。
為了實現(xiàn)這一點鳍置，你要做的是添加"no-navbar"類到載入的頁面中(<div class="page no-navbar">)辽剧，然后在那里放置一個空的導(dǎo)航欄：
7.工具欄
工具欄是位于屏幕底端的固定（在固定和穿透布局類型中）區(qū)域，它包含導(dǎo)航元素税产。
工具欄不包含任何其他部分怕轿，內(nèi)部只含有普通文本坊夫。
默認情況下，所有的工具欄元素（鏈接）沿著工具欄等距分布 - 它們之間的距離相等撤卢。
導(dǎo)航欄的相關(guān)視圖方法：
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.向圖標添加角標
如果你需要向標簽欄圖標添加徽章智听，只需在圖標內(nèi)部放入<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">放到鏈接里：
帶有文案的標簽欄在不同設(shè)備上會有更大的高度而不是44px：在iPhone上是50px到推，在iPad上是55px
因為這些高度的改變，你需要在固定和穿透布局中使用 "tabbar-labels-fixed"或者 "tabbar-labels-through"惕澎。
11.相關(guān)的App方法
myApp.hideToolbar(toolbar)
myApp.showToolbar(toolbar)
12.自動隱藏工具欄/導(dǎo)航欄
Framework7 允許你在ajax加載的頁面自動隱藏工具欄/導(dǎo)航欄莉测。只有在穿透布局的時候才可以使用。
你唯一需要做的就是在需要加載的頁面上加一個類 "no-tabbar"(<div class="page no-tabbar">)
13.狀態(tài)欄：
狀態(tài)欄遮罩：
iOS 7+允許創(chuàng)建全屏應(yīng)用唧喉，但是當狀態(tài)欄覆蓋你的應(yīng)用時捣卤，會有navbar縮短20px的問題。
Framework7可以自動檢測你的應(yīng)用是否是全屏模式八孝，如果是的話董朝，自動添加"with-statusbar-overlay"類到<html>
（如果不是的話，移除這個類）干跛。通過"with-statusbar-overlay"類（應(yīng)用處于全屏模式的時候）子姜，<html>
在頂部擁有額外的padding，把整個應(yīng)用的內(nèi)容下移狀態(tài)欄的高度（20px）楼入。
為了配合上面的功能哥捕，我們需要在<body>
內(nèi)添加<div class="statusbar-overlay">
：
<body>
<div class="statusbar-overlay">
</div>
這個"statusbar-overlay"div總是固定在屏幕頂端，默認隱藏嘉熊。當應(yīng)用處于全屏模式遥赚，并且html
含有"with-statusbar-overlay"類時，它可見记舆。
為了使我們的狀態(tài)欄背景變成粉色鸽捻，我們只需要添加一個CSS規(guī)則：
.statusbar-overlay { background: pink;}
這種邏輯允許對狀態(tài)欄背景自由地控制，我們可以動態(tài)改變它的背景泽腮。
比如，我們有暗色的帶有覆蓋效果的左側(cè)邊欄衣赶。當側(cè)邊欄打開時诊赊，我們可以讓狀態(tài)欄背景更暗：
/* 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;}
注意：
- 在大屏幕網(wǎng)絡(luò)應(yīng)用上，狀態(tài)欄文本顏色總是白色的府瞄，沒有必要改變它碧磅。
- 在
PhoneGap應(yīng)用中碘箍，默認情況下，應(yīng)用狀態(tài)欄文本顏色總是黑色的鲸郊。在Framework7中丰榴，它不能被改變，但可以通過PhoneGap插件定制秆撮，如cordova-plugin-statusbar四濒。
14.側(cè)邊欄
讓我們看看如何添加側(cè)欄。我們的APP可能包含兩種側(cè)欄,一個在左邊,另一個在右邊职辨。我們應(yīng)該在body的開始處添加側(cè)欄的html body:
