TabBar

底部导航。TabBar UI 提供与WeLink规范一致的菜单选项视图。

效果示例

    <div class="weui-tab">
        <div class="weui-tab__panel"></div>
        <div class="weui-tabbar">
            <a href="javascript:;" class="weui-tabbar__item weui-bar__item_on">
                <span style="display: inline-block; position:relative;">
                    <i class="icon-tab icon-tab-messageCurrent"></i>
                </span>
                <p class="weui-tabbar__label">消息</p>
            </a>
            <a href="javascript:;" class="weui-tabbar__item">
                <i class="icon-tab icon-tab-email"></i>
                <p class="weui-tabbar__label">邮件</p>
            </a>
            <a href="javascript:;" class="weui-tabbar__item">
                <span style="display: inline-block; position:relative;">
                    <i class="icon-tab icon-tab-contact"></i>
                </span>
                <p class="weui-tabbar__label">通讯录</p>
            </a>
            <a href="javascript:;" class="weui-tabbar__item">
                <i class="icon-tab icon-tab-business"></i>
                <p class="weui-tabbar__label">业务</p>
            </a>
            <a href="javascript:;" class="weui-tabbar__item">
                <i class="icon-tab icon-tab-knowleage"></i>
                <p class="weui-tabbar__label">知识</p>
            </a>
        </div>
    </div>