Layui组件文档查询

所有组件模块

layer-弹出层组件,支持弹窗、提示、询问 form-表单组件,实现表单渲染、校验、提交 table-数据表格,支持分页、排序、筛选 upload-文件上传组件,图片/文件上传
laydate-日期与时间选择器 laypage-分页组件,通用分页渲染 laytpl-模板引擎,前端数据渲染 layui.use-模块加载器,按需加载组件
element-常用元素操作,选项卡、进度条、面包屑 carousel-轮播组件,图片轮播展示 rate-星级评分组件 slider-滑块组件,拖动取值
colorpicker-颜色选择器 tree-树形组件,菜单、分类树 transfer-穿梭框组件,左右数据移动 dropdown-下拉菜单组件
contextmenu-右键菜单 flow-图片懒加载 util-工具集,时间格式化、防抖节流 jquery-Layui内置jQuery
layedit-富文本编辑器 code-代码高亮显示 notice-消息通知组件 tab-选项卡切换容器
button-按钮样式与交互 badge-徽章小红点 switch-开关组件 radio-单选框美化
checkbox-复选框美化 select-下拉选择框 menu-侧边导航菜单 breadcrumb-面包屑导航
progress-进度条 tooltip-悬浮提示 alert-简易提示弹窗(layer封装) loading-加载动画遮罩
confirm-确认询问弹窗 prompt-输入弹窗 tips-悬浮提示框 photos-图片查看器
layui.css-基础样式库,栅格、图标 icon-内置字体图标库 grid-栅格布局系统 animate-内置css动画
storage-本地存储封装 axios-网络请求封装(layui ajax) sort-表格拖拽排序 filter-表格数据筛选
export-表格导出Excel print-页面打印工具 resize-窗口拖拽调整 maxmin-窗口最大化最小化

使用说明 & 常用代码示例

1、页面功能:上方输入框搜索Layui组件名称,模糊筛选表格内容;支持回车搜索。

2、基础引入模板:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src@2.8.18/dist/css/layui.css"> <script src="https://cdn.jsdelivr.net/npm/layui-src@2.8.18/dist/layui.js"></script>

3、组件加载基础写法:

layui.use(['layer','form'], function(){ var layer = layui.layer; var form = layui.form; //弹出提示 layer.msg('Hello Layui'); })

4、layer弹窗最简示例

layer.alert('提示内容'); layer.confirm('确定执行操作?',function(index){ layer.close(index); });

5、表格基础初始化示例

layui.use('table', function(){ var table = layui.table; table.render({ elem: '#demo', url:'/api/list', page:true }); });

提示:Layui采用模块化机制,所有组件必须通过 layui.use 加载;组件名称区分英文小写;2.8版本相比旧版有部分API变更。