Layui 学习整理

Layui 学习整理

本文为作者本人对layui的实用向学习整理，仅作交流用。

CSS组件

图标字符

Layui的字符采用的是Unicode字符。所有图标全部采用字体形式，这一点和bootstrap非常相似，但是用法上稍有区别。
通过对一个内联元素（一般推荐用 i标签）设定 class=”layui-icon”，来定义一个图标，然后对元素加上图标对应的 Unicode 字符，即可显示出你想要的图标。如下：

<i class="layui-icon">&#xe60c;</i> 

和bootstrap同样的，你可以设置字符的大小和颜色。

常用按钮

Layui的按钮有多种样式可供选择，但是无论使用哪种样式的按钮时，都必须在该html标签中加上一个名为layui-btn的class名。其次再添加你需要使用的按钮样式所对应的的class名。
各按钮样式class名，按照主题可分为：
原始（layui-btn-primary）background-color：#009688;
默认（layui-btn）background-color：#009688;
百搭（layui-btn-normal）background-color：#1E9FFF;
暖色（layui-btn-warm）background-color：#F7B824;
警告（layui-btn-danger）background-color：#FF5722;
禁用（layui-btn-disabled）background-color：#FBFBFB;

按钮的默认样式（layui-btn）在layui.css中的第370行至384行：

.layui-btn {
    display: inline-block;
    height: 38px;
    line-height: 38px;
    padding: 0 18px;
    background-color: #009688;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    opacity: .9;
    filter: alpha(opacity=90)
}   

注：Layui的按钮和bootstrap一样可以在按钮中加入图标字符
按照形状，按钮还可以分为：
圆角（layui-btn-radius）
大按钮（layui-btn-big）
小按钮（layui-btn-small）
迷你按钮（layui-btn-mini）

表单

在一个容器中设定 class=”layui-form” 来标识一个表单元素块。
*注：需要依赖form组件，如果不加载，select、checkbox、radio等将无法显示，并且无法使用form相关功能。

下拉选择框

1.属性中增加selected来规定默认已选中选项，disabled来禁用一些选项，label值为分组名。

<select name="quiz">
  <optgroup label="城市记忆">
    <option value="你工作的第一个城市">你工作的第一个城市？</option>
  </optgroup>
  <optgroup label="学生时代">
    <option value="你的工号" selected>你的工号？</option>
    <option value="你最喜欢的老师" disabled>你最喜欢的老师？</option>
  </optgroup>
</select>

2.required：注册浏览器所规定的必填字段 ,lay-verify：注册form组件需要验证的类型 ,class=”layui-input”：layui.css提供的通用CSS类 。

lay-verify：主要是五种验证，标题（title）、姓名（fname/lname）、手机号码（phone）、邮箱（e-mail）.

<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input"> 

复选框checkbox

1.普通复选框

<input type="checkbox" name="" title="写作" checked>
<input type="checkbox" name="" title="发呆"> 
<input type="checkbox" name="" title="禁用" disabled> 
//另外可以自定义value，来设置返回的值，不然默认值为on.

2.开关
开关为复选框的变种，添加lay-skin=”switch”即可设置复选框为开关风格。

<input type="checkbox" name="open" lay-skin="switch" checked>
<input type="checkbox" name="close" lay-skin="switch">
<input type="checkbox" name="close" lay-skin="switch" disabled>
//需注意设置开关的name值.同样可自定义value.

单选框

单选框只需将复选框的type改为radio即可，其余一切属性和用法与复选框相同。

文本域

<textarea name="" required lay-verify="required" placeholder="请输入" class="layui-textarea"></textarea>

其中，layui-textarea是layui提供的css样式类。

====待补充====