前言
来了来了,低代码和各大常见组件库相互碰撞,快来看看会出现什么样的火花呢?低代码平台带给了我们不必手动去编辑一段代码却可以构建应用的快捷方法,这极大满足了低技术人员的开发需求也提高了在开发过程的代码开发效率。是不是很棒呢?
而组件化就将各个部分单独划分开来,让组件具有独立性,之间也能够自由组合。就拿电脑主机来说,一台整机包括CPU,主板,内存,硬盘等等,而这些部件其实都是由不同的公司进行生产的,他们彼此之间根据一套标准分别生产,最后组装在一起。当某个部件出现问题时,不需要将整台主机都进行维修,只需要将坏的部件拿下来,维修之后再将其组合上就可以了。这种化繁为简的思想在后端开发中的体现是微服务,而在前端开发中的体现就是组件化。
常见的组件库有很多比如elementUI、iviewui View UI、Ant Design等等,还有一些小程序组件库,如weui、colorui等等。
Colorui系列组件介绍
ColorUI是一个Css类的UI组件库!不是一个Js框架。相比于同类小程序组件库,ColorUI更注重于视觉交互!
UI效果视觉上看着在众多框架中脱颖而出。
低代码拥有一个组件化的特点,构建时就不需要使用较为繁琐的传统代码。colorui扩展在iofod的扩展管理中可以找到,如需使用可以自行下载,任意细节样式都可以更改。
Iofod操作界面介绍图:
部分组件展示
标题
通过使用容器和文本框构成标题内容,可以更改字体的颜色属性区别标题和副标题内容。如有其他特殊的标注,也可以使用容器去设计。可以使用容器更改如圆角、旋转角度和大小等样式属性去设计如dot、line等标识。
以下提高五种原标题样式:
Button按钮
Colorui注重于色彩视角上的表现,iofod可以完全展现出来,普通的颜色以及渐变色彩都可以。在其中也可以加入盒阴影以及边框属性。
预览如图:
Progress进度条
进度条用于展示操作进度,告知用户当前状态和预期。
一般的进度条采用百分比大小属性。在外部容器中,设计其自定义属性width:# $pl + '%',控制进度条进度。在父组件中设置value值去控制整体,如progress容器的大小和显示文本。设计思路大致如图:
这边提供了两种样式,第二种在其中采用了渐变色彩的展示。
结语
Colorui组件库是对外开放的,大家可以在网上找到源码。相比于传统代码,我要推荐的是iofod上的colorui项目,而且在低代码上明显减少了许多繁琐的操作,可视化技术和模型驱动功能也让我爱不释手,大家也可以前来尝试一下。
相关链接: