1 - 网格
1. 控件介绍
网格控件是一种布局控件，可以设置几行几列，对页面信息按行列布局。
2. 使用场景
当需要按行列整齐的展示内容时，可使用网格。 网格一般在详情页中展示表单内容。
2. 控件特性
2.1 设置表格的行列
将网格控件拖到画布区时，会弹出提示输入行数和列数，根据设置生成相应的网格。生成网格后，在右侧属性区可以看到行列信息， 但不可直接修改， 可选中单元格右键插入或删除行列。
2.2 插入和删除行或列
操作方法：选中单元格，鼠标右键，可以设置插入和删除行或列。
2.3 合并或拆分单元格
操作方法：选中要合并或拆分的单元格， 然后右键选择相应的操作
2.4 设置最小行高
一个单元格中可以拖入多个控件，行高是根据内容自适应的。当内容高度小于设置的最小行高时，行高会等于最小行高。
设置最小行高的主要场景： 当每一行的行高按内容自适应不一样高时，希望从视觉上使表格所有行的行高一样，可以将最小行高设置为最高那行的行高。
操作方法： 选中需要调整的行， 然后右键设置最小高度。
2.5 调整列宽
操作方法一：可在表格中拖动列边线调整列宽
操作方法二：选中单元格， 右键设置列宽
注意：表格的列宽是默认占满上层容器的宽度，表格整体是不会出现横向滚动条的。调整列宽会挤压相邻列的宽度，相邻列可能因为宽度不够，出现横向滚动条。
2.6 设置边距
内外边距设置详情请参考边距设置
行间距是指表格的行与行之间的距离，列间距是指表格的列与列之间的距离。
2.7 设置边框
在风格中设置表格控件背景图、背景色、圆角、边框线、边框线颜色、边框线样式、边框线宽度等。
设置边框线样式的步骤：
- 首先在画布中选中要设置边框的区域。
- 设置样式时，需要先选择设置哪些边线，再设置样式、宽度或颜色。
边框线设置示例：
2 - 容器
1. 控件介绍
容器是一种布局控件，支持弹性布局, 是目前业界前端的主流CSS布局方式，能实现复杂的布局。
2. 使用场景
（1）当页面区域需要进行分块划分, 比如左右两部分。
（2）希望对一组控件进行灵活布局。
3. 控件特性
3.1 设置宽高
宽度支持固定值或自适应。
高度支持固定值或自适应。
宽度自适应：
（1）当前容器为最底层容器（当前容器未嵌套在别的容器中，而是直接放到页面上或放到其他布局控件中）：宽度自适应会自动取页面或其他布局容器的宽度。 比如页面宽度为1440px, 容器自适应宽度也是1440px
（2）当前容器是嵌套在其他容器控件中的 当前容器为子容器，宽度自适应是指根据容器中内容宽度自动调整容器的宽度。下图为容器嵌套容器，在子容器中放了单行文本控件。 子容器的宽度设置为自适应，即是单行文本的宽度。
3.2 容器弹性布局
3.2.1 容器主轴方向
容默存在两根轴：水平轴（横向的），垂直轴（纵向的）， 将其中一个轴作为主轴，那另一个轴就是交叉轴。主轴的方向决定了控件的排列方向。 水平轴上控件的排列方向可以是从左到右，也可以从右到左，默认是从左到右；垂直轴上控件的排序方向可以是从上到下，也可以是从下到上，默认为从上到下。
3.2.2 控件的对齐方式
（1）当水平轴为主轴时：
主轴对齐方式有居左、居中、居右、每个控件两侧的间隔相等（控件之间的间隔比项目与边框的间隔大一倍）、两端对齐（控件之间的间隔都相等）。默认是居左对齐， 点击
效果如下：
(2) 当垂直轴为主轴时：
主轴对齐方式有：居上、居中、居下、元素占满高度、根据元素的第一行文字的底线进行对齐。默认是居上对齐， 点击
注意：调整控件对齐方式时，通常主轴方向和交叉轴方向是配合一起调整的。可参见演示示例。
3.2.3 控件换行或换列
（1）当水平轴为主轴时：
容器中的控件排在一条横线上，当如果一条线上排不下时（控件的宽度超过了容器的宽度)，容器会出现横向滚动条。 如果希望不出现横向滚动条，可以设置换行，且可以设置列数，即一行分成多少列。
（2）当垂直轴为主轴时：
容器中的控件排在一条竖线上，当纵向排不下时（控件的高度超过了容器的高度)，容器会出现纵向滚动条。如果希望不出现纵向滚动条，可以设置换列，且设置列数。
3.2.4 容器自动拉伸和缩小
(1) 自动拉伸：当父级容器主轴有剩余空间时，子控件可拉伸填满剩余空间。当子控件的内容超过剩余空间时，父级容器出现滚动条。
举例：如下图，父容器主轴垂直方向，子容器勾选了自动拉伸，会在垂直方向占满父容器的剩余控件。
(2) 自动缩小：当父级容器主轴剩余空间不够时，子控件自动缩小，子控件可能出现滚动条。
3.3 边距设置
内外边距设置详情请参考边距设置
行间距是指容器中行与行之间的距离，列间距是指容器中列与列之间的距离。
3.4 边框设置
在风格中设置容器控件背景图、背景色、圆角、边框线、边框线颜色、边框线样式、边框线宽度等。
边框线的设置步骤可参考表格边框线设置
3 - 分组
1. 控件介绍
分组控件顾名思义是将内容进行分组, 支持分组的展开收起效果。
2. 使用场景
页面内容可以分成多个独立模块时，比如录入人员信息时， 要分别录入个人信息、家庭信息、学历信息等，那么可以用分组控件，每个分组内信息是聚焦的。
3. 控件特性
3.1 头部设置
头部样式支持自定义或选择预置样式。自定义可配置标题展示图标或图片。预置样式可直接选择使用。
3.2 折叠设置
（1）可配置折叠图标的位置及折叠样式
折叠图标在头部：
折叠图标在内容区下：
（2）可配置打开页面时，分组默认是展开或收起状态，且可以设置不同条件下的状态。
3.3 设置高度
自适应高度：根据分组内的内容自适应，高度是动态的，分组控件自身不会出现纵向滚动条。
固定高度：高度固定，当分组内容超过固定高度时，分组控件自身将出现纵向滚动条。当父级容器小于控件高度时，父级容器出现纵向滚动条。
3.4 设置伸缩
分组控件也具备伸缩能力。
伸缩的详细介绍可参考容器自动拉伸和缩小
3.5 设置边距
内外边距设置详细介绍可参考边距设置
3.6 设置分割线
（1）可设置是否展示分割线。
（2)设置分割线的样式。
4 - 页签
1. 控件介绍
页签是一种布局类控件，每个页签的内容都是相对聚焦的。和分组控件的使用场景非常类似，只是交互形式不同。
2. 使用场景
页面内容可以分成多个独立模块时，比如录入人员信息时， 要分别录入个人信息、家庭信息、学历信息等，那么可以用页签控件，每个页签内容是聚焦的。
3. 控件特性
3.1 添加页签
根据实际场景，添加多个页签。可更改页签的名称标题，支持设置表达式。
3.2 设置页签排列方式
3.3 设置页签头样式
（1）可设置显示样式，系统提供卡片型、普通型、文字型、胶囊型4种样式。
普通样式：
卡片样式：
文字样式：
胶囊样式：
3.4 设置页签头位置
页签头可以在上方，也可以放到下方，满足不同的样式需求
3.5 设置页签图标
1.设置页签图标
2.打开图标开关，可设置图标位置、图标状态、图标颜色
（1）图标位置：可改变图标在页签标题的位置
（2）图标状态、图标颜色
可分别设置每个页签的图标显隐状态和图标颜色，支持配置表达式。
3.6 设置默认激活
使用场景：页面初始化时选中指定的页签。
功能说明：页面初始化时激活指定页签，也可配置激活条件。如果未配置，默认展示第一个有权限的页签。
3.7 设置激活规则
使用场景：当满足条件时切换相应页签
配置方法：
方式一：自动触发，当条件满足就激活对应页签。
注意：要先配置激活规则后才可设置自动触发激活规则。满足条件时切换到对应页签，之后仍然可以手动切换到其他页签，当条件再次满足时又会执行激活规则。
方法二：在事件中配置页签控件动作执行激活。比如点击某个按钮时，再按条件判断激活页签。
自动触发激活规则不开启时，需要配置控件动作才能执行激活规则；开启后，自动判断激活规则的条件，自动执行。
3.8 控制页签的显隐
使用场景：满足条件时才显示该页签，否则隐藏。
配置方法：每个页签可单独可以状态，如下图。
页签状态说明：
–正常状态：可切换到该页签
–只读状态：可切换到该页签，但页签中的内容是只读
–禁用状态：无法切换到该页签
–隐藏状态：隐藏该页签。
3.9 角色权限管控
使用场景：给不同角色授予页签不同权限。
配置方法：
（1）开启页签控件的功能权限
（2）开启单个页签的功能权限
（3）在角色权限中授权
3.9 设置高度
页签控件也可以设置自适应高度或固定值高度
详细介绍可参考分组设置高度。
3.10 设置伸缩
页签控件也具备伸缩能力。
详细介绍可参考容器自动拉伸和缩小。
5 - 面板
1. 控件介绍
面板属于布局控件的一种，通过配置面板显示方式可以实现全局弹窗、跟随某个控件的气泡以及侧边弹出抽屉等不同的功能。
2. 使用场景
当需要录入或查看更多数据，可以使用面板实现。
比如重复表录入控件中需要录入的数据列非常多，列表会非常宽，体验不好，这时可以考虑使用面板录入更多数据。
3. 控件特性
3.1 配置打开面板
运行态面板是默认不打开的，可通过以下两种方式打开面板。两种方式没有本质区别，只是配置方式不同。
方式一：在属性区中，配置触发控件及触发动作。
方式二：在事件中配置面板的控件动作，打开面板。
3.2 配置面板显示位置
面板的显示位置有三种：
（1）跟随触发控件：面板以气泡形式呈现，可配置跟随位置。
（2）固定在某个位置：面板以弹窗或抽屉的形式呈现。
（3）可拖动调整位置：面板以弹窗形式呈现，默认居中，可以拖动位置。
3.3 配置面板关闭方式
关闭方式：
（1）支持点击非面板区关闭。
（2）点击面板右上角的关闭按钮关闭。
（3）键盘按下esc键来关闭（移动端不支持esc键）。
3.4 注意事项
（1）面板只能拖入到页面顶层区域，不支持拖入到其它控件中（暂不支持在外框设计使用）。
（2）一个页面可以拖入多个面板，但画布区同时只能展示一个（总是优先展示最新拖入的面板）。可以点击面板工具条上的小眼睛图标来隐藏面板，如图：
6 - 子页面
1. 控件介绍
子页面控件也是布局控件的一种，属于页面中的一部分，运行态根据条件显示不同的子页面。
2. 使用场景
当页面中某块区域要根据条件显示不同的内容，可以使用子页面控件，每个内容是一个子页面。
3. 控件特性
3.1 添加子页面
属性区中点击添加子页面，选择想要加载的子页面。根据业务需求，如果该子页面有入参，则配置入参参数映射。
3.2 设置激活规则
使用场景：当满足条件时切换相应子页面。
配置方法：
方式一：自动触发，当条件满足就激活对应子页面。
方法二：在事件中配置子页面控件动作执行激活。比如点击某个按钮时，再按条件判断激活子页面。
自动触发激活规则不开启时，需要配置控件动作才能执行激活规则；开启后，自动判断激活规则的条件，自动执行。
