1. 首页
  2. 文档
  3. WeUI文档
  4. 顶部导航(Navbar)

顶部导航(Navbar)

Navbar,顶部 tab,当需要在页面顶部展示 tab 导航时使用,用法与 Tabbar 类似。

image

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

<div class="weui-tab">
    <div class="weui-navbar">
        <div class="weui-navbar__item weui-bar__item_on">
            选项一
        </div>
        <div class="weui-navbar__item">
            选项二
        </div>
        <div class="weui-navbar__item">
            选项三
        </div>
    </div>
    <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>

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

另外,需要给当前激活的 .weui-navbar__item 元素添加 .weui-bar__item_on 类,来标示当前高亮的条目。



发表评论

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