在前面的编辑器定制中,我们知道,可以对组件版编辑器的template进行新增删除。删除比较简单,只需要找到对应的template下找到不需要的属性,进行数组的操作再重新注册回去即可。那新增呢?像是侧边栏的sidePannel以及各种弹窗或者文件导入导出的template,那么要往里面加上新的内容,我们必然就要了解原子组件。原子组件可以理解为新增template的基本单位。
目前我们有17种原子组件类型加上可以自定义原子组件。这个系列文章就来讲讲常用的几种原子组件。如何自定义原子组件,可以参考下面两个教程:
那接下来我们先来看下常见的原子组件,我会在另一篇文章将容器组件做介绍。 1、 Button
Button由button-icon和button-text组成,其CSS类名为 image-container 和 gc-image-button。以下是接口 示例
(iconPosition:top)
(iconPosition: left (默认,无需设置))
2、 CheckBox CheckBox 与<inputtype="checkbox">比较类似,效果也是一个复选框,以下是接口 示例
1、三态复选框
2、普通复选框
3、 LabelLine
LabelLine是指左侧带有文本的线条。这是接口
示例
4、 NumberEditor
NumberEditor 是控制数字增加和减少的编辑器。这是对应的接口。
示例
(ruleType:"Percent")
5、 Radio
Radio是单选按钮,可以返回字符串|数字|布尔值,这是对应的接口描述:
示例
6、 TextBlock
TextBlock是放置文本的块,接口如下
示例
7、 TextEditor TextEditor是文本输入框,这是接口描述
示例
|