mirror of https://github.com/layui/layui
89 lines
2.5 KiB
Markdown
89 lines
2.5 KiB
Markdown
---
|
|
title: 徽章 badge
|
|
toc: true
|
|
---
|
|
|
|
# 徽章
|
|
|
|
> 徽章 `badge` 通常作为修饰用途而存在，它们本身细小而并不显眼，但掺杂在其它元素中就显得尤为突出了。
|
|
|
|
|
|
<h2 id="badge" lay-toc="{}" style="margin-bottom: 0;">普通徽章</h2>
|
|
|
|
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
|
<textarea>
|
|
<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>
|
|
|
|
<hr class="ws-space-16">
|
|
|
|
边框徽章：
|
|
<span class="layui-badge-rim">6</span>
|
|
<span class="layui-badge-rim">Hot</span>
|
|
</textarea>
|
|
</pre>
|
|
|
|
|
|
<h2 id="badge-dot" lay-toc="{}">小圆点</h2>
|
|
|
|
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
|
<textarea>
|
|
<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>
|
|
</textarea>
|
|
</pre>
|
|
|
|
|
|
<h2 id="demo" lay-toc="{}">徽章的搭配</h2>
|
|
|
|
<pre class="layui-code" lay-options="{preview: true, layout: ['preview', 'code'], tools: ['full']}">
|
|
<textarea>
|
|
<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>
|
|
|
|
<hr class="ws-space-16">
|
|
|
|
<ul class="layui-nav" style="text-align: right;">
|
|
<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>
|
|
</ul>
|
|
|
|
<hr class="ws-space-16">
|
|
|
|
<div class="layui-tab layui-tab-brief">
|
|
<ul class="layui-tab-title">
|
|
<li class="layui-this">标签1</li>
|
|
<li>标签2<span class="layui-badge-dot"></span></li>
|
|
<li>标签3<span class="layui-badge">99+</span></li>
|
|
</ul>
|
|
<div class="layui-tab-content"></div>
|
|
</div>
|
|
</textarea>
|
|
</pre>
|
|
|
|
徽章还可以自由佩戴在其他更多元素中，此处不做逐一列举。
|
|
|