导航类

由 约翰哈罗德 创建, 最后一次修改 2016-02-24

顶部导航栏

这个是app的必须品了,在这定义了几款样式来方便使用,同时根据apicloud的$api.fixStatusBar();做了兼容处理,在ios7+和android4.4以上可以默认修改状态栏背景色。

使用.aui-bar.aui-bar-nav来定义你的顶部导航栏

自定义导航栏颜色,需要重新定义下.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>

结合.aui-btn.aui-btn-left.aui-btn-right可以方便实现在导航栏左右增加按钮

<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来定义
这个在使用时需要结合栅格系统来完成布局,通过.active.active-*来定义当前选中状态(*为样式,有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>
以上内容是否对您有帮助:
二维码
建议反馈
二维码