底部导航(Tabbar)

tabbar,底部导航,通常用作 Web 应用的主界面底部导航,类似于微信主界面的底部“微信”、“通讯录”、“发现”和“我”的导航区。每个功能包含一个图标和该功能简洁的文字描述。

image

.weui-tabbar 通常作为 .weui-tab 子元素、.weui-tab__panel 的兄弟元素一起使用。结构为:

<div class="weui-tab">
    <div class="weui-tab__panel">
        <div>Page 1</div>
        <div style="display:none">Page 2</div>
        <div style="display:none">Page 3</div>
    </div>
    <div class="weui-tabbar">
        
    </div>
</div>

.weui-tab 作为外层容器,高度撑满它的父容器的高度,.weui-tab__panel 作为 tab 的主体内容,占据除了 .weui-tabbar 以外的全部父容器的高度,.weui-tabbar 则为底部的导航栏。而 .weui-tabbar__item 为 .weui-tabbar 的子元素,表示一个导航区,建议不超过 5 个。

图标 .weui-tabbar__icon 约定尺寸为 24px * 24px ,二倍即 48px * 48px。

关于 active 态,开发者根据需要,给当前激活的 .weui-tabbar__item 添加标示的 .weui-bar__item_on 类名,然后控制文字颜色和图标变化。

完整的组件代码如下:

<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">
            <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
            <p class="weui-tabbar__label">微信</p>
        </a>
        <a href="javascript:;" class="weui-tabbar__item">
            <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
            <p class="weui-tabbar__label">通讯录</p>
        </a>
        <a href="javascript:;" class="weui-tabbar__item">
            <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
            <p class="weui-tabbar__label">发现</p>
        </a>
        <a href="javascript:;" class="weui-tabbar__item">
            <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
            <p class="weui-tabbar__label">我</p>
        </a>
    </div>
</div>

爱生活,爱技术

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注