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

页面元素规范与说明

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 用于设置元素经典灰色背景
字体大小及颜色

</>code

  1. layui-font-12 (12px 的字体)
  2. layui-font-14 (14px 的字体)
  3. layui-font-16 (16px 的字体)
  4. layui-font-18 (18px 的字体)
  5. layui-font-20 (20px 的字体)
  6. layui-font-red (红色字体)
  7. layui-font-orange (橙色字体)
  8. layui-font-green (绿色字体)
  9. layui-font-cyan (青色字体)
  10. layui-font-blue (蓝色字体)
  11. layui-font-black (黑色字体)
  12. layui-font-gray (灰色字体)

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

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

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

CSScode

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

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

HTMLcode

  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- 作为前缀的自定义属性):

</>code

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

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

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

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

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

layui - 在每一个细节中,用心与你沟通