基本元素
如果需要更多资料点击下方图片加好友领取⬇（注明来意）
按钮
用法
向任意HTML元素设定class="layui-btn"，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。
一个可跳转的按钮
一个按钮主题
| 名称 | 组合 |
|---|---|
| 原始 | 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" |
| 默认 | class="layui-btn" |
| 小型 | class="layui-btn layui-btn-sm" |
| 迷你 | class="layui-btn layui-btn-xs" |
圆角
layui-btn-radius
图标
导航
导航一般指页面引导性频道集合，多以菜单的形式呈现，可应用于头部和侧边。面包屑结构简单，支持自定义分隔符。
依赖加载模块：element
实现步骤：
-
引入的资源
-
依赖加载模块
- 显示指定类型的导航
水平导航
垂直/侧边导航
水平、垂直、侧边三个导航的HTML结构是完全一样的，不同的是：
水平导航：layui-nav
垂直导航需要追加class：layui-nav-tree
侧边导航需要追加class：layui-nav-tree layui-nav-side导航主题
通过对导航追加CSS背景类，让导航呈现不同的主题色
…
水平导航支持的其它背景主题有：layui-bg-cyan（藏青）、layui-bg-molv（墨绿）、layui-bg-blue（艳蓝）
垂直导航支持的其它背景主题有：layui-bg-cyan（藏青）
面包屑
你还可以通过设置属性 lay-separator="" 来自定义分隔符。例如：
选项卡
导航菜单可应用于头部和侧边，支持响应式，支持删除选项卡等功能。
依赖加载模块：element
实现步骤
-
引入的资源
-
依赖加载模块
-
加载HTML
- 网站设置
- 用户管理
- 权限分配
- 商品管理
- 订单管理
内容1内容2内容3内容4内容5
选项卡风格
默认风格：layui-tab
简洁风格需要追加class：layui-tab-brief
卡片风格需要追加class：layui-tab-card带删除的选项卡
可以对父层容器设置属性 lay-allowClose="true" 来允许Tab选项卡被删除
- 网站设置
- 用户管理
- 权限分配
- 商品管理
- 订单管理
内容1
内容2
内容3
内容4
内容5
表格
常规用法
昵称
加入时间
签名
贤心
2016-11-29
人生就像是一场修行
许闲心
2016-11-28
于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…
基础属性
| 属性名 | 属性值 | 备注 |
|---|---|---|
| lay-even | 无 | 用于开启 隔行 背景，可与其它属性一起使用 |
| lay-skin="属性值" | line （行边框风格） row （列边框风格） nob （无边框风格） |
若使用默认风格不设置该属性即可 |
| lay-size="属性值" | sm （小尺寸） lg （大尺寸） |
若使用默认尺寸不设置该属性即可 |
你所需要的基础属性写在table标签上，例如：
昵称
加入时间
签名
贤心
2016-11-29
人生就像是一场修行
许闲心
2016-11-28
于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…
表单
依赖加载模块：form
-
在一个容器中设定 class="layui-form" 来标识一个表单元素块
-
基本的行区块结构，它提供了响应式的支持。可以换成其他结构，但必须要在外层容器中定义class="layui-form"，form模块才能正常工作。
原始表单元素区域
输入框
- required：注册浏览器所规定的必填字段
- lay-verify：注册form模块需要验证的类型
- class="layui-input"：layui.css提供的通用CSS类
下拉选择框
- 属性selected可设定默认项
- 属性disabled开启禁用，select和option标签都支持
- 可以通过 optgroup 标签给select分组
- 通过设定属性 lay-search 来开启搜索匹配功能
复选框
默认风格：
原始风格：
- 属性title可自定义文本（温馨提示：如果只想显示复选框，可以不用设置title）
- 属性checked可设定默认选中
- 属性lay-skin可设置复选框的风格 （原始风格：lay-skin="primary"）
- 设置value="1"可自定义值，否则选中时返回的就是默认的on
开关
将复选框checkbox，通过设定 lay-skin="switch" 形成了开关风格
- 属性checked可设定默认开
- 属性disabled开启禁用
- 属性lay-text可自定义开关两种状态的文本 （两种文本用 "|" 隔开）
- 设置value="1"可自定义值，否则选中时返回的就是默认的on
单选框
- 属性title可自定义文本
- 属性disabled开启禁用
- 设置value="xxx"可自定义值，否则选中时返回的就是默认的on
文本域
- class="layui-textarea"：layui.css提供的通用CSS类
组装行内表单
-
- class="layui-inline"：定义外层行内
- class="layui-input-inline"：定义内层行内
忽略美化渲染
可以对表单元素增加属性 lay-ignore 设置后，将不会对该标签进行美化渲染，即保留系统风格。
表单方框风格
通过追加 layui-form-pane 的class，来设定表单的方框风格。