LayUI
一、课程目标
1. 【了解】LayUI框架 2. 【理解】LayUI基础使用 3. 【掌握】LayUI页面元素 4. 【掌握】LayUI内置模块
二、LayUI基本使用
2.1 概念
layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。
2.2 下载
2.2.1 官网下载
官网 : https://layuion.com/
官方文档:https://layuion.com/docs/
2.2.2 目录结构
官网下载后，解压文件，目录结构如下
├─css //css目录 │ │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：） │ │ ├─laydate │ │ ├─layer │ │ └─layim │ └─layui.css //核心样式文件 ├─font //字体图标目录 ├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情） │─lay //模块核心目录 │ └─modules //各模块组件 │─layui.js //基础核心库 └─layui.all.js //包含layui.js和所有模块的合并文件
获得 layui 后，将其完整地部署到你的项目目录（或静态资源服务器），你只需要引入下述两个文件：
./layui/css/layui.css ./layui/layui.js
2.3 简单实例
LayUI的使用基本分为两个方面：
**页面元素：**主要是进行页面样式的修改，通过指定的layUI的class进行设置，只需要引入LayUI.css即可使用
**内置模块：**进行页面动态效果功能的展示，通过指定的layUI的相应代码进行书写，需要引入LayUI.js并按照指定格式进行书写
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>开始使用layui</title> <link rel="stylesheet" href="../layui/css/layui.css"> </head> <body> <!-- 你的HTML代码 --> <script src="../layui/layui.js"></script> <script> //一般直接写在一个js文件中 layui.use(['layer', 'form'], function(){ var layer = layui.layer ,form = layui.form; layer.msg('Hello World'); }); </script> </body> </html>
三、LayUI页面元素
layui 提倡返璞归真，遵循于原生态的元素书写规则，所以通常而言，你仍然是在写基本的 HTML 和 CSS 代码，不同的是，在 HTML 结构上及 CSS 定义上需要稍稍遵循一定的规范。
3.1 栅格
为了丰富网页布局，简化 HTML/CSS 代码的耦合，并提升多终端的适配能力，layui 在 2.0 的版本中引进了自己的一套具备响应式能力的栅格系统，将容器进行了 12 等分，预设了 4*12 种 CSS 排列类，它们在移动设备、平板、桌面中/大尺寸四种不同的屏幕下发挥着各自的作用。
- 采用 layui-row 来定义行，如：
2.采用类似 layui-col-md 这样的预设类来定义一组列（column），且放在行（row）内。其中：
变量md 代表的是不同屏幕下的标记（可选值见下文）
变量代表的是该列所占用的12等分数（如6/12），可选值为 1 - 12
如果多个列的“等分数值”总和等于12，则刚好满行排列。如果大于12，多余的列将自动另起一行。
3.列可以同时出现最多四种不同的组合，分别是：xs（超小屏幕，如手机）、sm（小屏幕，如平板）、md（桌面中等屏幕）、lg（桌面大型屏幕），以呈现更加动态灵活的布局。
4.可对列追加类似 layui-col-space5、 layui-col-md-offset3 这样的预设类来定义列的间距和偏移。
5.最后，在列（column）元素中放入你自己的任意元素填充内容，完成布局！
3.1.1 示例
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lCBlw3ED-1686143517856)(LayUI.assets/image-20210220084437679.png)]
<div class="layui-container"> 常规布局（以中型屏幕桌面为例）： <div class="layui-row"> <div class="layui-col-md9"> 你的内容 9/12 </div> <div class="layui-col-md3"> 你的内容 3/12 </div> </div> 移动设备、平板、桌面端的不同表现： <div class="layui-row"> <div class="layui-col-xs6 layui-col-sm6 layui-col-md4"> 移动：6/12 | 平板：6/12 | 桌面：4/12 </div> <div class="layui-col-xs6 layui-col-sm6 layui-col-md4"> 移动：6/12 | 平板：6/12 | 桌面：4/12 </div> <div class="layui-col-xs4 layui-col-sm12 layui-col-md4"> 移动：4/12 | 平板：12/12 | 桌面：4/12 </div> <div class="layui-col-xs4 layui-col-sm7 layui-col-md8"> 移动：4/12 | 平板：7/12 | 桌面：8/12 </div> <div class="layui-col-xs4 layui-col-sm5 layui-col-md4"> 移动：4/12 | 平板：5/12 | 桌面：4/12 </div> </div> </div>
3.2 颜色
视觉疲劳的形成往往是由于颜色过于丰富或过于单一形成的麻木感，而 layui 提供的颜色，清新而不乏深沉，互相柔和，不过分刺激大脑皮层的神经反应，形成越久越耐看的微妙影像。合理搭配，可与各式各样的网站避免违和，从而使你的 Web 平台看上去更为融洽。
3.2.1 常用主色
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PTIVt9RN-1686143517857)(LayUI.assets/image-20210220084729592.png)]
3.2.2 场景色
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l3neaTYF-1686143517858)(LayUI.assets/image-20210220084741838.png)]
3.2.3 极简中性色
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yUWBnEv0-1686143517860)(LayUI.assets/image-20210220084751565.png)]
3.2.4 内置的背景色CSS类
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WrMd6lqD-1686143517862)(LayUI.assets/image-20210220084805171.png)]
3.3 字体图标
layui 的所有图标全部采用字体形式，取材于阿里巴巴矢量图标库（iconfont）。因此你可以把一个 icon 看作是一个普通的文字，这意味着你直接用 css 控制文字属性，如 color、font-size，就可以改变图标的颜色和大小。你可以通过 font-class 或 unicode 来定义不同的图标。
3.3.1 使用
通过对一个内联元素（一般推荐用 i标签）设定 class=“layui-icon”，来定义一个图标，然后对元素加上图标对应的 font-class
例如：
<i class="layui-icon layui-icon-face-smile"></i>
3.3.2 内置图标一览表
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-38tEaJP4-1686143517862)(LayUI.assets/image-20210220085050453.png)]
更多： https://www.layui.com/doc/element/icon.html
3.4 动画
layui 的动画全部采用 CSS3，因此不支持ie8和部分不支持ie9（即ie8/9无动画）
3.4.1 使用
动画的使用非常简单，直接对元素赋值动画特定的 class 类名即可。如：
其中 layui-anim 是必须的，后面跟着的即是不同的动画类 <div class="layui-anim layui-anim-up"></div> 循环动画，追加：layui-anim-loop <div class="layui-anim layui-anim-up layui-anim-loop"></div>
3.4.2 基本动画
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K0THwV4w-1686143517864)(LayUI.assets/image-20210220085253278.png)]
3.5 按钮
layUI通过样式设置，可以将任意元素设置为相应的按钮样式
3.5.1 基本使用
向任意HTML元素设定class=“layui-btn”，建立一个基础按钮。通过追加格式为*layui-btn-{type}*的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。
<button type="button" class="layui-btn">一个标准的按钮</button> <a href="http://www.layui.com" class="layui-btn">一个可跳转的按钮</a>
3.5.2 主题
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CpltfHeq-1686143517866)(LayUI.assets/image-20210220085732830.png)]
| 名称 | 组合 |
| 原始按钮 | class=“layui-btn layui-btn-primary” |
| 默认按钮 | class=“layui-btn” |
| 百搭按钮 | class=“layui-btn layui-btn-normal” |
| 暖色按钮 | class=“layui-btn layui-btn-warm” |
| 警告按钮 | class=“layui-btn layui-btn-danger” |
| 禁用按钮 | class=“layui-btn layui-btn-disabled” |
3.5.3 尺寸
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-51pM9DRb-1686143517867)(LayUI.assets/image-20210220085821417.png)]
| 尺寸 | 组合 |
| 大型按钮 | class=“layui-btn layui-btn-lg” |
| 默认按钮 | class=“layui-btn” |
| 小型按钮 | class=“layui-btn layui-btn-sm” |
| 迷你按钮 | class=“layui-btn layui-btn-xs” |
可以与主题按钮组合使用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0iOlsvXW-1686143517870)(LayUI.assets/image-20210220085919592.png)]
| 尺寸 | 组合 |
| 大型百搭 | class=“layui-btn layui-btn-lg layui-btn-normal” |
| 正常暖色 | class=“layui-btn layui-btn-warm” |
| 小型警告 | class=“layui-btn layui-btn-sm layui-btn-danger” |
| 迷你禁用 | class=“layui-btn layui-btn-xs layui-btn-disabled” |
也可以根据所在块自适应大小
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7IaxKLZZ-1686143517871)(LayUI.assets/image-20210220085942658.png)]
<button type="button" class="layui-btn layui-btn-fluid">流体按钮（最大化适应）</button>
3.5.4 圆角
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aJAOzTM6-1686143517872)(LayUI.assets/image-20210220090506559.png)]
| 主题 | 组合 |
| 原始 | class=“layui-btn layui-btn-radius layui-btn-primary” |
| 默认 | class=“layui-btn layui-btn-radius” |
| 百搭 | class=“layui-btn layui-btn-radius layui-btn-normal” |
| 暖色 | class=“layui-btn layui-btn-radius layui-btn-warm” |
| 警告 | class=“layui-btn layui-btn-radius layui-btn-danger” |
| 禁用 | class=“layui-btn layui-btn-radius layui-btn-disabled” |
3.5.5 图标按钮
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1GvGOvj5-1686143517874)(LayUI.assets/image-20210220090646395.png)]
<button type="button" class="layui-btn"> <i class="layui-icon"></i> 添加 </button> <button type="button" class="layui-btn layui-btn-sm layui-btn-primary"> <i class="layui-icon">ဂ</i> </button>
3.5.6 按钮组
将按钮放入一个*class=“layui-btn-group”*元素中，即可形成按钮组，按钮本身仍然可以随意搭配
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3rcyhUw8-1686143517876)(LayUI.assets/image-20210220090855049.png)]
<div class="layui-btn-group"> <button type="button" class="layui-btn">增加</button> <button type="button" class="layui-btn">编辑</button> <button type="button" class="layui-btn">删除</button> </div> <div class="layui-btn-group"> <button type="button" class="layui-btn layui-btn-sm"> <i class="layui-icon"></i> </button> <button type="button" class="layui-btn layui-btn-sm"> <i class="layui-icon"></i> </button> <button type="button" class="layui-btn layui-btn-sm"> <i class="layui-icon"></i> </button> <button type="button" class="layui-btn layui-btn-sm"> <i class="layui-icon"></i> </button> </div> <div class="layui-btn-group"> <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"> <i class="layui-icon"></i> </button> <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"> <i class="layui-icon"></i> </button> <button type="button" class="layui-btn layui-btn-primary layui-btn-sm"> <i class="layui-icon"></i> </button> </div>
3.5.7 按钮容器
尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SLn4uU5Y-1686143517877)(LayUI.assets/image-20210220091006959.png)]
<div class="layui-btn-container"> <button type="button" class="layui-btn">按钮一</button> <button type="button" class="layui-btn">按钮二</button> <button type="button" class="layui-btn">按钮三</button> </div>
3.6 表单
LayUI通过样式设置与特定的js实现了更具有风格样式的表单，但是依赖于相应的表单模块
3.6.1 简单使用
在一个容器中设定 class=“layui-form” 来标识一个表单元素块，通过规范好的HTML结构及CSS类，来组装成各式各样的表单元素，并通过内置的 form模块 来完成各种交互。
依赖加载模块：form （请注意：如果不加载form模块，select、checkbox、radio等将无法显示，并且无法使用form相关功能）
示例：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yjm2F0Da-1686143517878)(LayUI.assets/image-20210220094149559.png)]
<form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">输入框</label> <div class="layui-input-block"> <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密码框</label> <div class="layui-input-inline"> <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"> </div> <div class="layui-form-mid layui-word-aux">辅助文字</div> </div> <div class="layui-form-item"> <label class="layui-form-label">选择框</label> <div class="layui-input-block"> <select name="city" lay-verify="required"> <option value=""></option> <option value="0">北京</option> <option value="1">上海</option> <option value="2">广州</option> <option value="3">深圳</option> <option value="4">杭州</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">复选框</label> <div class="layui-input-block"> <input type="checkbox" name="like[write]" title="写作"> <input type="checkbox" name="like[read]" title="阅读" checked> <input type="checkbox" name="like[dai]" title="发呆"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">开关</label> <div class="layui-input-block"> <input type="checkbox" name="switch" lay-skin="switch"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">单选框</label> <div class="layui-input-block"> <input type="radio" name="sex" value="男" title="男"> <input type="radio" name="sex" value="女" title="女" checked> </div> </div> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">文本域</label> <div class="layui-input-block"> <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> <script> //Demo layui.use('form', function(){ var form = layui.form; //监听提交 form.on('submit(formDemo)', function(data){ layer.msg(JSON.stringify(data.field)); return false; }); }); </script>
3.6.2 行区块结构
基本的行区块结构，它提供了响应式的支持。但如果你不大喜欢，你可以换成你的结构，但必须要在外层容器中定义class=“layui-form”，form模块才能正常工作。
<div class="layui-form-item"> <label class="layui-form-label">标签区域</label> <div class="layui-input-block"> 原始表单元素区域 </div> </div>
3.6.3 输入框
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UtcL6P2U-1686143517880)(LayUI.assets/image-20210220094351587.png)]
<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
required：注册浏览器所规定的必填字段
lay-verify：注册form模块需要验证的类型
class=“layui-input”：layui.css提供的通用CSS类
3.6.4 下拉选择框
3.6.4.1 默认选择框
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BqzLBWwm-1686143517881)(LayUI.assets/image-20210220094530902.png)]
<select name="city" lay-verify=""> <option value="">请选择一个城市</option> <option value="010">北京</option> <option value="021">上海</option> <option value="0571">杭州</option> </select>
3.6.4.2 分类选择框
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q9gijm72-1686143517882)(LayUI.assets/image-20210220094655219.png)]
<select name="quiz"> <option value="">请选择</option> <optgroup label="城市记忆"> <option value="你工作的第一个城市">你工作的第一个城市？</option> </optgroup> <optgroup label="学生时代"> <option value="你的工号">你的工号？</option> <option value="你最喜欢的老师">你最喜欢的老师？</option> </optgroup> </select>
3.6.4.3 搜索选择框
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SXEEueUe-1686143517885)(LayUI.assets/image-20210220094753884.png)]
以及通过设定属性 lay-search 来开启搜索匹配功能
<select name="city" lay-verify="" lay-search> <option value="010">layer</option> <option value="021">form</option> <option value="0571" selected>layim</option> …… </select>
属性selected可设定默认项
属性disabled开启禁用，select和option标签都支持
3.6.5 复选框
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aQvr6VRy-1686143517886)(LayUI.assets/image-20210220094858296.png)]
默认风格： <input type="checkbox" name="" title="写作" checked> <input type="checkbox" name="" title="发呆"> <input type="checkbox" name="" title="禁用" disabled> 原始风格： <input type="checkbox" name="" title="写作" lay-skin="primary" checked> <input type="checkbox" name="" title="发呆" lay-skin="primary"> <input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）
属性checked可设定默认选中
属性lay-skin可设置复选框的风格
设置*value=“1”*可自定义值，否则选中时返回的就是默认的on
3.6.6 开关
其实就是checkbox复选框的“变种”，通过设定 lay-skin=“switch” 形成了开关风格
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YEkhwHCe-1686143517888)(LayUI.assets/image-20210220095013155.png)]
<input type="checkbox" name="xxx" lay-skin="switch"> <input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked> <input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭"> <input type="checkbox" name="aaa" lay-skin="switch" disabled>
属性checked可设定默认开
属性disabled开启禁用
属性lay-text可自定义开关两种状态的文本
设置*value=“1”*可自定义值，否则选中时返回的就是默认的on
3.6.7 单选框
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mfwjVLqx-1686143517889)(LayUI.assets/image-20210220095117539.png)]
<input type="radio" name="sex" value="nan" title="男"> <input type="radio" name="sex" value="nv" title="女" checked> <input type="radio" name="sex" value="" title="中性" disabled>
属性title可自定义文本
属性disabled开启禁用
设置*value=“xxx”*可自定义值，否则选中时返回的就是默认的on
3.6.8 文本域
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8my6ge2B-1686143517891)(LayUI.assets/image-20210220095205992.png)]
<textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>
3.6.9 表单方框风格
通过追加 layui-form-pane 的class，来设定表单的方框风格
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vtLBtvhP-1686143517895)(LayUI.assets/image-20210220095318243.png)]
<form class="layui-form layui-form-pane" action=""> 内部结构都一样，值得注意的是 复选框/开关/单选框 这些组合在该风格下需要额外添加 pane属性（否则会看起来比较别扭），如： <div class="layui-form-item" pane> <label class="layui-form-label">单选框</label> <div class="layui-input-block"> <input type="radio" name="sex" value="男" title="男"> <input type="radio" name="sex" value="女" title="女" checked> </div> </div> </form>
3.7 导航
导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边，是整个网页画龙点晴般的存在。面包屑结构简单，支持自定义分隔符。千万不要忘了加载 element模块。
3.7.1 水平导航
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HpVlshMe-1686143517897)(LayUI.assets/image-20210220095630462.png)]
<ul class="layui-nav" lay-filter=""> <li class="layui-nav-item"><a href="">最新活动</a></li> <li class="layui-nav-item layui-this"><a href="">产品</a></li> <li class="layui-nav-item"><a href="">大数据</a></li> <li class="layui-nav-item"> <a href="javascript:;">解决方案</a> <dl class="layui-nav-child"> <!-- 二级菜单 --> <dd><a href="">移动模块</a></dd> <dd><a href="">后台模版</a></dd> <dd><a href="">电商平台</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">社区</a></li> </ul> <script> //注意：导航 依赖 element 模块，否则无法进行功能性操作 layui.use('element', function(){ var element = layui.element; //… }); </script>
3.7.2 垂直/侧边导航
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A83l2u75-1686143517900)(LayUI.assets/image-20210220095706408.png)]
<ul class="layui-nav layui-nav-tree" lay-filter="test"> <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> --> <li class="layui-nav-item layui-nav-itemed"> <a href="javascript:;">默认展开</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">选项1</a></dd> <dd><a href="javascript:;">选项2</a></dd> <dd><a href="">跳转</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">解决方案</a> <dl class="layui-nav-child"> <dd><a href="">移动模块</a></dd> <dd><a href="">后台模版</a></dd> <dd><a href="">电商平台</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">产品</a></li> <li class="layui-nav-item"><a href="">大数据</a></li> </ul> <script> //注意：导航 依赖 element 模块，否则无法进行功能性操作 layui.use('element', function(){ var element = layui.element; //… }); </script>
3.7.3 面包屑导航
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k3XCk5Dt-1686143517902)(LayUI.assets/image-20210220095826267.png)]
<span class="layui-breadcrumb"> <a href="">首页</a> <a href="">国际新闻</a> <a href="">亚太地区</a> <a><cite>正文</cite></a> </span> <script> //注意：导航 依赖 element 模块，否则无法进行功能性操作 layui.use('element', function(){ var element = layui.element; //… }); </script>
可以通过设置属性 lay-separator=“-” 来自定义分隔符
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SbfjLA7L-1686143517904)(LayUI.assets/image-20210220100206026.png)]
<span class="layui-breadcrumb" lay-separator="-"> <a href="">首页</a> <a href="">国际新闻</a> <a href="">亚太地区</a> <a><cite>正文</cite></a> </span> <script> //注意：导航 依赖 element 模块，否则无法进行功能性操作 layui.use('element', function(){ var element = layui.element; //… }); </script>
3.8 Tab选项卡
Tab选项卡提供多套风格，支持响应式，支持删除选项卡等功能。
依赖加载组件：element （请注意：必须加载element模块，相关功能才能正常使用）
3.8.1 默认Tab选项卡
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JrerId8l-1686143517906)(LayUI.assets/image-20210220100344934.png)]
<div class="layui-tab"> <ul class="layui-tab-title"> <li class="layui-this">网站设置</li> <li>用户管理</li> <li>权限分配</li> <li>商品管理</li> <li>订单管理</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 class="layui-tab-item">内容4</div> <div class="layui-tab-item">内容5</div> </div> </div> <script> //注意：选项卡 依赖 element 模块，否则无法进行功能性操作 layui.use('element', function(){ var element = layui.element; //… }); </script>
3.8.2 Tab简洁风格
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DQtb6Ash-1686143517907)(LayUI.assets/image-20210220100429785.png)]
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief"> <ul class="layui-tab-title"> <li class="layui-this">网站设置</li> <li>用户管理</li> <li>权限分配</li> <li>商品管理</li> <li>订单管理</li> </ul> <div class="layui-tab-content"></div> </div> <script> //注意：选项卡 依赖 element 模块，否则无法进行功能性操作 layui.use('element', function(){ var element = layui.element; //… }); </script>
3.8.3 Tab卡片风格
通过追加class：layui-tab-card来设定卡片风格
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mKZR3439-1686143517910)(LayUI.assets/image-20210220101939554.png)]
<div class="layui-tab layui-tab-card"> <ul class="layui-tab-title"> <li class="layui-this">网站设置</li> <li>用户管理</li> <li>权限分配</li> <li>商品管理</li> <li>订单管理</li> </ul> <div class="layui-tab-content" style="height: 100px;"> <div class="layui-tab-item layui-show">1</div> <div class="layui-tab-item">2</div> <div class="layui-tab-item">3</div> <div class="layui-tab-item">4</div> <div class="layui-tab-item">5</div> <div class="layui-tab-item">6</div> </div> </div> <script> //注意：选项卡 依赖 element 模块，否则无法进行功能性操作 layui.use('element', function(){ var element = layui.element; //… }); </script>
3.8.4 带删除的Tab
你可以对父层容器设置属性 lay-allowClose=“true” 来允许Tab选项卡被删除
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NIwTk9WB-1686143517913)(LayUI.assets/image-20210220111550729.png)]
<div class="layui-tab" lay-allowClose="true"> <ul class="layui-tab-title"> <li class="layui-this">网站设置</li> <li>用户基本管理</li> <li>权限分配</li> <li>全部历史商品管理文字长一点试试</li> <li>订单管理</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 class="layui-tab-item">4</div> <div class="layui-tab-item">5</div> <div class="layui-tab-item">6</div> </div> </div> <script> //注意：选项卡 依赖 element 模块，否则无法进行功能性操作 layui.use('element', function(){ var element = layui.element; //… }); </script>
3.9 进度条
进度条可应用于许多业务场景，如任务完成进度、loading等等，是一种较为直观的表达元素
依赖加载组件：element
3.9.1 常规用法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ug6Qu95Y-1686143517914)(LayUI.assets/image-20210220111844383.png)]
<div class="layui-progress"> <div class="layui-progress-bar" lay-percent="10%"></div> </div> <script> //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作 layui.use('element', function(){ var element = layui.element; }); </script>
属性 lay-percent ：代表进度条的初始百分比
3.9.2 显示进度比文本
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lpzEEX1D-1686143517916)(LayUI.assets/image-20210220112052378.png)]
<div class="layui-progress" lay-showPercent="true"> <div class="layui-progress-bar layui-bg-red" lay-percent="1/3"></div> </div> <div class="layui-progress" lay-showPercent="yes"> <div class="layui-progress-bar layui-bg-red" lay-percent="30%"></div> </div> <div class="layui-progress layui-progress-big" lay-showPercent="yes"> <div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div> </div> <script> //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作 layui.use('element', function(){ var element = layui.element; }); </script>
注意：默认情况下不会显示百分比文本，如果你想开启，对属性lay-showPercent设置任意值即可，如：yes。但如果不想显示，千万别设置no或者false，直接剔除该属性即可。
3.9.3 大号进度条
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oOPESjmG-1686143517919)(LayUI.assets/image-20210220112151445.png)]
<div class="layui-progress layui-progress-big"> <div class="layui-progress-bar" lay-percent="20%"></div> </div> <div class="layui-progress layui-progress-big"> <div class="layui-progress-bar layui-bg-orange" lay-percent="50%"></div> </div> <div class="layui-progress layui-progress-big" lay-showPercent="true"> <div class="layui-progress-bar layui-bg-blue" lay-percent="80%"></div> </div> <script> //注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作 layui.use('element', function(){ var element = layui.element; }); </script>
默认风格的进度条的百分比如果开启，会在右上角显示，而大号进度条则会在内部显示。
3.10 面板
一般的面板通常是指一个独立的容器，而折叠面板则能有效地节省页面的可视面积，非常适合应用于：QA说明、帮助文档等
依赖加载组件：element
3.10.1 卡片面板
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Tz33DKrr-1686143517921)(LayUI.assets/image-20210220112400179.png)]
<div class="layui-card"> <div class="layui-card-header">卡片面板</div> <div class="layui-card-body"> 卡片式面板面板通常用于非白色背景色的主体内<br> 从而映衬出边框投影 </div> </div>
如果你的网页采用的是默认的白色背景，不建议使用卡片面板。
3.10.2 折叠面板
通过对内容元素设置class为 layui-show 来选择性初始展开某一个面板，element 模块会自动呈现状态图标。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dJdROJBB-1686143517922)(LayUI.assets/image-20210220112455934.png)]
<div class="layui-collapse"> <div class="layui-colla-item"> <h2 class="layui-colla-title">杜甫</h2> <div class="layui-colla-content layui-show">内容区域</div> </div> <div class="layui-colla-item"> <h2 class="layui-colla-title">李清照</h2> <div class="layui-colla-content layui-show">内容区域</div> </div> <div class="layui-colla-item"> <h2 class="layui-colla-title">鲁迅</h2> <div class="layui-colla-content layui-show">内容区域</div> </div> </div> <script> //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作 layui.use('element', function(){ var element = layui.element; //… }); </script>
3.10.3 手风琴面板
在折叠面板的父容器设置属性 lay-accordion 来开启手风琴，那么在进行折叠操作时，始终只会展现当前的面板。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gWlVY5QH-1686143517924)(LayUI.assets/image-20210220112558207.png)]
<div class="layui-collapse" lay-accordion> <div class="layui-colla-item"> <h2 class="layui-colla-title">杜甫</h2> <div class="layui-colla-content layui-show">内容区域</div> </div> <div class="layui-colla-item"> <h2 class="layui-colla-title">李清照</h2> <div class="layui-colla-content layui-show">内容区域</div> </div> <div class="layui-colla-item"> <h2 class="layui-colla-title">鲁迅</h2> <div class="layui-colla-content layui-show">内容区域</div> </div> </div> <script> //注意：折叠面板 依赖 element 模块，否则无法进行功能性操作 layui.use('element', function(){ var element = layui.element; //… }); </script>
3.11 静态表格
通过内置的自定义属性对其进行风格的多样化设定。
3.11.1 常规用法
通过 layui-table 将表格样式修改
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZdKaNJZf-1686143517926)(LayUI.assets/image-20210220112754506.png)]
<table class="layui-table"> <colgroup> <col width="150"> <col width="200"> <col> </colgroup> <thead> <tr> <th>昵称</th> <th>加入时间</th> <th>签名</th> </tr> </thead> <tbody> <tr> <td>贤心</td> <td>2016-11-29</td> <td>人生就像是一场修行</td> </tr> <tr> <td>许闲心</td> <td>2016-11-28</td> <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td> </tr> </tbody> </table>
3.11.2 基础属性
| 属性名 | 属性值 | 备注 |
| lay-even | 无 | 用于开启 隔行 背景，可与其它属性一起使用 |
| lay-skin=“属性值” | line （行边框风格） row （列边框风格） nob （无边框风格） | 若使用默认风格不设置该属性即可 |
| lay-size=“属性值” | sm （小尺寸） lg （大尺寸） | 若使用默认尺寸不设置该属性即可 |
将所需要的基础属性写在table标签上即可，如（一个带有隔行背景，且行边框风格的大尺寸表格）：
<table lay-even lay-skin="line" lay-size="lg"> … </table>
3.11.3 表格尺寸
通过 lay-size=“sm” 或 *lay-size=“lg”*进行尺寸的切换
<table class="layui-table" lay-size="sm"> 小尺寸表格（内部结构参见右侧目录“常规用法”） </table> <table class="layui-table" lay-size="lg"> 大尺寸表格（内部结构参见右侧目录“常规用法”） </table>
3.12 徽章
徽章是一个修饰性的元素，它们本身细小而并不显眼，但掺杂在其它元素中就显得尤为突出了。页面往往因徽章的陪衬，而显得十分和谐。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6JoGD1Xj-1686143517928)(LayUI.assets/image-20210220113132775.png)]
小圆点，通过 layui-badge-dot 来定义，里面不能加文字 <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> 椭圆体，通过 layui-badge 来定义。事实上我们把这个视作为主要使用方式 <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> 边框体，通过 layui-badge-rim 来定义 <span class="layui-badge-rim">6</span> <span class="layui-badge-rim">Hot</span>
LayUI前框框架普及版（二）https://developer.aliyun.com/article/1433690
