前言
低代码在如今渐渐开始进入我们的视角里，它是高级编程语言发展的必然产物，通过可视化技术和模型驱动功能可快速帮助你构建应用。请随我看看在低代码平台上如何实现构建ColorUI的。
ColorUI系列组件库简介
ColorUI是一个Css类的UI组件库。与之前的WeUI系列组件不同是，colorUI更注重于视觉交互，它拥有更加鲜亮的高饱和色彩，在使用时需要下载colorui的源码包去使用，低代码拥有一个组件化的特点，构建时就不需要使用较为繁琐的传统代码。今天会在iofod中展示如何实现，之后可自行导出储存在自己的组件库当中使用。
基础类型组件
avatar头像
在colorui中，头像有内嵌文字头像、头像组、头像标签等等。我们需要使用的三个组件：容器、文本和图标，通过简单堆叠就可以完成实现，主要看样式是如何设置的。
**普通头像：**在容器中，插入图标和文本，设置合适的大小（图片中普遍width：32px；height：32px）。
普通头像预览：
带有渐变色彩的头像：
在外部容器上添加一个渐变颜色，之后再通过模型和样式高级设置进行配合完成Flutterclipper实现各种自定义形状和mask遮罩样式。这边的自定义形状选择了一个图标。具体设置如图：
这边具体就完成了，分别是自定义图形裁剪，遮罩大小和重复性以及遮罩层图像。
带有渐变色彩的头像预览：
头像标签：
类似weui徽章，在头像的边缘一侧添加一个标注，通常是文本内容或者dot提示点或者图标等。
具体样式可以通过右侧tab栏中进行设置，比如文本框的圆角大小、缩放百分比、边框类型和大小，如果是需要一个比较亮眼的色彩也可以进行背景渐变设置。
预览如图：
头像组：
有多个头像堆叠在一起，并拥有一个类似的样式设置。
在iofod中，如果要使用多个同种类似组件，一般会采用copy模型组件去实现，这边输入的复制数量是一个9，做成了一个九宫格形式。说到copy模型，要控制个别的组件需要使用子状态default:$N，对特定的对象添加外边距可以改变排列方式。
若没有使用到copy模型，对每个图片进行堆叠排列，使用外边距编辑可改变排列方式。而且iofod页面组件有层级规范效果，排列先后会有不同的表现形式。
头像组预览如图：
结语
此文章包括colorui系列组件的第一页内容，大概内容是关于头像栏目的。操作平台是iofod，它是一个低代码前端开发平台，十分新颖并且功能强大。随着开发业务的扩展，市场需求开始加大，iofod对非开发人员的技术要求并不高，iofod作为低代码开发平台是一种更先进的生产力工具。
相关链接：
