本文为您介绍区块编辑器的结构和功能,帮助您快速了解区块编辑器开发区块。

进入到区块编辑器页面后,您可以使用系统提供的画布配置和组件配置工具,实现区块编辑器的各个功能。
注意 区块编辑器的整体样式及功能使用方法,与画布编辑器保持一致,具体区块编辑器的功能使用说明请参见PC端画布编辑器概览
图 1. 区块编辑器页面概览
区块画布编辑器页面概览
图 2. 区块内组件配置
区块内组件配置
序号 名称 说明
1 工具栏 工具栏位于编辑器页面的最上方,您可以通过工具栏所提供的功能,切换编辑器页面、控制页面内模块显隐、配置区块设置以及预览或者发布制作好的区块。
2 图层 在图层列表中,可以看到画布中各个组件的图层位置,您可以根据区块需要,手动调整每个组件图层的上下位置关系和图层组件的缩略图样式,区块编辑器中的图层功能与可视化应用内的画布编辑器功能基本一致,具体功能详情请参见视图切换组件图层位置移动
3 组件列表 在组件列表中,可以查看各种类型的组件,可以将组件拖动到区块画布中进行配置,完成区块的开发。
4 区块设置 单击区块画布的空白处,页面右侧会显示区块编辑器的基本配置参数。

在区块配置参数处,您可以调整区块的常用尺寸及区块大小、设置区块的背景颜色和图片、选择区块适配缩放方式调整栅格间距。详情请参见区块设置

5 组件配置项 单击区块画布中任意一个组件,区块编辑器页面右侧会自动弹出组件配置项参数页面。区块编辑器内的组件配置项方法和可视化应用中的画布编辑器配置参数方法一致,具体配置方法请参见组件指南

区块设置

单击区块画布外的空白处,页面右侧会显示区块配置项面板。区块配置面板
名称 描述
常用尺寸 设置画布中的区块常用尺寸类型,可选横向(适用PC)480×260px横向(适用PC)900×260px纵向布局(适用大屏)260×940px纵向布局(适用大屏)380×940px纵向布局(适用大屏)480×940px自定义尺寸
区块大小 设置区块的宽度和高度值,默认为选择的横向(适用PC)480×260px值,单位为px。
背景颜色 调整区块的背景颜色。
背景图 上传大小不超过1 MB的背景图片,作为整个区块的背景图。
区块缩放方式 根据区块展示的尺寸,选择合适的缩放方式,可选全屏铺满等比缩放宽度铺满等比缩放高度铺满等比缩放高度铺满(可滚动)不缩放
栅格间距 栅格间距是组件在区块页面中的最小移动单位,组件的边界会自动吸附到以栅格间距为网格的边缘上。最小为1px,此时组件的移动为平滑移动。