186 次浏览【转载需注明来源】
博客作者:【qiang】
徽章通常作为修饰性元素,与其他元素、模块组合使用(导航、选项卡等等),起到新消息提醒、计数等作用。
layui内置了3种风格的徽章,我们只需要按照需求自行组合即可,下面是徽章的代码示例:
<!--小圆点,通过 lay-徽章-圆点 来定义,里面不能加文字--> <行内元素 类名="lay-徽章-圆点"></行内元素> <行内元素 类名="lay-徽章-圆点 lay-橙色背景"></行内元素> <行内元素 类名="lay-徽章-圆点 lay-绿色背景"></行内元素> <行内元素 类名="lay-徽章-圆点 lay-青色背景"></行内元素> <行内元素 类名="lay-徽章-圆点 lay-蓝色背景"></行内元素> <行内元素 类名="lay-徽章-圆点 lay-黑色背景"></行内元素> <行内元素 类名="lay-徽章-圆点 lay-灰色背景"></行内元素> <!--椭圆体,通过 lay-徽章 来定义。事实上我们把这个视作为主要使用方式--> <行内元素 类名="lay-徽章">6</行内元素> <行内元素 类名="lay-徽章">99</行内元素> <行内元素 类名="lay-徽章">61728</行内元素> <行内元素 类名="lay-徽章">赤</行内元素> <行内元素 类名="lay-徽章 lay-橙色背景">橙</行内元素> <行内元素 类名="lay-徽章 lay-绿色背景">绿</行内元素> <行内元素 类名="lay-徽章 lay-青色背景">青</行内元素> <行内元素 类名="lay-徽章 lay-蓝色背景">蓝</行内元素> <行内元素 类名="lay-徽章 lay-黑色背景">黑</行内元素> <行内元素 类名="lay-徽章 lay-灰色背景">灰</行内元素> <!--边框体,通过 lay-徽章-边框 来定义--> <行内元素 类名="lay-徽章-边框">6</行内元素> <行内元素 类名="lay-徽章-边框">Hot</行内元素>
代码效果展示:
这些徽章组合使用在很多地方:
你打开QQ或者微信,你就会发现到处是徽章,未读消息、消息提醒、动态等等。
点击此处跳转案例下载:点击下载lay-徽章实例
不能恶意举报,否则进行封号处理!
测试账号