嗞嗞嗞~ 你的浏览器仿佛在对我微笑!

YDUI Touch Docs 返回首页

Tabbar

1、说明

1.1、示例:http://m.ydui.org/html/tabbar.html

1.2、移动端常见固定于底部的导航栏;

2、调用

普通按钮

Tabbar基于Flexbox弹性布局,导航个数无限定;

若为 fixed定位 导航,则需在 .m-tabbbar 上添加 .tabbar-fixed 即可。

<footer class="m-tabbar">
<a href="#" class="tabbar-item">
<span class="tabbar-icon">
<i class="icon-home-outline"></i>
</span>
<span class="tabbar-txt">首页</span>
</a>
<a href="#" class="tabbar-item">
<span class="tabbar-icon">
<i class="icon-shopcart-outline"></i>
</span>
<span class="tabbar-txt">购物车</span>
</a>
<a href="#" class="tabbar-item">
<span class="tabbar-icon">
<i class="icon-ucenter-outline"></i>
</span>
<span class="tabbar-txt">个人中心</span>
</a>
<a href="#" class="tabbar-item">
<span class="tabbar-icon">
<img src="//static.ydcss.com/ydui/img/logo.png">
</span>
<span class="tabbar-txt">图片</span>
</a>
</footer>
添加高亮

在所需添加高亮的.tabbar-item上添加 .tabbar-active即可。

<footer class="m-tabbar">
<a href="#" class="tabbar-item">
<span class="tabbar-icon">
<i class="icon-home-outline"></i>
</span>
<span class="tabbar-txt">首页</span>
</a>
<a href="#" class="tabbar-item tabbar-active">
<span class="tabbar-icon">
<i class="icon-shopcart"></i>
</span>
<span class="tabbar-txt">购物车</span>
</a>
<a href="#" class="tabbar-item">
<span class="tabbar-icon">
<i class="icon-ucenter-outline"></i>
</span>
<span class="tabbar-txt">个人中心</span>
</a>
</footer>
添加未读消息

.tabbar-icon 元素内添加 <span class="tabbar-dot"></span><span class="badge badge-danger">2</span> 即可。

<footer class="m-tabbar">
<a href="#" class="tabbar-item">
<span class="tabbar-icon">
<i class="icon-home-outline"></i>
</span>
<span class="tabbar-txt">首页</span>
</a>
<a href="#" class="tabbar-item">
<span class="tabbar-icon">
<i class="icon-shopcart-outline"></i>
<span class="tabbar-dot"></span>
</span>
<span class="tabbar-txt">购物车</span>

</a>
<a href="#" class="tabbar-item tabbar-active">
<span class="tabbar-icon">
<i class="icon-ucenter"></i>
<span class="badge badge-danger">2</span>
</span>
<span class="tabbar-txt">个人中心</span>
</a>
</footer>

3、专属定制

3.1、底部导航栏的字体颜色、背景颜色、图标默认颜色、图标选中颜色等都可以通过这里定制;