forked from Tencent/weui
-
Notifications
You must be signed in to change notification settings - Fork 0
Navbar
jf edited this page Feb 26, 2016
·
2 revisions
Navbar,顶部 tab,当需要在页面顶部展示 tab 导航时使用,用法与 Tabbar 类似。

.weui_navbar 通常作为 .weui_tab 子元素、.weui_tab_bd 的兄弟元素一起使用。结构为:
<div class="weui_tab">
<div class="weui_navbar">
</div>
<div class="weui_tab_bd">
</div>
</div>.weui_tab 作为外层容器,高度撑满它的父容器的高度,.weui_tab_bd 作为 tab 的主体内容,占据除了 .weui_navbar 以外的全部父容器的高度,.weui_navbar 则为底部的导航栏。而 .weui_navbar_item 为 .weui_navbar 的子元素,表示一个导航区,建议不超过 5 个。
另外,需要给当前激活的 .weui_navbar_item 元素添加 .weui_bar_item_on 类,来标示当前高亮的条目。
完整的组件代码如下:
<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_bd">
</div>
</div>注意: navbar 组件是从 v0.4.0 开始加入的,更旧的版本不包含该组件,请使用 v0.4.0 及以上版本的 WeUI。