29.2K Star超强!Layui极简模块化UI信手拈来Layui是一套开源的前端UI框架，它采用模块化的开发模式，使
站长
· 阅读数 22
在前端开发的世界里，Layui以其简洁优雅的界面和强大的功能，赢得了许多开发者的青睐。如果你正在寻找一个易于上手且功能丰富的前端框架，那么Layui无疑是一个不错的选择。本文将带你快速入门Layui，让你的页面所需呈现的元素与交互信手拈来。
简介
Layui是一套开源的前端UI框架，它采用模块化的开发模式，使得开发者可以根据项目需求，灵活地引入所需的模块。layui的界面设计简洁美观，同时支持响应式布局，能够适配各种屏幕尺寸。
为什么选择layui？
-
轻量级：layui的体积小，加载速度快。
-
模块化：按需加载，避免冗余。
-
美观性：提供多种美观的组件和主题。
-
易用性：文档齐全，社区活跃，易于学习和使用。
开始使用
1. 获取Layui组件
🌕 官网首页(layui.dev/)或更新日志页面(ht…
下载后的目录结构如下:
layui/
├─css
│ └─layui.css # 核心样式库
└─layui.js # 核心模块库
🌕 第三方 CDN 方式引入
<!-- 引入 layui.css -->
<link href="https://cdn.staticfile.net/layui/2.9.4/css/layui.css" rel="stylesheet">
<!-- 引入 layui.js -->
<script src="https://cdn.staticfile.net/layui/2.9.4/layui.js"></script>
2. 创建HTML文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Quick Start - Layui</title>
<link href="https://cdn.staticfile.net/layui/2.9.4/css/layui.css" rel="stylesheet">
</head>
<body>
<!-- HTML Content -->
<script src="https://cdn.staticfile.net/layui/2.9.4/layui.js"></script>
<script>
// Usage
layui.use(function(){
var layer = layui.layer;
// Welcome
layer.msg('Hello Layui.', {icon: 6});
});
</script>
</body>
</html>
至此，我们已经学会了Layui的简单使用！
基础组件
按钮组件
向任意 HTML 标签设定class="layui-btn" 建立一个基础按钮。通过追加格式为layui-btn-{type}的 class 来定义其它按钮风格。内置的按钮 class 可以进行任意组合，从而形成更多种按钮风格。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>按钮</title>
<link href="https://cdn.staticfile.net/layui/2.9.4/css/layui.css" rel="stylesheet">
<style>
.title {
margin-bottom: 20px;
margin-top: 20px
}
</style>
</head>
<body>
<div style="margin-top:20px;margin-left:20px">
<ul class="layui-timeline">
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h2 class="layui-timeline-title">按钮主题</h2>
<div class="layui-btn-container">
<button type="button" class="layui-btn">默认按钮</button>
<button type="button" class="layui-btn layui-bg-blue">蓝色按钮</button>
<button type="button" class="layui-btn layui-bg-orange">橙色按钮</button>
<button type="button" class="layui-btn layui-bg-red">红色按钮</button>
<button type="button" class="layui-btn layui-bg-purple">紫色按钮</button>
<button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>
</div>
<div class="layui-btn-container">
<button class="layui-btn layui-btn-primary layui-border-green">主色按钮</button>
<button class="layui-btn layui-btn-primary layui-border-blue">蓝色按钮</button>
<button class="layui-btn layui-btn-primary layui-border-orange">橙色按钮</button>
<button class="layui-btn layui-btn-primary layui-border-red">红色按钮</button>
<button class="layui-btn layui-btn-primary layui-border-purple">紫色按钮</button>
<button class="layui-btn layui-btn-primary layui-border">普通按钮</button>
</div>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h2 class="layui-timeline-title">按钮尺寸</h2>
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-lg">大型按钮</button>
<button type="button" class="layui-btn">默认按钮</button>
<button type="button" class="layui-btn layui-btn-sm">小型按钮</button>
<button type="button" class="layui-btn layui-btn-xs">迷你按钮</button>
</div>
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-lg layui-btn-normal">大型按钮</button>
<button type="button" class="layui-btn layui-btn-normal">默认按钮</button>
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal">小型按钮</button>
<button type="button" class="layui-btn layui-btn-xs layui-btn-normal">迷你按钮</button>
</div>
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-primary layui-btn-lg">大型按钮</button>
<button type="button" class="layui-btn layui-btn-primary">默认按钮</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">小型按钮</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-xs">迷你按钮</button>
</div>
<div style="width: 380px;">
<button type="button" class="layui-btn layui-btn-fluid">流体按钮（宽度自适应）</button>
</div>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h2 class="layui-timeline-title">按钮圆角</h2>
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>
<button type="button" class="layui-btn layui-btn-radius">默认按钮</button>
<button type="button" class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>
<button type="button" class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>
<button type="button" class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
<button type="button" class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>
</div>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h2 class="layui-timeline-title">按钮图标</h2>
<div class="layui-btn-container">
<button type="button" class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius">大型加圆角</button>
<a href="/" class="layui-btn" target="_blank">跳转的按钮</a>
<button type="button" class="layui-btn layui-btn-sm layui-btn-normal">
<i class="layui-icon layui-icon-delete"></i> 删除
</button>
<button type="button" class="layui-btn layui-btn-xs layui-btn-disabled">
<i class="layui-icon layui-icon-share"></i> 分享
</button>
</div>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h2 class="layui-timeline-title">按钮组合</h2>
<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 layui-icon-add-1"></i>
</button>
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon layui-icon-edit"></i>
</button>
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon layui-icon-delete"></i>
</button>
<button type="button" class="layui-btn layui-btn-sm">
<i class="layui-icon layui-icon-right"></i>
</button>
</div>
<div class="layui-btn-group">
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">文字</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon layui-icon-add-1"></i>
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon layui-icon-edit"></i>
</button>
<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
<i class="layui-icon layui-icon-delete"></i>
</button>
</div>
</div>
</li>
<li class="layui-timeline-item">
<i class="layui-icon layui-timeline-axis"></i>
<div class="layui-timeline-content layui-text">
<h2 class="layui-timeline-title">按钮容器</h2>
<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>
<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>
</div>
</li>
</ul>
</div>
</body>
</html>
按钮组件样式效果截图如下：
表格组件
表格组件 table 是 Layui 中使用率极高的一个组件，它以表格的承载方式对数据进行渲染、重载、排序、统计、分页等等一系列交互操作，并提供了丰富的 API 用于扩展，基本涵盖了日常业务所涉及的大部分需求。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表格</title>
<link href="https://cdn.staticfile.net/layui/2.9.4/css/layui.css" rel="stylesheet">
</head>
<body>
<p>默认风格:</p>
<table class="layui-table">
<colgroup>
<col width="150">
<col width="150">
<col>
</colgroup>
<thead>
<tr>
<th>人物</th>
<th>民族</th>
<th>格言</th>
</tr>
</thead>
<tbody>
<tr>
<td>孔子</td>
<td>华夏</td>
<td>有朋自远方来，不亦乐乎</td>
</tr>
<tr>
<td>孟子</td>
<td>华夏</td>
<td>穷则独善其身，达则兼济天下</td>
</tr>
</tbody>
</table>
<p>行边框表格:</p>
<table class="layui-table" lay-skin="line">
<colgroup>
<col width="150">
<col width="150">
<col>
</colgroup>
<thead>
<tr>
<th>人物</th>
<th>民族</th>
<th>格言</th>
</tr>
</thead>
<tbody>
<tr>
<td>孔子</td>
<td>华夏</td>
<td>有朋自远方来，不亦乐乎</td>
</tr>
<tr>
<td>孟子</td>
<td>华夏</td>
<td>穷则独善其身，达则兼济天下</td>
</tr>
</tbody>
</table>
</body>
</html>
表格组件样式效果截图如下：
表单组件
表单组件form是包含输入框、选择框、复选框、开关、单选框等表单项组件的集合，主要用于对表单域进行各类动态化渲染和相关的交互操作。form是 Layui 最常用的组件之一。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表单组件</title>
<link href="https://cdn.staticfile.net/layui/2.9.4/css/layui.css" rel="stylesheet">
</head>
<body>
<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="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">验证手机号</label>
<div class="layui-input-inline layui-input-wrap">
<input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" lay-reqtext="请填写手机号" lay-affix="clear" class="layui-input demo-phone">
</div>
<div class="layui-form-mid" style="padding: 0!important;">
<button type="button" class="layui-btn layui-btn-primary" lay-on="get-vercode">获取验证码</button>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">验证码</label>
<div class="layui-input-inline layui-input-wrap">
<input type="text" name="vercode" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">验证邮箱</label>
<div class="layui-input-inline">
<input type="text" name="email" lay-verify="email" placeholder="有值时才校验" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">验证日期</label>
<div class="layui-input-inline layui-input-wrap">
<div class="layui-input-prefix">
<i class="layui-icon layui-icon-date"></i>
</div>
<input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">自定义验证</label>
<div class="layui-input-inline layui-input-wrap">
<input type="password" name="password" lay-verify="required|pass" placeholder="请输入" autocomplete="off" lay-affix="eye" class="layui-input">
</div>
<div class="layui-form-mid layui-text-em">6 到 12 位字符</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">数字输入框</label>
<div class="layui-input-inline" style="width: 100px;">
<input type="number" name="price_min" placeholder="" autocomplete="off" class="layui-input" min="0" step="1" lay-affix="number">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline" style="width: 100px;">
<input type="number" name="price_max" placeholder="" autocomplete="off" class="layui-input" min="0" step="1" lay-affix="number">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单行选择框</label>
<div class="layui-input-block">
<select name="interest" lay-filter="aihao">
<option value=""></option>
<option value="0">写作</option>
<option value="1" selected>阅读</option>
<option value="2">游戏</option>
<option value="3">音乐</option>
<option value="4">旅行</option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">分组选择框</label>
<div class="layui-input-inline">
<select name="quiz">
<option value="">请选择问题</option>
<optgroup label="城市记忆">
<option value="你工作的第一个城市">你工作的第一个城市</option>
</optgroup>
<optgroup label="学生时代">
<option value="你的工号">你的工号</option>
<option value="你最喜欢的老师">你最喜欢的老师</option>
</optgroup>
</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">搜索选择框</label>
<div class="layui-input-inline">
<select name="modules" lay-verify="required" lay-search>
<option value="">直接选择或搜索选择</option>
<option value="1">layer</option>
<option value="2">form</option>
<option value="3">layim</option>
<option value="4">element</option>
<option value="5">laytpl</option>
<option value="6">upload</option>
<option value="7">laydate</option>
<option value="8">laypage</option>
<option value="9">flow</option>
<option value="10">util</option>
<option value="11">code</option>
<option value="12">tree</option>
<option value="13">layedit</option>
<option value="14">nav</option>
<option value="15">tab</option>
<option value="16">table</option>
<option value="17">select</option>
<option value="18">checkbox</option>
<option value="19">switch</option>
<option value="20">radio</option>
</select>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">联动选择框</label>
<div class="layui-input-inline">
<select name="quiz1">
<option value="">请选择省</option>
<option value="浙江" selected>浙江省</option>
<option value="你的工号">江西省</option>
<option value="你最喜欢的老师">福建省</option>
</select>
</div>
<div class="layui-input-inline">
<select name="quiz2">
<option value="">请选择市</option>
<option value="杭州">杭州</option>
<option value="宁波" disabled>宁波</option>
<option value="温州">温州</option>
<option value="温州">台州</option>
<option value="温州">绍兴</option>
</select>
</div>
<div class="layui-input-inline">
<select name="quiz3">
<option value="">请选择县/区</option>
<option value="西湖区">西湖区</option>
<option value="余杭区">余杭区</option>
<option value="拱墅区">临安市</option>
</select>
</div>
<div class="layui-form-mid layui-text-em">
<i class="layui-icon layui-icon-tips" lay-tips="{
content: '此处只是演示联动排版，并未做联动交互',
margin: '0 0 0 -10px'
}"></i>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="arr[0]" title="选项1">
<input type="checkbox" name="arr[1]" title="选项2" checked>
<input type="checkbox" name="arr[2]" title="选项3">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">标签框</label>
<div class="layui-input-block">
<input type="checkbox" name="arr1[0]" lay-skin="tag" title="选项1" checked>
<input type="checkbox" name="arr1[1]" lay-skin="tag" title="选项2">
<input type="checkbox" name="arr1[2]" lay-skin="tag" title="选项3">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">开关</label>
<div class="layui-input-block">
<input type="checkbox" name="open" lay-skin="switch" lay-filter="switchTest" title="ON|OFF">
</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="男" checked>
<input type="radio" name="sex" value="女" title="女">
<input type="radio" name="sex" value="禁" title="禁用" disabled>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">普通文本域</label>
<div class="layui-input-block">
<textarea placeholder="请输入内容" class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit lay-filter="demo1">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="https://cdn.staticfile.net/layui/2.9.4/layui.js"></script>
<script>
layui.use(['form', 'laydate', 'util'], function(){
var form = layui.form;
var layer = layui.layer;
var laydate = layui.laydate;
var util = layui.util;
// 自定义验证规则
form.verify({
pass: function(value) {
if (!/(.+){6,12}$/.test(value)) {
return '密码必须 6 到 12 位';
}
}
});
// 指定开关事件
form.on('switch(switchTest)', function(data){
layer.msg('开关 checked：'+ (this.checked ? 'true' : 'false'), {
offset: '6px'
});
layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是 ON|OFF', data.othis)
});
// 提交事件
form.on('submit(demo1)', function(data){
var field = data.field; // 获取表单字段值
// 显示填写结果，仅作演示用
layer.alert(JSON.stringify(field), {
title: '当前填写的字段值'
});
// 此处可执行 Ajax 等操作
// …
return false; // 阻止默认 form 跳转
});
// 日期
laydate.render({
elem: '#date'
});
// 普通事件
util.on('lay-on', {
// 获取验证码
"get-vercode": function(othis){
var isvalid = form.validate('.demo-phone'); // 主动触发验证，v2.7.0 新增
// 验证通过
if(isvalid){
layer.msg('手机号规则验证通过');
// 此处可继续书写「发送验证码」等后续逻辑
// …
}
}
});
});
</script>
</body>
</html>
表单组件样式效果截图如下：
总结
Layui作为一个功能全面的前端UI框架，非常适合快速开发响应式的网页应用。本文只是介绍了layui的一些基础用法，更多的组件和高级用法等待你去探索和学习。希望本文能帮助你快速入门layui，打造出更加优秀的网页应用。
推荐阅读
转载自:https://juejin.cn/post/7384808872488108047