010-徽章
1. 徽章是一個(gè)修飾性的元素, 它們本身細(xì)小而并不顯眼, 但摻雜在其它元素中就顯得尤為突出了。頁面往往因徽章的陪襯, 而顯得十分和諧。
2. 徽章具有三種不同的風(fēng)格類型: 小圓點(diǎn)、橢圓體、邊框體。
3. 使用
3.1. 小圓點(diǎn), 通過layui-badge-dot來定義。里面不能加文字。
3.2. 橢圓體, 通過layui-badge來定義。事實(shí)上我們把這個(gè)視作為主要使用方式。
3.3. 邊框體, 通過layui-badge-rim來定義。
3.4. 實(shí)例
小圓點(diǎn) <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">動態(tài)<span class="layui-badge-dot layui-bg-orange"></span></button>4.3. 導(dǎo)航
<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="">個(gè)人中心<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. 選項(xiàng)卡
<div class="layui-tab layui-tab-brief"><ul class="layui-tab-title"><li class="layui-this">網(wǎng)站設(shè)置</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">內(nèi)容1</div><div class="layui-tab-item">內(nèi)容2</div><div class="layui-tab-item">內(nèi)容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>小圓點(diǎn), 通過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來定義。事實(shí)上我們把這個(gè)視作為主要使用方式。</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">藍(lán)</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">動態(tài)<span class="layui-badge-dot layui-bg-orange"></span></button><br /><br /><h2>導(dǎo)航</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="">個(gè)人中心<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>選項(xiàng)卡</h2><div class="layui-tab layui-tab-brief"><ul class="layui-tab-title"><li class="layui-this">網(wǎng)站設(shè)置</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">內(nèi)容1</div><div class="layui-tab-item">內(nèi)容2</div><div class="layui-tab-item">內(nèi)容3</div></div></div><script type="text/javascript">layui.use('element', function(){var element = layui.element;});</script></body> </html>5.2. 效果圖
《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀總結(jié)
