导航栏

2.0版本中导航栏分蓝色调和浅色调,支持嵌套按钮,tab切换栏等其他控件。

为了兼容APICloud状态栏沉浸式的处理,当导航栏中只有中间文字或者tab等时,请不要使用.aui-title

案例代码

<header class="aui-bar aui-bar-nav">顶部导航栏</header>
<header class="aui-bar aui-bar-nav" style="padding-top:25px;">
    <a class="aui-pull-left">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">fixStatusBar效果</div>
</header>
<header class="aui-bar aui-bar-nav">
    <a class="aui-pull-left aui-btn">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">Title</div>
</header>
<header class="aui-bar aui-bar-nav aui-bar-light">
    <a class="aui-pull-left aui-btn">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">Title</div>
</header>
<header class="aui-bar aui-bar-nav aui-bar-light">
    <a class="aui-pull-left aui-btn">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">Title</div>
    <a class="aui-pull-right aui-btn aui-btn-outlined">
        <span class="aui-iconfont aui-icon-search"></span>
    </a>
</header>
<header class="aui-bar aui-bar-nav">
    <a class="aui-pull-left aui-btn">
        <span class="aui-iconfont aui-icon-left"></span>返回
    </a>
    <div class="aui-title">Title</div>
</header>
<header class="aui-bar aui-bar-nav">
    <a class="aui-pull-left aui-btn aui-btn-outlined">
        <span class="aui-iconfont aui-icon-menu"></span>
    </a>
    <div class="aui-title">Title</div>
    <a class="aui-pull-right aui-btn aui-btn-outlined">
        <span class="aui-iconfont aui-icon-search"></span>
    </a>
</header>