Layui(二):图标和按钮

图标

方法1:使用字符实体
只需要在一个class为 layui-icon 的容器类标签中加入字符的unicode码即可。

相关样式:layui-icon,代表使用layui的图标处理样式去渲染

方法2:使用样式
在class为layui-icon的容器类标签后追加对应的图标样式,而不需要在写unicode码。

相关图标样式可以去官网的文档查找。

按钮

相关样式:
(1)必要样式:layui-btn
(2)主题样式:
layui-btn-primary 原始按钮
layui-btn-normal 百搭按钮
layui-btn-warm 暖色按钮
layui-btn-danger 警告按钮
layui-btn-disabled 禁用按钮
(3)大小样式:
layui-btn-lg 最大按钮
layui-btn-sm 小型按钮
layui-btn-xs 迷你按钮
(4)图标结合:
把图标的样式也添加到class中即可
(5)圆角按钮:
layui-btn-radius
(6)按钮组:
套上一层class为layui-btn-group

按钮的事件监听

layui按钮的事件监听可以使用jquery来做。
在layui内部使用jquery的方式:

<script type="text/javascript">
    layui.use(["jquery"],function(){
                //重点
        var $ = layui.jquery;
        。。。。。。
    });
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容