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

YDUI Touch Docs 返回首页

Tabbar

1、说明

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

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

2、使用

2.1、结构

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

<footer class="m-tabbar">
<a href="#" class="tabbar-item">
<span class="tabbar-icon">
<!-- 这里放置图标 -->
</span>
<span class="tabbar-txt"><!-- 导航标题 --></span>
</a>
<a href="#" class="tabbar-item">
<span class="tabbar-icon">
<!-- 这里放置图标 -->
</span>
<span class="tabbar-txt"><!-- 导航标题 --></span>
</a>
<a href="#" class="tabbar-item">
<span class="tabbar-icon">
<!-- 这里放置图标 -->
</span>
<span class="tabbar-txt"><!-- 导航标题 --></span>
</a>
</footer>

2.1、普通样式

2.1.1、代码:

<footer class="m-tabbar">
<a href="#" class="tabbar-item">
<span class="tabbar-icon">
<i class="demo-icons-weixin"></i>
</span>
<span class="tabbar-txt">微信</span>
</a>
<a href="#" class="tabbar-item">
<span class="tabbar-icon">
<i class="demo-icons-contact"></i>
</span>
<span class="tabbar-txt">通讯录</span>
</a>
<a href="#" class="tabbar-item">
<span class="tabbar-icon">
<i class="demo-icons-discover"></i>
</span>
<span class="tabbar-txt">发现</span>
</a>
</footer>

2.1.2、效果如下:

2.2、完整示例

2.2.1、添加角标、高亮当前选中、图标使用图片:

<footer class="m-tabbar demo-small-pitch">
<a href="#" class="tabbar-item tabbar-crt"><!-- 添加.tabbar-crt即高亮当前选中 -->
<span class="tabbar-icon">
<i class="demo-icons-weixin"></i>
<span class="badge badge-danger">2</span><!-- 添加带数字角标 -->
</span>
<span class="tabbar-txt">微信</span>
</a>
<a href="#" class="tabbar-item">
<span class="tabbar-icon">
<i class="demo-icons-contact"></i>
</span>
<span class="tabbar-txt">通讯录</span>
</a>
<a href="#" class="tabbar-item">
<span class="tabbar-icon">
<i class="demo-icons-discover"></i>
<span class="tabbar-dot"></span><!-- 添加小圆点角标 -->
</span>
<span class="tabbar-txt">发现</span>
</a>
<a href="#" class="tabbar-item">
<div class="tabbar-icon">
<img src="../img/icon.png" /><!-- 图标使用图片 -->
</div>
<div class="tabbar-txt">图片</div>
</a>
</footer>

2.2.2、效果如下:

2.3、fixed定位导航栏

2.3.1、在.m-tabbar上添加.tabbar-fixed样式即可;

<footer class="m-tabbar tabbar-fixed">
<a href="#" class="tabbar-item">
<span class="tabbar-icon">
<i class="demo-icons-weixin"></i>
</span>
<span class="tabbar-txt">微信</span>
</a>
<a href="#" class="tabbar-item">
<span class="tabbar-icon">
<i class="demo-icons-contact"></i>
</span>
<span class="tabbar-txt">通讯录</span>
</a>
<a href="#" class="tabbar-item">
<span class="tabbar-icon">
<i class="demo-icons-discover"></i>
</span>
<span class="tabbar-txt">发现</span>
</a>
</footer>

3、专属定制

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

4、参与讨论

4.1、有任何使用问题,请在评论中留言,也欢迎大家发表意见、建议。感谢您对YDUI的支持。