AUI按钮组工具栏

aui-bar + aui-bar-btn组合使用，结合aui-tab.js可以实现有切换功能的按钮组，也可以实现数字增减器的效果，具体实例可以查看代码

aui-bar-btn-item为子级容器

aui-bar + aui-bar-btn + aui-bar-btn-full 为满屏效果

aui-bar + aui-bar-btn + aui-bar-btn-sm 小号按钮组

aui-bar + aui-bar-btn + aui-bar-btn-round 两侧为半圆形

在顶部导航栏使用时，考虑到APICloud状态栏沉浸式样式的兼容，当导航栏只有该按钮组是直接aui-bar容器内放置按钮组。当出现左右图标时需放置在aui-title容器内。具体效果可以参考代码使用

<div class="aui-bar aui-bar-btn aui-bar-btn-full">
    <div class="aui-bar-btn-item aui-active">Item</div>
    <div class="aui-bar-btn-item">Item</div>
    <div class="aui-bar-btn-item">Item</div>
</div>
<div class="aui-bar aui-bar-btn aui-bar-btn-sm aui-bar-btn-full">
    <div class="aui-bar-btn-item aui-active">Item</div>
    <div class="aui-bar-btn-item">Item</div>
    <div class="aui-bar-btn-item">Item</div>
</div>
<div class="aui-bar aui-bar-btn" style="width:80%;">
    <div class="aui-bar-btn-item aui-active">Item</div>
    <div class="aui-bar-btn-item">Item</div>
    <div class="aui-bar-btn-item">Item</div>
</div>
<div class="aui-bar aui-bar-btn" style="width:80%;" type="count" id="demo">
    <div class="aui-bar-btn-item aui-font-size-20">
        <i class="aui-iconfont aui-icon-minus"></i>
    </div>
    <div class="aui-bar-btn-item">
        <input type="number" class="aui-input aui-text-center" id="count" value="1">
    </div>
    <div class="aui-bar-btn-item aui-font-size-20">
        <i class="aui-iconfont aui-icon-plus"></i>
    </div>
</div>
<div class="aui-bar aui-bar-btn aui-bar-btn-round" style="width:45%;">
    <div class="aui-bar-btn-item aui-active">Item</div>
    <div class="aui-bar-btn-item">Item</div>
</div>
<header class="aui-bar aui-bar-nav aui-margin-b-15">
    <a class="aui-pull-left aui-btn">
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title">
        <div class="aui-bar aui-bar-btn aui-bar-btn-round">
            <div class="aui-bar-btn-item aui-active">栏目一</div>
            <div class="aui-bar-btn-item">栏目二</div>
            <div class="aui-bar-btn-item">栏目三</div>
        </div>
    </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">
        <div class="aui-bar aui-bar-btn aui-bar-btn-round">
            <div class="aui-bar-btn-item aui-active">栏目一</div>
            <div class="aui-bar-btn-item">栏目二</div>
        </div>
    </div>
</header>
<header class="aui-bar aui-bar-nav" style="padding-top:25px;">
    <div class="aui-bar aui-bar-btn aui-bar-btn-round">
        <div class="aui-bar-btn-item aui-active">栏目一</div>
        <div class="aui-bar-btn-item">栏目二</div>
    </div>
</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">
        <div class="aui-bar aui-bar-btn aui-bar-btn-round">
            <div class="aui-bar-btn-item aui-active">栏目一</div>
            <div class="aui-bar-btn-item">栏目二</div>
        </div>

上一篇：AUI底部工具栏下一篇：AUI TAB切换工具栏