「UI框架」搞定Layui的页面元素之按钮与按钮组

UI框架Layui的按钮元素与其他前端框架用法一样，向任意HTML元素设定class="layui-btn"，即可建立一个默认按钮：

<button class="layui-btn">默认按钮</button>

通过追加格式为layui-btn-{type}的class来定义其它按钮风格，比如追加layui-btn-primary，就可以改变为原始按钮：

<button class="layui-btn layui-btn-primary">原始按钮</button>

layui按钮默认提供了六种按钮风格，分别如下：

1. 默认：class="layui-btn"

2. 原始：class="layui-btn layui-btn-primary"

3. 百搭：class="layui-btn layui-btn-normal"

4. 暖色：class="layui-btn layui-btn-warm"

5. 警告：class="layui-btn layui-btn-danger"

6. 禁用：class="layui-btn layui-btn-disabled"

那么，并不是所有的按钮都一样大啊，不用担心，layui也帮我们预设了四种按钮尺寸，他们的class分别是：

1. 默认：无需追加其他class

2. 大型：layui-btn-big

3. 小型：layui-btn layui-btn-small

4. 迷你：layui-btn layui-btn-mini

如果需要给按钮增加圆角效果的话，追加一个叫做“layui-btn-radius”class即可。

通过上述内置的按钮class，我们可以任意组合，形成更多种按钮风格，但是有一个问题，会导致名称很长，用贤心自己的话说就是“这组合名长得简直没朋友~”。比如：

怎么办？能接受就接受，不能接受就自己想办法解决吧。

有时候，我们的按钮并不是文字，而是图标，那么就需要使用layui的图标库，目前一共有119个，layui图标全部采用字体形式（意味着我们可以设置font-size、color等文字属性），取材于阿里巴巴矢量图标库（iconfont），是采用 Unicode 字符。相对于奥森字体数量少一些，基本上也能满足使用。

layui图标的用法如下：

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

通过一个内联元素（一般推荐i标签）设定class为layui-icon，然后加上对应图标的Unicode字符即可。比如点赞按钮：

<button class="layui-btn">
<i class="layui-icon">&#xe6c6;</i>
</button>

同样，layui有自己的按钮组，将所需要的按钮放入一个class="layui-btn-group"元素中，即可形成按钮组，同时不会影响按钮本身的随意搭配。比如由增加、编辑、删除三个按钮组合的按钮组：

<div class="layui-btn-group">
<button class="layui-btn"> <i class="layui-icon">&#xe654;</i>增加 </button>
<button class="layui-btn"> <i class="layui-icon">&#xe642;</i>编辑 </button>
<button class="layui-btn"> <i class="layui-icon">&#xe640;</i>删除 </button>
</div>

总结，即便是通过尺寸、风格、图标、圆角等多角度的组合，实现的按钮依然未必是你想要的，那么你就可以大胆的自己写按钮样式吧，增加自己风格的同时，也可以减少组合名的长度，前提是自己能有清晰的思路与遵循的规范。

相关链接：

1、你家隔壁程序猿推荐一款优秀的模块化UI框架-Layui

2、前端框架Layui的CSS3动画类—快速实现动画效果