layui框架学习（11：徽章）

news2024/11/27 0:16:14

应用程序有新增内容、未读消息时，会在按钮或菜单中添加红点或带数字的点状或方状图形，用户看到就知道有新内容，如下图所示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 ">&#xe624;</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>