导航类

最后更新于:2022-04-01 01:24:17

## 顶部导航栏 这个是app的必须品了,在这定义了几款样式来方便使用,同时根据apicloud的`$api.fixStatusBar(); `做了兼容处理,在ios7+和android4.4以上可以默认修改状态栏背景色。<Br /> 使用`.aui-bar` 、`.aui-bar-nav`来定义你的顶部导航栏<br /> 自定义导航栏颜色,需要重新定义下`.aui-bar`或着单独写个样式,如果使用了`.aui-btn`也需要对按钮重新定义下,或者是单独写个样式,比如:<Br /> ~~~ .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> ~~~
';