搜索组件或模块
grid 栅格布局
admin 后台布局
color 颜色
iconfont 字体图标
animation 动画
button 按钮
form 表单组
input 输入框
select 下拉选择框
checkbox 复选框
switch 开关
radio 单选框
textarea 文本域
nav 导航菜单
breadcrumb 面包屑
tabs 选项卡
progress 进度条
collapse 折叠面板/手风琴
table 表格元素
badge 徽章
timeline 时间线
blockquote 引用块
fieldset 字段集
hr 分割线
layer 弹出层/弹窗综合
laydate 日期时间选择器
layim 即时通讯/聊天
laypage 分页
laytpl 模板引擎
form 表单模块
table 数据表格
upload 文件/图片上传
element 常用元素操作
carousel 轮播/跑马灯
layedit 富文本编辑器
tree 树形菜单
flow 信息流/图片懒加载
util 工具集
code 代码修饰

页面元素规范与说明

Layui提倡返璞归真,遵循于原生态的元素书写规则,所以通常而言,你仍然是在写基本的HTML和CSS代码,不同的是,在HTML结构上及CSS定义上需要小小遵循一定的规范。

类名(class) 说明
布局 / 容器
layui-main 用于设置一个宽度为 1140px 的水平居中块(无响应式)
layui-inline 用于将标签设为内联块状元素
layui-box 用于排除一些UI框架(如Bootstrap)强制将全部元素设为box-sizing: border-box所引发的尺寸偏差
layui-clear 用于消除浮动(一般不怎么常用,因为layui几乎没用到浮动)
layui-btn-container 用于定义按钮的父容器。(layui 2.2.5 新增)
layui-btn-fluid 用于定义流体按钮。即宽度最大化适应。(layui 2.2.5 新增)
辅助
layui-icon 用于图标
layui-elip 用于单行文本溢出省略
layui-unselect 用于屏蔽选中
layui-disabled 用于设置元素不可点击状态
layui-circle 用于设置元素为圆形
layui-show 用于显示块状元素
layui-hide 用于隐藏元素
文本
layui-text 定义一段文本区域(如文章),该区域内的特殊标签(如a、li、em等)将会进行相应处理
layui-word-aux 灰色标注性文字,左右会有间隔
背景色
layui-bg-red 用于设置元素赤色背景
layui-bg-orange 用于设置元素橙色背景
layui-bg-green 用于设置元素墨绿色背景(主色调)
layui-bg-cyan 用于设置元素藏青色背景
layui-bg-blue 用于设置元素蓝色背景
layui-bg-black 用于设置元素经典黑色背景
layui-bg-gray 用于设置元素经典灰色背景

其它的类一般都是某个元素或模块所特有,因此不作为我们所定义的公共类。

class命名前缀:layui,连接符:-,如:class="layui-form"

命名格式一般分为两种:一:layui-模块名-状态或类型,二:layui-状态或类型。因为有些类并非是某个模块所特有,他们通常会是一些公共类。如:一(定义按钮的原始风格):class="layui-btn layui-btn-primary"、二(定义内联块状元素):class="layui-inline"

大致记住这些简单的规则,会让你在填充HTML的时候显得更加得心应手。另外,如果你是开发Layui拓展(模块),你最好也要遵循于类似的规则,并且请勿占用Layui已经命名好的类,假设你是在帮Layui开发一个markdown编辑器,你的css书写规则应该如下:

CSSlayui.code

  1. .layui-markdown{border: 1px solid #e2e2e2;}
  2. .layui-markdown-tools{}
  3. .layui-markdown-text{}

Layui在解析HTML元素时,必须充分确保其结构是被支持的。以Tab选项卡为例:

HTMLlayui.code

  1. <div class="layui-tab">
  2. <ul class="layui-tab-title">
  3. <li class="layui-this">标题一</li>
  4. <li>标题二</li>
  5. <li>标题三</li>
  6. </ul>
  7. <div class="layui-tab-content">
  8. <div class="layui-tab-item layui-show">内容1</div>
  9. <div class="layui-tab-item">内容2</div>
  10. <div class="layui-tab-item">内容3</div>
  11. </div>
  12. </div>

你如果改变了结构,极有可能会导致Tab功能失效。所以在嵌套HTML的时候,你应该细读各个元素模块的相关文档(如果你不是拿来主义)

很多时候,元素的基本交互行为,都是由模块自动开启。但不同的区域可能需要触发不同的动作,这就需要你设定我们所支持的自定义属性来作为区分。如下面的 lay-submitlay-filter即为公共属性(即以 lay- 作为前缀的自定义属性):

codelayui.code

  1. <button class="layui-btn" lay-submit lay-filter="login">登入</button>

目前我们的公共属性如下所示(即普遍运用于所有元素上的属性)

属性 描述
lay-skin=" " 定义相同元素的不同风格,如checkbox的开关风格
lay-filter=" " 事件过滤器。你可能会在很多地方看到他,他一般是用于监听特定的自定义事件。你可以把它看作是一个ID选择器
lay-submit 定义一个触发表单提交的button,不用填写值

额,好像有点少的样子(反正你也基本不会看文档。。(づ╥﹏╥)づ)。其它的自定义属性基本都在各自模块的文档中有所介绍。

其实很多时候并不想陈列条条框框(除了一些特定需要的),所以你会发现本篇的篇幅较短。(哈哈哈哈哈,其实是写文档写得想吐了)

Layui - 用心与你沟通