導(dǎo)航類

頂部導(dǎo)航欄

這個是app的必須品了，在這定義了幾款樣式來方便使用，同時根據(jù)apicloud的$api.fixStatusBar();做了兼容處理，在ios7+和android4.4以上可以默認修改狀態(tài)欄背景色。

使用.aui-bar 、.aui-bar-nav來定義你的頂部導(dǎo)航欄

自定義導(dǎo)航欄顏色，需要重新定義下.aui-bar或著單獨寫個樣式，如果使用了.aui-btn也需要對按鈕重新定義下,或者是單獨寫個樣式，比如：

.aui-bar.aui-orange { background:#ff9900;}
.aui-bar .aui-btn { background:#ff9900;}或.aui-bar .aui-btn.aui-btn-orange { background:#ff9900}

<header class="aui-bar aui-bar-nav aui-orange">
 ......   
</header>

結(jié)合.aui-btn和.aui-btn-left 、 .aui-btn-right可以方便實現(xiàn)在導(dǎo)航欄左右增加按鈕

<header class="aui-bar aui-bar-nav aui-bar-warning">
    <a class="aui-btn aui-btn-warning aui-pull-left">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">AUI</div>
    <a class="aui-btn aui-btn-warning">
    <span class="aui-iconfont aui-icon-menu"></span>
    </a>
</header>

底部的工具切換欄

使用.aui-nav 、.aui-bar-tab來定義
這個在使用時需要結(jié)合柵格系統(tǒng)來完成布局，通過.active或.active-*來定義當(dāng)前選中狀態(tài)(＊為樣式，有primay \ success \ info \ dark \ danger \ warning)

<footer class="aui-nav aui-bar-tab" id="aui-footer">
    <div class="aui-col-xs-3 aui-text-center active-warning">
        <span class="aui-iconfont aui-icon-favor"></span>
        <p>欄目1</p>
    </div>
    <div class="aui-col-xs-3 aui-text-center">
        <span class="aui-iconfont aui-icon-mark"></span>
        <p>欄目2</p>
    </div>
    <div class="aui-col-xs-3 aui-text-center">
        <span class="aui-iconfont aui-icon-like"></span>
        <p>欄目3</p>
    </div>
    <div class="aui-col-xs-3 aui-text-center">
        <span class="aui-iconfont aui-icon-my"></span>
        <p>欄目4</p>
    </div>
</footer>