- 开始使用
- 需要加入文件即可
- layui
- css
- layui.css
- layui.js
- css
- layui
- 需要加入文件即可
- 布局
- 栅格
- 放在layui-containeer下面
- layui-row 定义行,定义的行在小屏幕上会堆叠,在桌面上会并列,通过css3的媒体查询实现
- layui-col-md* 定义列
- md不同屏幕的大小,见下方
- *代表该列占用的12等分比如(6/12) 可选值为1-12
- 如果多个列的千分数值总和等于12,则刚好满行排列,如果>12,多余的列将自动另起一行
- 列可以出现最多四种不同的组合,分别是xs,手机、sm 平板、md桌面中等、lg 桌面大型
- 可追加类,layui-col-space5、layui-col-md-offset3 来定义列的间距和偏移
- layui-col-md-offset* 定义列偏移,只会在桌面屏幕下有效,当低于桌面屏幕的临界值时,就会堆叠
- *代表列向右偏移占据的列数,可选为1-12
- layui-col-md* 定义列
- layui-col-space* 定义列间距
- *代表了间距大小
- 1 3 5 8 19 12 15 18 20 22 28 30
- *代表了间距大小
- 栅格嵌套
- 在layui-col-md*中插入一个行元素(layui-row)即可完成嵌套
- 后台布局
- 栅格
- 基本组件
- 按钮
- 主题
- 原始 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" 灰色
- 尺寸
- 大型 class="layui-btn layui-btn-lg" 43
- 默认 class="layui-btn" 37
- 小型 class="layui-btn layui-btn-sm" 30
- 迷你 class="layui-btn layui-btn-xs" 22
- 类可以一起用
- 自适应
- <button class="layui-btn layui-btn-fluid">流体按钮(最大化适应)</button>
- 圆角
- layui-btn-radius
- 大型百搭圆角按钮 class="layui-btn layui-btn-lg layui-btn-radius layui-btn-normal"
- 按钮组
<div class="layui-btn-group">
<button class="layui-btn">增加</button>
<button class="layui-btn">编辑</button>
<button class="layui-btn">删除</button>
</div>- class="layui-btn-group"
- 按钮组
- 用于在按钮太多时,排布按钮
- class="layui-btn-container"
- 主题
- 表单
- class="layui-form"标识一个表单元素块
- class="layui-form-item"标识一个表单内元素项
- 输入框
<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类
- 下拉框
<select name="city" lay-verify="">
<option value="">请选择一个城市</option>
<option value="010">北京</option>
<option value="021">上海</option>
<option value="0571">杭州</option>
</select>- option为空用于占坑,可自定义文本
- option 加上 selected 设定默认选中
- option 加上 disabled 设定禁用
- option可放在标签,optgroup下分组,用属性label 标识分组名
- select 加上 lay-search 开启搜索匹配功能
- 复选框
默认风格:
<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可设置复选框的风格 primary
- 设置value="1"可自定义值,否则选中时返回的就是默认的on
- 开关
<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>- checkbox变种,lay-skin="switch"即可
- lay-text="开|关”可以切换开关显示文本
- disabled开启禁用
- 设置value="1"可自定义值,否则选中时返回的就是默认的on
- 单选框
<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
- 文本域
<textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>- class="layui-textarea":通用css类
- 组装行内表单
<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="text" name="price_min" placeholder="¥" autocomplete="off" class="layui-input">
</div>
<div class="layui-form-mid">-</div>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="price_max" placeholder="¥" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">密码</label>
<div class="layui-input-inline" style="width: 100px;">
<input type="password" name="" autocomplete="off" class="layui-input">
</div>
</div>
</div>- class="layui-inline":定义外层行内
- class="layui-input-inline":定义内层行内
- 行内使标签显示在一行
- lay-ignore忽略美化
- 导航
- 需要加载element模块,来完成交互操作
- layui.use('element',function(){var element=layui.element;});//js代码
- 水平导航
<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>- 由无序列表实现
- class = layui-nav 表明列表 ul
- class= layui-nav-item 表明列表项 li
- class= layui-nav-child 表明列表项下的二级菜单 dl
- 二级菜单的菜单项 dd
- 导航其它元素
- layui-badge 徽章如等级
- layui-badge-dot 红点如消息
- <img src="图片地址" class="layui-nav-img"> 图片导航
- 主题
- 水平主题
- layui-bg-cyan(藏青)、layui-bg-molv(墨绿)、layui-bg-blue(艳蓝)
- 垂直主题
- ayui-bg-cyan(藏青)
- 水平主题
- 垂直、侧边导航
<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>- 垂直有展开的交互
- 侧边在垂直的基础上贴边
- 水平、垂直、侧边三个导航的HTML结构是完全一样的,不同的是:
- 垂直导航需要追加class:layui-nav-tree
- 侧边导航需要追加class:layui-nav-tree layui-nav-side
- 面包屑导航
<span class="layui-breadcrumb">
<a href="">首页</a>
<a href="">国际新闻</a>
<a href="">亚太地区</a>
<a><cite>正文</cite></a>
</span>- layui-breadcrumb
- 默认分隔为/,用lay-separator="-",改成-
- 需要加载element模块,来完成交互操作
- 选项卡
<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>- 需要加载element模块,否则无法操作
- layui.use('element',function(){var element=layui.element;});//js代码
- Tab选项卡提供多套风格,支持响应式,支持删除选项卡等功能
- layui-tab 表明选项卡 div
- layui-tab-title 表明一个选项 ul
- layui-this 表示当前页面
- layui-tab-content (div) 中的各个layui-tab-item (div) 对应ul中各选项卡的内容
- 如果存在 layui-tab-item 的内容区域,在切换时自动定位到对应内容。如果不存在内容区域,则不会定位到对应内容。你通常需要设置过滤器
- 主题
- layui-tab-brief 简洁
- layui-tab-card 卡片
- layui-allowClose="true" 来允许Tab选项卡被删
- ID定位
- 给选项卡设置lay-id="xxx"
- 需要加载element模块,否则无法操作
- 进度条
<div class="layui-progress">
<div class="layui-progress-bar" lay-percent="10%"></div>
</div>- 也需要element模块
- layui-progress 表明进度条父级
- lay-showPercent="true"显示文本
- layui-progress-big 表示大进度条
- layui-progress-bar 表明进度条
- lay-percent="10%" 进度条初始百分比
- layui-bg-xxx 表示颜色
- 面板
- 卡片面板
<div class="layui-card">
<div class="layui-card-header">卡片面板</div>
<div class="layui-card-body">
卡片式面板面板通常用于非白色背景色的主体内<br>
从而映衬出边框投影
</div>
</div>- layui-card
- layui-card-header 卡片标题
- layui-card-body 卡片内容
- layui-card
- 折叠面板
<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>- 依赖于element模块
- layui-collapse 面板父元素
- layui-colla-item 面板项
- layui-colla-title 面板标题
- layui-colla-content 面板内容
- layui-show 默认显示
- layui-colla-item 面板项
- 手风琴,只能开一个
<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>- 在折叠面板的基础上加 lay-accordion
- 卡片面板
- 表格
- 常规用法
<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>- layui-table lay-skin="line/row/now" lay-size="sm/lg/不写" lay-even 在table
- thead
- tr th
- tbody
- tr td
- thead
- layui-table lay-skin="line/row/now" lay-size="sm/lg/不写" lay-even 在table
- 常规用法
- 徽章
- 小圆点
- layui-badge-dot 在span,不能加文字
- 椭圆体
- layui-badge 在span,可加文字
- 可用layui-bg-xxx 定义颜色
- 边框体
- layui-badge-rim, 可加文字
- 可与其它元素搭配
- 小圆点
- 时间线
- 基于ul
- layui-timeline ul
- layui-timeline-item li 各个日期内容
- layui-timeline-axis layui-icon 图标 i 时间轴
- layui-timeline-content layui-text 内容 div
- layui-timeline-title 标题 h3
- <p></p>
- layui-timeline-item li 各个日期内容
- 辅助元素
- 引用文字
- layui-elem-quote 在引用块<blockquote></blockquote>
- layui-elem-quote layui-quote-nm 在墨绿引用块
- 字段集区块
- layui-elem-field 在文字集 <fieldset></> layui-field-title 横线风格
- <legend></>文字标题
- layui-field-box 文字集
- layui-elem-field 在文字集 <fieldset></> layui-field-title 横线风格
- 分割线
- 默认分割线<hr>
- 赤色分割线<hr class="layui-bg-red">
- 橙色分割线<hr class="layui-bg-orange">
- 墨绿分割线<hr class="layui-bg-green">
- 青色分割线<hr class="layui-bg-cyan">
- 蓝色分割线<hr class="layui-bg-blue">
- 黑色分割线<hr class="layui-bg-black">
- 灰色分割线<hr class="layui-bg-gray">
- 引用文字
- 按钮
- 内置模块
- 常用元素操作 layui.element
- tab
<div class="layui-tab" lay-filter="demo">
<ul class="layui-tab-title">
<li class="layui-this">网站设置</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>
</div> - layui.use('element', function(){//调用element模块
- var element = layui.element;
- element.on('tab(demo)', function(data){
- console.log(data);
- element.on('tab(demo)', function(data){
- var element = layui.element;
- tab
- 常用元素操作 layui.element
LayUI 前端框架基础知识
最新推荐文章于 2024-08-20 15:50:34 发布