# Icon组件

# 概述

图标Icon选择在项目开发中也经常会遇到的,当我们在设置菜单时总想着让菜单导航更漂亮一点,让用户在使用系统的时候能赏心悦目,一个好的系统UI及图标展示不仅可以提高系统的整体美观,同时也能让用户在使用过程中享受到一种愉悦感,所以框架在设计之初已经考虑到了这一点,在设置系统菜单时根据菜单不同选择相关的图标,框架中已经集成了大部分程序开发中经常使用到的图标,下面让我们一起去看看吧。

# Icon选择

  • 组件:{icon:picker name="icon" value="isset($info['icon']) ? $info['icon'] : 'layui-icon-component'"}

  • 参数:

`name="icon"`:组件名称`icon`,此字段对应实体对象中的字段icon(当前这个字段跟数据库字段也是一一对应的);
`value`:这个是绑定到icon组件上的值,组件默认图标`layui-icon-component`;
1
2
  • 组件使用

Icon组件的使用也是非常的简单,跟前面我们所讲过的组件一样,开箱即用,直接在表单中引用即可。

<form class="layui-form model-form" action="">
    <div class="layui-inline">
        <label class="layui-form-label">图标:</label>
        <div class="layui-input-inline">
            {icon:picker name="icon" value="isset($info['icon']) ? $info['icon'] : 'layui-icon-component'"}
        </div>
    </div>
</form>
1
2
3
4
5
6
7
8
  • 效果展示:

    mixureSecure