本期操作平台依旧是Iofod，它是一款在线可视化应用开发平台，通过它的两个功能——可视化布局和丰富的组件元素，你可以快速输出高质量的复合组件。
前言
低代码作为一个新兴的技术产物，它确实能够很好的起到减少成本的作用，同时在业务开发人员和需要表单+工作流系统维护的小型企业而言，低代码所拥有的组件化功能和低技术力能够帮助他们快速构建出合适的应用界面。本期继续进行的是colorui组件，该组件库注重于色彩上的视觉表现上。
Colorui系列组件介绍
ColorUI是一个Css类的UI组件库！不是一个Js框架。相比于同类小程序组件库，ColorUI更注重于视觉交互！
UI效果视觉上看着在众多框架中脱颖而出。
低代码拥有一个组件化的特点，构建时就不需要使用较为繁琐的传统代码。colorui扩展在iofod的扩展管理中可以找到，如需使用可以自行下载，任意细节样式都可以更改。
表单
每个人在生活中或多或少都在与填写表单打交道，同时表单本身的功能也具有着数据采集功能。并且在视觉效果和交互效果都需要做设计，以至于让用户们提高录入效率。
文本框输入框、密码输入框
Iofod有三大基础组件——容器、文本和照片。使用容器，并在其添加你需要的组件（文本输入框和密码输入框），便能够构成表单结构。
密码输入框中，type拥有两种属性：text和password，分别表示密码的可视。通过编写父组件的showPw模型值，去判断，可在密码输入框的type模型值编写# $showPw<cu_password> ? 'text' : 'password'，这是一个条件表达式。
如图
而图标按钮通过render模型配合交互事件去完成，type值的选择。
组件预览如图：
单选框
要想实现单选框，需要用到copy模型，并使用数据驱动的功能，在父组件的模型栏中设置各种模型。
激活的图标我们选择了一个带有圆角的4px边框，编写子状态default:$active，将active模型值赋值与父组件active模型值，这样就可以通过父组件获取的active值去控制激活按钮。
对父组件item容器使用copy复制后，添加交互事件tap，以获取索引值，之后修改模型active值。交互事件具体如图：
如果在你不需要单选框时，你可以使用disable模型，并添加子状态default:$disable于父组件。利用交互事件判断断言disable是否激活，并给予终止符。
组件预览如图：
步骤条
引导用户按照流程完成任务的导航条。 何时使用 当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。在iofod中的设计思路如图：
设置完内容部分后，添加步骤条容器，同样采用子状态编辑，之后对子状态样式编辑。通过命名方式与父组件进行联系，人为控制step值去控制步骤条显示情况。
以下图片是步骤条组件的容器分布：
组件预览：
开关switch
开关的设计思路：
编辑主要的子状态样式，按钮开关控制的交互事件。Iofod通过数据驱动去控制交互事件和状态变化之间的链接，我们只需设置另一个基于原状态的子状态，输入其样式，然后通过手指触摸开始后进行激活，这样一个button的交互事件就设置完成了。
预览如图：
结语
简单介绍了colorui组件在iofod中是如何实现的，为了能够让大家更好的使用低代码工具在这里作了简单的使用介绍，希望能够帮助大家，对于简单的组件搭建，低代码或许最能在最低限度下满足你的需求呢？在实现过程中，使用了Iofod支持下的数据驱动，使得每个组件和交互动作都能够取得联系，只要你理解到其中的含义，操作起来十分简单，并且低代码平台拥有的可视化技术让拖拽代替了传统代码的编写过程，这就是我喜欢iofod的原因，一个低代码开发平台，对无论是新手还是老手都十分友好。
相关链接：
