1. 徽章是一个修饰性的元素, 它们本身细小而并不显眼, 但掺杂在其它元素中就显得尤为突出了。页面往往因徽章的陪衬, 而显得十分和谐。
2. 徽章具有三种不同的风格类型: 小圆点、椭圆体、边框体。
3. 使用
3.1. 小圆点, 通过layui-badge-dot来定义。里面不能加文字。
3.2. 椭圆体, 通过layui-badge来定义。事实上我们把这个视作为主要使用方式。
3.3. 边框体, 通过layui-badge-rim来定义。
3.4. 实例
小圆点
<span class="layui-badge-dot"></span>
椭圆体
<span class="layui-badge">6</span>
边框体
<span class="layui-badge-rim">6</span>4. 与其它元素的搭配
4.1. 徽章主要是修饰作用, 因此必不可少要与几乎所有的元素搭配。
4.2. 按钮
<button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray">1</span></button>
<button class="layui-btn">动态<span class="layui-badge-dot layui-bg-orange"></span></button>4.3. 导航
<ul class="layui-nav layui-bg-blue">
<li class="layui-nav-item">
<a href="">控制台<span class="layui-badge">9</span></a>
</li>
<li class="layui-nav-item">
<a href="">个人中心<span class="layui-badge-dot"></span></a>
</li>
<li class="layui-nav-item">
<a href=""><img src="1.png" class="layui-nav-img">我</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">修改信息</a></dd>
<dd><a href="javascript:;">安全管理</a></dd>
<dd><a href="javascript:;">退了</a></dd>
</dl>
</li>
</ul>4.4. 选项卡
<div class="layui-tab layui-tab-brief">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理<span class="layui-badge-dot"></span></li>
<li>最新邮件<span class="layui-badge">99+</span></li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">内容1</div>
<div class="layui-tab-item">内容2</div>
<div class="layui-tab-item">内容3</div>
</div>
</div>5. 例子
5.1. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>徽章 - layui</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
<h2>小圆点, 通过layui-badge-dot来定义。里面不能加文字。</h2>
<span class="layui-badge-dot"></span>
<span class="layui-badge-dot layui-bg-orange"></span>
<span class="layui-badge-dot layui-bg-green"></span>
<span class="layui-badge-dot layui-bg-cyan"></span>
<span class="layui-badge-dot layui-bg-blue"></span>
<span class="layui-badge-dot layui-bg-black"></span>
<span class="layui-badge-dot layui-bg-gray"></span><br /> <br />
<h2>椭圆体, 通过layui-badge来定义。事实上我们把这个视作为主要使用方式。</h2>
<span class="layui-badge">6</span>
<span class="layui-badge">99</span>
<span class="layui-badge">61728</span>
<span class="layui-badge">赤</span>
<span class="layui-badge layui-bg-orange">橙</span>
<span class="layui-badge layui-bg-green">绿</span>
<span class="layui-badge layui-bg-cyan">青</span>
<span class="layui-badge layui-bg-blue">蓝</span>
<span class="layui-badge layui-bg-black">黑</span>
<span class="layui-badge layui-bg-gray">灰</span><br /> <br />
<h2>边框体, 通过layui-badge-rim来定义。</h2>
<span class="layui-badge-rim">6</span>
<span class="layui-badge-rim">Hot</span><br /> <br />
<h2>按钮</h2>
<button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray">1</span></button>
<button class="layui-btn">动态<span class="layui-badge-dot layui-bg-orange"></span></button><br /><br />
<h2>导航</h2>
<ul class="layui-nav layui-bg-blue">
<li class="layui-nav-item">
<a href="">控制台<span class="layui-badge">9</span></a>
</li>
<li class="layui-nav-item">
<a href="">个人中心<span class="layui-badge-dot"></span></a>
</li>
<li class="layui-nav-item">
<a href=""><img src="1.png" class="layui-nav-img">我</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">修改信息</a></dd>
<dd><a href="javascript:;">安全管理</a></dd>
<dd><a href="javascript:;">退了</a></dd>
</dl>
</li>
</ul><br /><br />
<h2>选项卡</h2>
<div class="layui-tab layui-tab-brief">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</li>
<li>用户管理<span class="layui-badge-dot"></span></li>
<li>最新邮件<span class="layui-badge">99+</span></li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">内容1</div>
<div class="layui-tab-item">内容2</div>
<div class="layui-tab-item">内容3</div>
</div>
</div>
<script type="text/javascript">
layui.use('element', function(){
var element = layui.element;
});
</script>
</body>
</html>5.2. 效果图
