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 ">&#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>
           

  按鈕、面闆等元素中使用徽章的方式類似，在此不再一一列舉。

參考文獻：

[1]B站：layui架構精講全套視訊教程

[2]https://layui.gitee.io/v2/docs/

[3]https://layui.gitee.io/v2/demo/

[4]https://github.com/layui/layui/