共计 1740 个字符，预计需要花费 5 分钟才能阅读完成。
上面这些是你印象中无代码能配置出的页面吗？“条条框框”、“一板一眼”的根底表单、列表、详情是无代码页面开发的全副吗？
当然不是！花色排版与自在布局的展现页、交互丰盛与多模块嵌套的首页，也是企业级软件页面中不可或缺的一部分~~
smardaten 作为企业级无代码开发平台，为了让页面设计也能像绘制 PPT 一样得心应手，实现页面花式布局、多模块嵌套、简单交互的设计难题，咱们精心打造了页面款式产品组件——画布。
明天就让小编来为您揭晓它的弱小能力吧~~
画布的功能定位与利用场景
“画布”可用于丰盛板块组合形成的官网门户首页；图文字段可随便摆放的设施状况列表页；单条信息花色展现的详情页等自由化、个性化页面。
目前 smardaten 在“利用”、“列表”、“详情”三侧页面搭建时均可开启“画布“能力，总的来看整个简单页面可由单个或多个利用、列表、详情画布联合形成。三种画布的配置在平台的操作体验保持一致，但解决问题与利用场景有肯定区别，先来进行简略辨别：
一图 Get√画布配置过程
如何利用“画布”进行简单页面配置呢？这里小编用一张图帮你疾速梳理逻辑：
stpe1 配置出整个页面的物理状态
smardaten 对软件页面的构建总体遵循“自顶向下”的准则，通过对简单页面的设想或原型观测，先实现整体布局款式的拆解。
①定页面款式：选中页面在款式配置中设定背景、边框、周围间距。如需换自定义背景图，需额定将纯色背景更改为通明，悬浮在色彩上进入更多色彩将“A”批改为 0。
②搭页面框架：抉择“单列、多列、标签页、步骤页、折叠页”等布局组件进行组合，其中拖动组件可实现两个组件之间的层级嵌套。
③明画布类型：判断该模块下的所需的画布类型，选中布局组件点击相应画布进行增加。留神增加三类画布的入口有稍微差异。
利用画布：开始 - 布局 - 画布 - 疾速设计
列表画布：开始 - 列表 - 画布卡片 / 画布列表 - 高级开发
详情画布：开始 - 详情 - 画布 - 高级开发
——这样便疾速实现了初始的界面布局，只需将各画布内容构建起来
step2 构建画布具体内容
进入开发后，怎么从一张空白的画布到最终出现的效果图呢？总的来说，咱们能够把想法到画布的落地分为“布局、组件、联动”三个局部。
①布局：以利用画布为例，首先咱们可在款式下批改所需的画布高宽度与背景色。如果须要自定义的背景图可通过插入图片组件，再拉动图片尺寸笼罩整个画布即可实现。
②组件：通过利落画布下文本、图片、数字、图标等素材组件到相应地位，可形成单个画布内容。图片、文本需在右侧配置栏实现相应内容更替，数字可采纳静态数据间接输出想要的数值，也能够绑定平台中的资产数据并对相应字段进行计数、过滤等数据操作。
列表与详情个别用于展现表单数据，将在“业务模型”中点击“已有页面”关联表单，产生“数据”下该表单的所有字段组件。
这些组件可从右侧间接选中拖入，且无需配置内容，将间接根据资产数据对每条信息做相干字段的内容展现。
③联动：每一个素材都可在“新增交互”中增加“点击”或“悬浮”事件，再通过逻辑管制中 30+ 组件的利落拽与内容配置，实现前端页面弹窗浮现、页面跳转，后端调用服务、服务编排等简单逻辑与交互。
同时列表画布中可配置多种画布，对数据分权做花色展现。只需选中新增画布的“条件”，在弹窗中配置显示条件即可。
值得一提的是，列表画布“详情、删除、编辑”等行内按钮的显示，需在“按钮配置”中开启后，额定在“按钮”栏将所需按钮拖入画布。
此外，若要开启筛选，需将“模式抉择”切换为表格后，在右侧交互中配置。——这样便实现了单个画布设计，仅需顺次实现残余画布操作
step3 由单到多实现所有画布
①画布复用：针对款式变动不大的画布，可利用 Ctrl+ C 与 Ctrl+ V 进行整个画布的复制粘贴，再进行内容的细节调整配置。
②渲染迭代：在列表画布中，只需配置首个卡片，平台将主动以该款式为模板实现所有卡片的迭代渲染，尔后多条数据的展现模式将保持一致。
当然不想保持一致的话，可选中除首张卡片外的任意卡片，点击“新增卡片”，便可还原为空白画布，实现另一种展现卡片设计，再通过上文提到的显示条件的限度，做不同数据不同类别的展现。
——这样便帮忙疾速还原所有画布的设计工作啦~
画布介绍就到这里了，快来试试吧！
进入“数睿数据”官网，试用环境收费注册登录