搜索组件模块
grid 栅格布局
layout admin 布局
color 颜色
iconfont 字体图标
font 字体大小 颜色
animation 动画
button 按钮
form 表单组
input 输入框
select 下拉选择框
checkbox 复选框
switch 开关
radio 单选框
textarea 文本域
nav 导航菜单
menu 基础通用菜单
breadcrumb 面包屑
tabs 选项卡
progress 进度条
panel 面板 / card
collapse 折叠面板/手风琴
table 表格元素
badge 徽章
timeline 时间线
blockquote 引用块
fieldset 字段集
hr 分割线
layer 弹出层/弹窗综合
laydate 日期时间选择器
laypage 分页
laytpl 模板引擎
table 数据表格
form 表单模块
upload 文件/图片上传
dropdown 下拉菜单
contextmenu 右键菜单
transfer 穿梭框
tree 树形菜单
colorpicker 颜色选择器
element 常用元素操作
slider 滑块
rate 评分
carousel 轮播/跑马灯
layedit 富文本编辑器
flow 信息流/图片懒加载
util 工具集
code 代码文本行修饰
layim
layuiadmin
-

徽章

徽章是一个修饰性的元素,它们本身细小而并不显眼,但掺杂在其它元素中就显得尤为突出了。页面往往因徽章的陪衬,而显得十分和谐。
快速使用

不妨先来看看 徽章 这个小小的大家族吧:

6 99 61728 绿 6 Hot

你可能已经敏锐地发现,除去花枝招展的七种颜色,徽章具有三种不同的风格类型:小圆点椭圆体边框体

</>code

  1. 小圆点,通过 layui-badge-dot 来定义,里面不能加文字
  2. <span class="layui-badge-dot"></span>
  3. <span class="layui-badge-dot layui-bg-orange"></span>
  4. <span class="layui-badge-dot layui-bg-green"></span>
  5. <span class="layui-badge-dot layui-bg-cyan"></span>
  6. <span class="layui-badge-dot layui-bg-blue"></span>
  7. <span class="layui-badge-dot layui-bg-black"></span>
  8. <span class="layui-badge-dot layui-bg-gray"></span>
  9. 椭圆体,通过 layui-badge 来定义。事实上我们把这个视作为主要使用方式
  10. <span class="layui-badge">6</span>
  11. <span class="layui-badge">99</span>
  12. <span class="layui-badge">61728</span>
  13. <span class="layui-badge">赤</span>
  14. <span class="layui-badge layui-bg-orange">橙</span>
  15. <span class="layui-badge layui-bg-green">绿</span>
  16. <span class="layui-badge layui-bg-cyan">青</span>
  17. <span class="layui-badge layui-bg-blue">蓝</span>
  18. <span class="layui-badge layui-bg-black">黑</span>
  19. <span class="layui-badge layui-bg-gray">灰</span>
  20. 边框体,通过 layui-badge-rim 来定义
  21. <span class="layui-badge-rim">6</span>
  22. <span class="layui-badge-rim">Hot</span>

与其它元素的搭配

徽章主要是修饰作用,因此必不可少要与几乎所有的元素搭配。我们目前对以下元素内置了徽章的排版支持:


按钮


← 快看!这颜色屎黄屎黄的。。。

</>code

  1. <button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray">1</span></button>
  2. <button class="layui-btn">动态<span class="layui-badge-dot layui-bg-orange"></span></button>

导航


</>code

  1. <ul class="layui-nav" style="text-align: right;"> <-- 小Tips:这里有没有发现,设置导航靠右对齐(或居中对齐)其实非常简单 -->
  2. <li class="layui-nav-item">
  3. <a href="">控制台<span class="layui-badge">9</span></a>
  4. </li>
  5. <li class="layui-nav-item">
  6. <a href="">个人中心<span class="layui-badge-dot"></span></a>
  7. </li>
  8. </ul>

选项卡(所有风格都支持,这里以简约风格为例)


  • 网站设置
  • 用户管理
  • 最新邮件99+

</>code

  1. <div class="layui-tab layui-tab-brief">
  2. <ul class="layui-tab-title">
  3. <li class="layui-this">网站设置</li>
  4. <li>用户管理<span class="layui-badge-dot"></span></li>
  5. <li>最新邮件<span class="layui-badge">99+</span></li>
  6. </ul>
  7. <div class="layui-tab-content"></div>
  8. </div>


而至于与其它更多元素的搭配,就由你自由把控吧!

结语

其实,在与其它元素的搭配中,你要做的,无非就是合理运用这几点:边距 背景色,徽章必然大显神威!

layui - 在每一个细节中,用心与你沟通