layui框架学习（11：徽章）

应用程序有新增内容、未读消息时，会在按钮或菜单中添加红点或带数字的点状或方状图形，用户看到就知道有新内容，如下图所示QQ邮箱的截图，会通过红色圆点或带NEW的方框提醒用户有新内容可以查看。

CSDN用户如果有新消息，也会在对应分类中看到类似的提醒（写本文时并没有新消息，故仅截图以示意）：

Layui中的徽章预设类支持在按钮、菜单、链接等各类元素中内嵌多种形式的徽章，以吸引用户注意力。其徽章类型包括小圆点、椭圆体、边框体等，对应预设类分别为layui-badge-dot、layui-badge和layui-badge，再配以不同的背景色，即可用于不同的情景。Layui官网中采用span元素作为徽章示例，但layui.css中并没有限制，使用div等元素也可以。
徽章可以用在导航中，如下所示：

     <div class="layui-nav "  lay-bar="disabled"><div class="layui-nav-item layui-this"><a href=""><i class="layui-icon "></i>文章<div class="layui-badge">8</div></a></div>          <div class="layui-nav-item"><a href="">MyGitHub<div class="layui-badge-dot"></div></a></div></div>

也能用于基础菜单：

 <li class="layui-menu-item-group layui-menu-item-down" lay-options="{type: 'group'}"><div class="layui-menu-body-title">内容检查</div><ul><li lay-options="{id: 1051}">语法检查<div class="layui-badge">8</div></li><li lay-options="{id: 1052}"><div class="layui-menu-body-title">错字检查</div></li><li lay-options="{id: 1053}">拼写检查</li></ul></li>

还能在选项卡中使用：

 <div class="layui-tab" lay-filter="demo" ><ul class="layui-tab-title"><li class="layui-this" lay-id="Article">文章<div class="layui-badge">8</div></li><li lay-id="Download">下载</li><li lay-id="QA">问答<div class="layui-badge-rim layui-border-red">新</div></li><li lay-id="Video">视频</li></ul><div class="layui-tab-content" ><div class="layui-tab-item">列出当前用户的所有发布及未发布的文章。</div><div class="layui-tab-item layui-show">显示当前用户的上传和下载明细</div><div class="layui-tab-item">显示当前用户的提问和回答明细。</div><div class="layui-tab-item">列出当前用户所有上传的视频。</div></div></div>

按钮、面板等元素中使用徽章的方式类似，在此不再一一列举。

参考文献：
[1]B站：layui框架精讲全套视频教程
[2]https://layui.gitee.io/v2/docs/
[3]https://layui.gitee.io/v2/demo/
[4]https://github.com/layui/layui/

layui框架学习（11：徽章）相关推荐

layui框架学习（4：导航）
layui官网教程采用html中的无序列表和定义列表来实现导航样式(文章最后还有个关于导航所用元素的补充说明),主要包括水平导航.垂直/侧边导航,同时还支持用span和a元素实现面包屑导航样式.导 ...
layui框架学习（13：辅助元素）
Layui官网教程中页面元素的大部分内容都过了一遍,就剩下表单和辅助元素,由于表单的内容比较多,准备先把辅助元素的内容先学习了,再花几篇文章学习并记录表单样式的设置方式. 辅助元素主要包括引用 ...
layui框架学习（1：布局）
Layui是开源的 Web UI 组件库,虽然目前已不算是最主流的前端框架,但很多开源项目都采用Layui设计页面,为了学习相关的项目,同时也为了掌握Layui的基本用法,特此基于B站的Layui ...
layui框架学习（10：时间线）
时间线,英文timeline,也叫时光轴.时间轴,是指以时间为记录方式的一种网络布局形式,其形式之一为下图所示(示例图来自参考文献5). Layui官网教程中的更新日志页面也用了时间线样式,如 ...
layui框架学习（29：滑块模块）
Layui中的滑块模块slider支持用户通过移动滑块从一系列的值中进行选择,比起手输数值,使用滑块的视觉效果更直观.slider滑块模块的基本用法及效果如下所示: <div id=&quo ...
layUi框架入门篇（一）
layUi框架学习笔记(一) 整理人:LF 时间:2017-9-1 表示今天第一次听说了layui的前端框架,上网搜了很多的资料和图示,对比了一下自己辛辛苦苦写了十天的网页样式,最后不得不感叹前端框架 ...
前端学习之LayUi框架基础
今天笔者学习了LayUi框架的一些基础内容,总体来说,LayUi框架比BootStrap框架更倾向于后台的搭建和使用,样式更加多样,说明也对国人更加友好,毕竟是国人开发的框架嘛~废话不多少,开始介绍. ...
[源码解析] 深度学习分布式训练框架 horovod (11) --- on spark --- GLOO 方案
[源码解析] 深度学习分布式训练框架 horovod (11) - on spark - GLOO 方案文章目录 [源码解析] 深度学习分布式训练框架 horovod (11) --- on spa ...
从零写一个具有IOC-AOP-MVC功能的框架---学习笔记---11. MVC功能之http请求处理器的编写---简易框架最后一公里！
从零写一个具有IOC-AOP-MVC功能的框架-学习笔记专栏往期文章链接: IOC功能相关章节: 从零写一个具有IOC-AOP-MVC功能的框架-学习笔记-01.项目初始化从零写一个具有IOC-A ...

layui框架学习（11：徽章）

layui框架学习（11：徽章）相关推荐

最新文章

热门文章