Layui-按钮 - 页面元素+图标+动画

原创

已于 2024-03-25 22:38:44 修改 · 495 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#layui #javascript #前端

于 2021-12-06 17:37:41 首次发布

本文详细介绍了Layui框架中按钮的使用，包括基础图标、动画设置，以及不同主题、尺寸、圆角的应用。还讲解了如何创建按钮组、按钮容器，以及图标和动画的实现。同时，提到了按钮的HTML元素选择，如<a>和<button>标签，以及各种按钮属性的组合使用。

基础图标设置格式：

<div>
    <i class="layui-icon layui-icon-mike " style="color: red ; font-size: 40px"></i><!--麦克风图标-->
</div>

效果图：

基础动画设置格式：

<div>
    <i class="layui-icon layui-icon-wifi layui-anim layui-anim-rotate layui-anim-loop " style="color: blue ; font-size: 40px"></i><!--wifi图标360度循环旋转-->
    <!--个人问题：没有写layui-anim，无论用哪个动画，都必须要先声明layui-anim-->
</div>

效果图：

向任意HTML元素设定class="layui-btn"，建立一个基础按钮。通过追加格式为layui-btn-{type}的class来定义其它按钮风格。内置的按钮class可以进行任意组合，从而形成更多种按钮风格。

用法

<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="https://www.layuiweb.com" class="layui-btn">一个可跳转的按钮</a>

主题

名称	组合
原始	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"