当前博客:30-快码FOF中文编程layui教学-组件:徽章

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</行内元素>
Markup

代码效果展示:

这些徽章组合使用在很多地方:

你打开QQ或者微信,你就会发现到处是徽章,未读消息、消息提醒、动态等等。

 

点击此处跳转案例下载:点击下载lay-徽章实例

30-快码FOF中文编程layui教学-组件:徽章