Framework7學習筆記之 導航欄
阿新 • • 發佈:2018-02-20
link lock pos strong ont 設定 ref data- body
一:導航欄的布局
導航欄按“左 中 右”用三個div進行布局,中部寬度優先級最低,兩邊內容較多時會把中部用 ... 縮起來。
<div class="navbar"> <div class="navbar-inner"> <div class="left">Left</div> <div class="center">Center</div> <div class="right">Right</div> </div> </div>
二:導航欄的鏈接
通常,我們在導航欄的 左、右 會設置跳轉,跳轉的實現一般通過超鏈接,因此要實現導航欄控制跳轉,只需在div中包含 <a>標簽即可。
<div class="navbar"> <div class="navbar-inner"> <div class="left"> <a href="#" class="link">左邊跳轉</a> </div> <div class="center">中部標題</div> <div class="right"> <a href="#" class="link">右邊跳轉</a> </div> </div> </div>
三:多個鏈接
多個鏈接,只需在div中包含多個<a>標簽即可。
四:圖標+文字 的鏈接
只需在<a>標簽中:用 <i> 子標簽包含圖標,用<span>子標簽包含文字。
<div class="navbar"> <div class="navbar-inner"> <div class="left"> <a href="#" class="link"> <i class="icon 圖標類名"></i> <span>文字</span> </a> </div> <div class="center">Center</div> <div class="right"> <a href="#" class="link"> <i class="icon 圖標類名"></i> <span>文字</span> </a> </div> </div> </div>
五:只含圖標的鏈接
需要對<a>標簽添加 icon-only 類,該類為圖標設定了一個固定大小區域,以便用戶點擊。
<div class="navbar"> <div class="navbar-inner"> <div class="left"> <a href="#" class="link icon-only"> <i class="icon 圖標類名"></i> </a> </div> <div class="center">Center</div> <div class="right"> <a href="#" class="link icon-only"> <i class="icon 圖標類名"></i> </a> </div> </div> </div>
六:自動隱藏導航欄
在使用穿透布局類型時,view中的導航欄會自動穿透到頁面中。
如果跳轉到的頁面不需要導航欄,就需要對導航欄進行自動隱藏:在頁面文件中定義空導航欄;頁面元素中增加 no-navbar類。
<!-- 1:定義一個空的導航欄 --> <div class="navbar"> <div class="navbar-inner"> </div> </div> <!-- 2:在頁面元素添加 no-navbar類 --> <div data-page="about" class="page no-navbar"> <div class="page-content"> <div class="content-block"> <p>頁面內容...</p> ... </div> </div> </div>
Framework7學習筆記之 導航欄