组件版编辑器常用原子组件介绍（一）

在前面的编辑器定制中，我们知道，可以对组件版编辑器的template进行新增删除。删除比较简单，只需要找到对应的template下找到不需要的属性，进行数组的操作再重新注册回去即可。那新增呢？像是侧边栏的sidePannel以及各种弹窗或者文件导入导出的template，那么要往里面加上新的内容，我们必然就要了解原子组件。原子组件可以理解为新增template的基本单位。

目前我们有17种原子组件类型加上可以自定义原子组件。这个系列文章就来讲讲常用的几种原子组件。如何自定义原子组件，可以参考下面两个教程：

https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=132501

https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=132505

那接下来我们先来看下常见的原子组件，我会在另一篇文章将容器组件做介绍。

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是文本输入框，这是接口描述

示例