本文为您介绍区块编辑器的结构和功能,帮助您快速了解区块编辑器开发区块。
进入到区块编辑器页面后,您可以使用系统提供的画布配置和组件配置工具,实现区块编辑器的各个功能。
区块编辑器的整体样式及功能使用方法,与画布编辑器保持一致,具体区块编辑器的功能及组件的使用说明请参见PC端画布编辑器概览和图层管理。
区块编辑器页面概览 区块内组件配置 区块内组件数据源配置
序号 | 名称 | 说明 |
1 | 工具栏 | 工具栏位于编辑器页面的最上方,您可以通过工具栏所提供的功能,切换编辑器页面、控制页面内模块显隐、配置区块设置以及预览或者发布制作好的区块。 |
2 | 图层 | 在图层列表中,可以看到画布中各个组件的图层位置,您可以根据区块需要,手动调整每个组件图层的上下位置关系和图层组件的缩略图样式,区块编辑器中的图层功能与可视化应用内的画布编辑器功能基本一致,具体功能详情请参见图层管理。 |
3 | 组件列表 | 在组件列表中,可以查看并搜索各种类型的组件,可以将组件拖动到区块画布中进行配置,完成区块的开发。 |
4 | 区块设置 | 单击区块画布的空白处,页面右侧会显示区块编辑器的基本配置参数。 在区块配置参数处,您可以调整区块的常用尺寸及区块大小、设置区块的背景颜色和图片、选择区块适配缩放方式调整栅格间距。详情请参见区块设置。 |
5 | 组件配置项 | 单击区块画布中任意一个组件,区块编辑器页面右侧会自动弹出组件配置项参数页面。区块编辑器内的组件配置项方法和可视化应用中的画布编辑器配置参数方法一致,具体配置方法请参见配置项说明。 |
6 | 组件数据源 | 单击区块画布中任意一个组件,区块编辑器页面右侧会自动弹出组件数据源配置页面。区块编辑器内的组件数据源支持的类型,包括静态数据源和API两种类型。在区块数据源面板中支持自动更新数据源内容,且API类型数据支持GET、POST和PUT三种请求方式,数据源配置面板支持使用数据过滤器,同时支持通过蓝图重新发起请求。 |
区块设置
单击区块画布外的空白处,页面右侧会显示区块配置项面板。
名称 | 描述 |
常用尺寸 | 设置画布中的区块常用尺寸类型,可选横向(适用PC)480×260px、横向(适用PC)900×260px、纵向布局(适用大屏)260×940px、纵向布局(适用大屏)380×940px、纵向布局(适用大屏)480×940px和自定义尺寸。 |
区块大小 | 设置区块的宽度和高度值,默认为选择的横向(适用PC)480×260px值,单位为px。 |
背景 | 调整区块的背景颜色。 |
页面缩放方式 | 根据区块展示的尺寸,选择合适的缩放方式,可选全屏铺满、等比缩放宽度铺满、等比缩放高度铺满、等比缩放高度铺满(可滚动)、等比居中铺满和不缩放。 |
加载状态图片 | 设置区块处于加载状态时的加载图片内容,您可以通过输入加载图片URL链接上传;也可单击图片框内的更改按键或拖拽本地电脑中的一张图片到框内即可完成图片的上传。 |
栅格间距 | 栅格间距是组件在区块页面中的最小移动单位,组件的边界会自动吸附到以栅格间距为网格的边缘上。最小为1px,此时组件的移动为平滑移动。 |
缩略图 | 单击缩略图右侧图框内的点击截图按键,即可为当前区块截取一张封面缩略图。 |