Appearance
用户指南
应用管理
创建空白应用
你可以通过以下方式创建空白应用:
在浮木云主页左侧导航栏菜单中选择【应用管理】。
点击应用管理页面上方的【创建空白应用】,页面出现“创建应用”弹窗。
“创建应用”弹窗左侧的应用名称和行业分类是必填项,应用描述、应用封面和应用图标可以根据需要输入。行业分类主要分为智慧政务、园区管理、企业管理和其他四类,用于应用管理页面对行业分类的筛选。应用描述可以简要概括应用的适配业务场景及功能。应用封面用于应用管理页面的应用展示,推荐上传800*500尺寸的图片。应用图标展示在导航标题的前面,推荐上传100*100尺寸的图片。应用的弹窗右侧可以选择应用类型以及页面布局,应用类型包括WEB应用、APP应用、可视化大屏和WEB+APP应用,页面布局包括顶部导航、侧边导航、融合导航和无导航。
在“创建应用”弹窗中输入应用的基本信息,在右侧选择应用类型和页面布局,点击【确认】按钮后即可完成空白应用的创建。
从模板中创建
你可以通过以下方式从模板中创建应用:
在浮木云主页左侧导航栏菜单中选择【应用管理】。
点击应用管理页面上方的【从模板中创建】,页面出现“模板中心”弹窗。
可以根据需求选择弹窗首行筛选条件进行模板的模糊搜索,也可以在右边的搜索框里面输入项目名称进行精确搜索。首行筛选包括全部、热门推荐、最多浏览、最多使用、最新发布。
可以根据模板类型和行业分类进行组合筛选。模板类型包括全部、WEB、可视化大屏和移动端H5,行业分类包括全部、智慧政务、园区管理、企业管理和其他。
鼠标悬停在想要应用的模板上,应用封面上方出现应用相关标签,下方出现【预览】、【运行】和【使用】按钮。
点击【预览】按钮可以查看模板;点击【运行】按钮可前往运行页面,查看该模板运行后效果;点击【使用按钮】页面会出现的提示弹窗,点击弹窗右下角的【确定】按钮即可完成从模板中创建应用。
快速入门
你可以通过以下方式找到快速入门文档:
在浮木云主页左侧导航栏菜单中选择【应用管理】。
点击应用管理页面上方的【快速入门】,跳转到教学与帮助中心页面。
选择教学与帮助中心页面的导航栏上的标题,即可跳转到对应位置进行学习。
编辑应用
你可以通过以下方式编辑应用:
在应用管理页面选择要编辑的应用,点击右上方的按钮。
点击【新标签页打开】,即可在浏览器中增加一个新标签页并打开应用。
点击【应用协作】,即可跳转到应用协作页面,在应用协作页面可以添加协作成员。
点击【重命名】,页面出现“重命名应用”弹窗。
输入要修改的应用名称,点击【确定】即可完成应用的重命名。
点击【创建副本】,页面出现“确定要创建副本吗”的提示弹窗。
点击【确定】即可完成副本的创建。
保存应用
点击应用页面上方导航栏中的【应用设置】后,进入应用设置页面。
点击基本信息板块的【保存应用信息】按钮即可完成应用的保存。
删除应用
你可以通过以下两种方式删除应用:
从应用管理页面删除应用
点击【删除】按钮,页面出现提示弹窗。
点击弹窗下方的【确定】按钮即可完成应用的删除。
从应用设置页面删除应用
点击应用页面上方导航栏中的【应用设置】后,进入应用设置页面。
点击基本信息板块的【删除应用】按钮,页面出现提示弹窗。
点击弹窗下方的【确定】按钮即可完成应用的删除。
子应用管理
子应用是一个跨平台解决方案,可以适配各种终端,包括web、大屏、移动端等。每个子应用都可以独立构建并查看发布后效果。
新增子应用
你可以通过以下方式新增子应用:
点击子应用信息板块的【新增子应用】按钮。
在页面出现的弹窗里面输入新建的子应用名称,选择子应用类型和应用尺寸。新建子应用类型有WEB、可视化大屏和移动端H5三个选项,根据选好的应用类型再选择需要的应用尺寸。应用类型为WEB时可以选择的应用尺寸有1920*1080、1600*900、1366*768、1280*720,应用类型为可视化大屏时可以选择的应用尺寸有1920*1080、1600*900、1366*768、1280*720,应用类型为移动端H5时可以选择的应用尺寸有iphone6Plus/7Plus/8Plus、iphoneXsMax、iphone12/13/14、Pixel5、SamsungGalaxyS8+、SamsungGalaxyS20Ultra。
点击弹窗下方的【确定】按钮,即可完成子应用的新增。
新增子应用后,返回工作台页面可在页面上方切换子应用,查看新增的子应用。
在应用设置选择新增子应用后,点击【返回工作台】也可以直接查看新增子应用。
编辑子应用
你可以通过以下方式编辑子应用:
点击应用页面上方导航栏中的【应用设置】后,进入应用设置页面,点击切换到需要修改的子应用。
在“子应用信息”中可点击图片修改子应用封面、对子应用重命名、切换子应用尺寸。
在“子应用信息”中点击【子应用主题设置】可对该子应用配置主题色彩、组件尺寸和组件类型。组件尺寸的配置会应用在页面的相关组件上,例如按钮,高级表格,标签页。配置完成后点击右上角【保存】按钮。
点击【保存基本信息】按钮完成对子应用的编辑。
删除子应用
你可以通过以下方式删除子应用:
点击应用页面上方导航栏中的【应用设置】后,进入应用设置页面。
点击子应用信息板块的【删除子应用】按钮。
页面出现提示弹窗,点击【确定】按钮即可完成子应用的删除。
模板中心
标签筛选
你可以通过以下方式对模板进行标签筛选:
可依次点击最新发布、热门推荐、最多浏览、最多使用等关键词查找对应类型的模板。
依次点击WEB、可视化大屏、移动端H5来筛选模板的类型。
依次点击全部、智慧政务、园区管理、企业管理、其他来筛选模板的行业。也可以将模板类型与行业分类组合使用筛选模板。
模板搜索
你可以通过以下方式对模板进行搜索:
- 在搜索框输入关键字,就可完成对模板的搜索。
模板预览
你可以通过以下方式进行模板预览:
在浮木云主页左侧导航栏菜单中选择【模板中心】。
鼠标悬停在想要应用的模板上,应用封面上方出现应用相关标签,下方出现【预览】、【运行】和【使用】按钮。
点击【预览】按钮,页面出现模板预览弹窗。
在模板预览弹窗左侧选择想要预览的页面,在弹窗右侧可以看到页面效果。
通过右上角的缩放组件可以调整页面的缩放。
点击右上角的【使用】按钮,会出现提示弹窗。
点击提示弹窗右下角的【确定】按钮,即可使用模板。
模板运行
你可以通过以下方式查看模板运行后效果:
- 鼠标悬停在想要应用的模板上,应用封面上方出现应用相关标签,下方出现【预览】和【使用】按钮。
- 点击【运行】按钮,页面跳转至应用运行后页面,可查看应用运行后页面以及事件交互效果。
模板使用
在浮木云主页左侧导航栏菜单中选择【模板中心】。
鼠标悬停在想要应用的模板上,应用封面上方出现应用相关标签,下方出现【预览】、【运行】和【使用】按钮。
点击【使用】按钮,页面出现提示弹窗。
点击提示弹窗右下角的【确定】按钮,即可完成模板的使用。
页面与导航
导航类型
导航通常指的是应用程序中引导用户访问各个功能或内容的布局结构。导航的作用是告诉用户如何找到他们需要的信息或完成特定的任务。一个良好的导航设计应简洁明了,避免过多的层级关系和复杂的操作,导航类型有:“顶部导航”、“侧边导航”、“融合导航”、“无导航”四种类型。
顶部导航
顶部导航是一种常见的导航方式,它位于应用程序界面的顶部,提供了一个可视化的菜单选项,使用户可以方便地访问应用程序中的各个页面或功能。顶部导航最多设置二级菜单层级,顶部导航的优点是针对内容跟较少的页面设计目的强,内容一目了然。
你可以通过以下方式创建顶部导航:
在工作台顶部点击最右侧的“应用设置”按钮。
在应用设置的子应用信息模块选择需要设置导航的子应用。
在子应用导航配置中点击顶部导航后点击“保存导航配置”按钮后即可配置成功。
侧边导航
侧边导航通常位于应用程序界面的左侧,提供了一个侧边栏的菜单选项,使用户可以方便地访问应用程序中的各个页面或功能。侧部导航最多设置二级菜单层级,侧边导航的优点是干净,可以显示较多的内容,并且有利于垂直浏览,这符合人类自然习惯。
你可以通过以下方式创建侧边导航:
- 在子应用导航配置中点击侧边导航后点击“保存导航配置”按钮后即可配置成功。
融合导航
融合导航是一种将顶部导航和左侧导航相结合的导航方式。这种导航方式提供更加直观、高效和个性化的用户体验。融合导航最多设置三级菜单层级,融合导航方式的优点包括:提供更灵活和多样化的导航路径,可以根据应用的特点和需求进行合理的设计和布局,以提供最佳的用户体验。
你可以通过以下方式创建融合导航:
- 在子应用导航配置中点击融合导航后点击“保存导航配置”按钮后即可配置成功。
无导航
无导航指的是没有提供明显的导航菜单或指示,用户需要通过其他方式在应用中进行浏览和操作。无导航类型不需要用户去设置,子应用默认导航类型为无导航。若子应用从“顶部导航”、“侧边导航”、“融合导航”设置为无导航,则必须删除原有的菜单才可设置无导航。无导航的优点是摒弃了传统的菜单栏和标签页,使得页面更加简洁明了,用户可以专注于内容本身,减少了分散注意力的元素,设计强调内容的重要性,将内容直接呈现在用户面前,有利于突出重点,使用户更容易理解并接受信息。
导航菜单数据配置
导航菜单数据配置是指在Web应用中对导航菜单进行设置和调整的过程。通过配置数据,可以自定义导航菜单的样式、内容和交互方式,以满足用户需求和提高用户体验。导航菜单数据配置包括“全部展开”、“全部收起”、“新增菜单”、“编辑菜单”、“删除菜单”、“新增子应用”。
全部展开
导航菜单数据配置全部展开是指在Web应用中,将导航菜单的所有子菜单项都设置为展开状态。当用户访问导航菜单时,所有子菜单项都将自动展开,无需用户手动展开。全部展开的优点是用户可以快速地看到所有可用的子菜单项,并直接点击所需的链接,提升了用户体验。
你可以通过以下方式配置全部展开:
- 在子应用导航配置中点击用户需要的导航类型后点击“导航菜单数据配置”按钮后会弹出导航菜单数据配置弹窗。
- 在导航菜单数据配置弹窗中点击“全部展开”按钮后即可全部展开。
全部收起
导航菜单数据配置全部收起是指在Web应用中,将导航菜单的所有子菜单项都设置为折叠状态。这意味着当用户访问导航菜单时,所有子菜单项都将默认折叠,用户需要手动展开所需的子菜单项。全部收起的优点是节省屏幕空间,使主内容区域更加集中和清晰。
你可以通过以下方式配置全部收起:
- 在子应用导航配置中点击用户需要的导航类型后点击“导航菜单数据配置”按钮后会弹出导航菜单数据配置弹窗。
- 在导航菜单数据配置弹窗中点击“全部收起”按钮后即可全部收起。
新增菜单
导航菜单数据配置新增菜单是指在Web应用中配置数据来添加新的菜单。这通常涉及编辑导航菜单的数据结构,添加菜单的父级菜单、菜单名称、菜单别名、排序、跳转页面、关联页面、菜单图标属性,并更新相应的菜单显示内容。父级菜单为新增的菜单的上一级菜单,菜单名称为新增的菜单的名称,菜单别名为新增的菜单的别称,排序为新增的菜单所在顺序,跳转页面为新增的菜单被点击后跳转到目标页面,关联页面为新增的菜单绑定关系的页面,菜单图标则是菜单的显示图标。
你可以通过以下方式新增菜单:
- 在导航菜单数据配置弹窗中点击【新增菜单】按钮后会弹出新增弹窗。
- 在新增弹窗中填写新增的菜单的父级菜单、菜单名称、菜单别名、排序、跳转页面、关联页面、菜单图标字段属性后点击确定即可新增成功。
编辑菜单
导航菜单数据配置编辑菜单是指在Web应用中对现有导航菜单进行编辑的过程。通过编辑菜单,可以修改菜单的父级菜单、菜单名称、菜单别名、排序、跳转页面、关联页面、菜单图标属性,以满足用户需求或更新菜单显示内容。
你可以通过以下方式编辑菜单:
- 点击导航菜单数据配置弹窗中要编辑的菜单对应的最右侧第二个蓝色按钮会打开编辑菜单弹窗。
- 在编辑弹窗中填写要编辑菜单的父级菜单、菜单名称、菜单别名、排序、跳转页面、关联页面、菜单图标字段属性后点击确定即可编辑成功。
删除菜单
导航菜单数据配置删除菜单是指在Web应用中将现有导航菜单从菜单结构中移除的过程。通过删除菜单,可以移除不再需要或不再适用的菜单项,以简化导航菜单的结构和内容。
你可以通过以下方式删除菜单:
- 点击导航菜单数据配置弹窗中要删除的菜单对应的最右侧红色按钮会打开删除提示弹窗。
- 提示弹窗中会给出消息提示确认您是否删除菜单,点击提示弹窗中的【确定】按钮即可删除。
新增子菜单
导航菜单数据配置新增子菜单是指在Web应用中通过配置数据来添加新的子菜单项的过程。这通常涉及编辑导航菜单的数据结构,添加新的子菜单项,并更新相应的父菜单项以包含新添加的子菜单项。
你可以通过以下方式新增子菜单:
- 点击导航菜单数据配置弹窗中要新增子菜单的菜单对应的最右侧第一个按钮会打开新增子菜单弹窗。
- 在新增子弹窗中填写要新增的子菜单的父级菜单、菜单名称、菜单别名、排序、跳转页面、关联页面、菜单图标字段属性后点击确定即可新增子菜单成功。
页面分组管理
页面分组即是给页面创建文件夹进行分类管理。
新增分组
登录浮木云后,在应用管理界面,选择需要操作的子应用。
在当前子应用下点击“页面”菜单下“全部”文件夹右侧的“齿轮”按钮,在弹出的下拉框中点击【新增分组】按钮。
在弹出的“新增分组”弹窗中输入分组名称,点击【确认】按钮,即可在左侧看到新增的分组。
编辑分组
点击想要编辑的分组右侧的【齿轮】按钮,在出现的下拉框中选择【编辑分组】按钮。
在出现的弹窗中填写“名称”,点击确定完成修改。
删除分组
点击想要编辑的分组右侧的【齿轮】按钮,在出现的下拉框中选择【删除分组】按钮。
在出现的弹窗中点击确定完成删除,删除分组后,分组下所有的页面都会删除,谨慎操作。
页面管理
新增页面
点击浮木云导航栏【页面设计】按钮,按需选择对应的子应用。在当前子应用下点击“页面”菜单下“全部”文件夹右侧的【设置】按钮,在弹出的弹窗中点击【新增页面】。
在弹出的【新增页面】弹窗中输入页面名称和标签,点击【确认】完成新增,页面的标签首字母必须大写,不能包含中文和数字,且不同页面的标签不能一样。页面名称用于在画布中区分不同的页面,页面标签用于区分发布后的页面。
一般页面的命名规则为:“模块-页面名称 ”或“人员-页面名称”,例如“人员管理-添加人员”、“管理人员-首页”。
编辑页面
点击页面右侧的【齿轮】按钮,在出现的下拉框中选择“编辑页面”。
在出现的弹窗中修改“名称”后,点击确定完成编辑。
移动页面
点击需要移动的页面右侧的【齿轮】按钮,在出现的下拉框中选择“移动页面”。会弹出信息弹窗。
在信息弹窗中选择移动页面的目标子应用。
点击确认按钮后即可在目标子应用看到移动的页面。
克隆页面
点击需要克隆的页面右侧的【齿轮】按钮,在出现的下拉框中选择“克隆页面”。
弹出克隆页面弹窗,自拟名称和标签后点击【确定】按钮。
克隆后的页面将会默认出现在“全部”分组之下,克隆页面后,原页面的数据绑定和事件编排也会一并带过来,在设计页面时应根据需要进行修改。
克隆并移动
点击页面右侧的【齿轮】按钮,在出现的下拉框中选择“克隆并移动”。会弹出信息弹窗。
在信息弹窗中填写名称、标签、选择应用和选择页面要移动到的子应用,WEB端的子应用只能移动到WEB端,其他类型子应用同理。
点击【确认】按钮后即可在目标子应用看到克隆的页面。
删除页面
点击页面右侧的【齿轮】按钮,在出现的下拉框中选择“删除页面”。
在出现的弹窗中点击【确定】完成删除(若该页面已配置导航菜单则无法删除,需要解除菜单配置才能删除)。
页面配置
点击浮木云左侧导航栏的【页面配置】按钮。
弹出页面配置弹窗,弹窗内显示页面分组和页面信息。
可通过页面名称或页面标签查询目标页面。
点击【编辑】按钮,可修改页面名称、标签和是否导出。是否导出指在应用发布后,应用是否要包含该页面。
页面布局
画布基本属性
应用页面一般宽高为1920 * 1080px,顶栏高度为60px,由于画布中的“页面”自带10px的左右内边距,再去掉浏览器的标签页,系统下方的任务栏等影响,可操作的页面一般总宽高为1900px * 857px。(若有左侧导航栏还应去掉导航栏的宽度)。
页面结构树
熟练使用页面结构树,可以让我们快速定位组件的位置、页面搭建存在问题、审视页面的布局是否合理。通过页面结构树视图可以对当前页面的所有组件进行查询、编辑和排版。
在“页面设计”界面选择所需的子应用以及页面,左侧导航栏的“页面结构树”即可对当前页面的组件进行编辑和排版。
在当前页面新增组件库中的组件之后,左侧导航栏的“页面结构树”中的输入框中对新增的组件进行搜索、过滤以及定位。
“页面结构树”也会根据新增的组件自动生成树状结构目录,点击左侧导航栏的“页面结构树”下组件目录树对应的组件名,中间画布中会自动选中对应的组件。
页面操作
页面操作位于“设计页面”画布上方菜单栏,熟练使用页面操作可以使我们更加方便,快速的搭建页面,也能减少错误率。使用页面操作的前提是页面的状态为“解锁”状态。
释放/解锁页面
点击“资源锁”后可修改当前页面的状态,当“页面资源锁”处于锁定的状态下时,“页面设计”下当前页面的页面结构、组件库和属性配置、数据绑定、事件编排都将无法操作,而其他人可以进入该页面进行操作。当“页面资源锁”处于“解锁”状态下时候,自己则可以对页面进行操作,而其他人在进入该页面时则为“锁定”状态。所以自己在操作“页面设计”之前必须先确保当前页面的页面资源锁处于解锁状态,想要他人操作该页面之前必须确保自己当前页面的资源锁处于锁定状态,关闭该页面自动解锁。操作步骤如下:
点击“设计页面”画布上方菜单栏的“锁”图标。
当“锁”图标处于解锁状态时,再次点击“锁”图标,页面将处于锁定状态,且当前页面所有功能都将无法操作。
保存
- 保存是保存当前的页面设计,可点击画布上方“保存”按钮,也可通过快捷键“Ctrl+S”实现。
居中
- 居中是将画布处于页面中间,快速回到画布。
撤销/恢复
- 点击撤销可撤销上一步操作,恢复是恢复撤销的操作。
删除
- 选中画布中组件,点击删除按钮可删除选中的组件。也可点击页面结构树种的组件进行删除。
复制/粘贴
选中需要复制的组件,点击画布上方菜单栏“复制”图标,提示“复制成功”,粘贴组件后,该组件的数据绑定和事件编排会自动清除。
复制好组件后,点击画布中或结构树中待粘贴的父组件,点击画布上方菜单栏“粘贴”按钮。
待粘贴处显示该组件说明粘贴成功,同时右上角提示“粘贴成功”
复制一次后可进行多次粘贴。
预览
在页面设计画布中完成设计后,可以通过预览的方式查看页面设计情况,页面预览操作步骤如下:
- 在“页面设计”中,点击画布上方菜单栏“保存”按钮,或通过快捷键“Ctrl + S”对页面进行保存(若未保存则预览的是上次保存后的页面)。
- 保存好页面后,点击画布上方菜单栏“预览”图标。
- 点击“预览”图标之后,浏览器会自动新增一个预览标签页。
代码预览
在页面设计画布中完成设计后,可以使用代码预览来查看搭建的页面的代码,页面代码预览操作步骤如下:
- 在“页面设计”中,点击画布上方菜单栏“保存”按钮,或通过快捷键“Ctrl + S”对页面进行保存(若未保存则代码预览的是上次保存后的页面)。
- 保存好页面后,点击画布上方菜单栏“代码预览”图标。
- 点击“预览”图标之后,浏览器会在当前窗口右侧自动弹出代码展示窗口。
页面校验
在页面设计画布中完成设计后,可以使用页面校验来判断当前搭建的页面的交互编排是否有错误、组件是否存在、页面是否存在、页面参数是否存在和变量是否存在。如果页面有错误的话,校验就无法通过。 页面校验操作步骤如下:
- 在“页面设计”中,点击画布上方菜单栏“保存”按钮,或通过快捷键“Ctrl + S”对页面进行保存。
- 保存好页面后,点击画布上方菜单栏“页面校验”图标。
- 点击“页面校验”图标之后,浏览器会在当前窗口自动弹出提示弹框。
页面校验未通过的情形如下:
页面校验通过的情形如下:
缩放画布
缩放画布即是缩小或放大画布尺寸,可选择合适的画布大小进行页面搭建,浮木云画布的缩放范围为40%-200%。
可以直接点击画布上方菜单栏的“缩放画布”图标。
布局与容器
布局
可通过弹性布局和块级布局来对页面进行布局。
弹性布局:使父容器能够调节子组件的宽度/高度和排列顺序,从而能够最好地填充可用空间,可使用自动换行、横向对齐、纵向对齐来设置子组件的排列位置。在搭建页面时一般只用弹性容器。
块级布局:无论子组件尺寸大小,它都会独占一行的空间;当需要内部子组件纵向排列时使用布局容器。在搭建页面时一般只用布局容器。
定位
相对定位:相对定位的主要作用是让组件相对它自身的位置定位;如果组件自身在一个区域内做好了定位,设置偏移量后它将在原本位置的基础上进行偏移。例:设置顶部偏移50px,左侧偏移50px
绝对定位:设置绝对定位后,组件的定位会相对于它设置了相对定位的父级容器来偏移;例:设置顶部偏移60px,左侧偏移79px
组件库
容器
布局容器
布局容器是包含和组织其他控件的容器,容器中的组件默认为纵向排列,正确的使用布局容器可以帮我们构建良好结构化的用户界面。
- 样式配置
样式配置-布局样式
宽度和高度:确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据内部组件的高宽确定容器的大小。
定位方式:可选择相对定位和绝对定位,通过设定至顶部、左侧、右侧、底部的距离控制其位置。
水平溢出和垂直溢出:可以选择隐藏和滚动,当布局容器中内容的尺寸超过弹性容器的尺寸时,选择隐藏只能展示布局容器尺寸范围内的内容,选择滚动则可以通过滑动展示所有内容。
内外边距:内边距是组件内容与组件边界之间的空间,在内容周围创建一个内部边缘,用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间,用于控制组件与其他组件之间的距离。如下图所示,对第一行外部容器的左内边距设置为50px,做外边距设置为50px。
样式配置-背景样式
背景阴影:可选择基础投影和浅色投影,使用后容器边框显示背景阴影。
背景图片:点击上传标识从本地选择图片或输入图片地址作为容器的背景图片。
背景颜色:通过手动拖动拾色器、输入颜色的rgba值或输入颜色的十六进制值的方式改变背景颜色。
显示边框:选择“是”则布局容器边框会自动填充边框样式、边框颜色、盒子边框,填充后可直接修改边框样式;选择“否”则不会自动填充容器边框,如需要设置边框册需要依次配置边框样式、边框颜色、盒子边框的内边框。
边框样式:用于修改盒子边框的样式,可选择实线、点状、双线、虚线,与边框颜色、盒子边框配合使用。
边框颜色:用于修改盒子边框的颜色,通过手动拖动拾色器、直接输入rgba值或输入十六进制值的方式改变颜色。
盒子边框:用于围绕组件的内容和内外边距创建一个可见的边界。下方图例将盒子边框四角设置为20,使盒子四个角平滑化,将上下左右值设置为10,使盒子边框大小为10,并将边框样式设置为虚线,边框颜色设置为蓝色。
- 属性配置
属性配置--原生属性
组件名称:用于命名组件,便于页面管理。
是否隐藏:用于设置组件是否在画布预览位置可见。
属性配置--扩展属性
- 布局容器暂无扩展设置。
- 交互编排
- 选择卡可设置点击事件,通过设置点击事件动作实现选择卡的交互
弹性容器
弹性容器是用于构建灵活的、自适应布局的模块,容器内的组件默认为横向排列,它提供了一种方便的方式,使容器内的元素按指定的规则排列并可以扩展和收缩。
- 样式配置:
样式配置--布局样式:
宽度和高度:确定容器在布局的大小,可选择px值、百分比和自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据内部组件的高宽确定容器的大小。
定位方式:默认为相对定位,可选择相对定位和绝对定位,通过设定至顶部、左侧、右侧、底部的距离控制组件位置。
自动换行:可选择是和否,是的话允许多个组件在同一行水平排列,否只允许一行放置一个组件。
横向对齐和纵向对齐:确定其内部组件在容器中的对齐方式。
水平溢出和垂直溢出:可以选择隐藏和滚动,当布局容器中内容的尺寸超过弹性容器的尺寸时,选择隐藏只能展示弹性容器尺寸范围内的内容,选择滚动则可以通过滑动展示所有内容。
内外边距:内边距是组件内容与组件边界之间的空间,在内容周围创建一个内部边缘,用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间,用于控制组件与其他组件之间的距离。
样式配置--背景样式:
背景阴影:可选择基础投影和浅色投影。
背景图片:点击上传标识从本地选择图片或输入图片地址作为容器的背景图片。
背景颜色:通过手动拖动拾色器、直接输入rgba值或输入十六进制值的方式改变背景颜色。
显示边框:当点击是后,弹性容器就回显示边框,当点击否后,弹性容器就不会显示边框
边框样式:用于修改盒子边框的样式,可选择实线、点状、双线、虚线,与边框颜色、盒子边框配合使用。
边框颜色:用于修改盒子边框的颜色,通过手动拖动拾色器、直接输入颜色的rgba值或输入十六进制值的方式改变颜色。
盒子边框:用于围绕组件的内容和内外边距创建一个可见的边界。下方图例将盒子边框四角设置为20,使盒子四个角平滑化,将上下左右值设置为10,使盒子边框大小为10,并将边框样式设置为虚线,边框颜色设置为蓝色。
- 属性配置:
属性配置--原生属性:
- 组件名称,命名组件,便于页面管理。
- 是否隐藏,用于设置组件是否可见。
属性配置--原生属性:
- 弹性容器暂无扩展设置。
- 交互编排
- 选择卡可设置点击事件,通过设置点击事件动作实现选择卡的交互
选择卡
选择卡一般用于分隔内容上有关联但属于不同类别的数据集合,例如项目的不同类别,使用标签页的前提是这些类别是有限的。标签页可以帮助开发者更好地组织页面内容,减少信息量,方便用户快速找到自己需要的信息,提高页面的易用性和用户体验。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
宽度和高度:确定组件的大小,可选择px值、百分比和自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据内部组件的宽度确定容器的大小。
定位方式:可选择相对定位和绝对定位,通过设定至顶部、左侧、右侧、底部的距离控制组件位置。
布局方式:锁定为块级布局,即标签页在排版时单独占据一行。
水平溢出和垂直溢出:可以选择隐藏和滚动,当标签页中内容的尺寸超过标签页的尺寸时,选择隐藏只能展示标签页尺寸范围内的内容,选择滚动则可以通过滑动展示所有内容。
内外边距:内边距是组件内容与组件边界之间的空间,在内容周围创建一个内部边缘,用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间,用于控制组件与其他组件之间的距离。
- 属性配置
属性配置-原生属性
组件名称:命名组件,便于页面管理。
组件尺寸:确定组件的大小,可选择超小尺寸、小型尺寸、中型尺寸、默认尺寸、较大尺寸、大型尺寸、超大尺寸。
标签风格:可选择默认、选项卡、卡片三种风格,来修改标签样式。
标签位置和标签颜色:标签在标签页组件的位置,可选择顶部、右侧、左侧和标签的颜色设置。
属性配置--扩展设置
- 标签设置,点击添加可新增一个标签页,在标签设置内可修改每个标签的标题,操作栏可删除标签。
- 交互编排
- 选择卡可设置点击事件,通过设置点击事件动作实现选择卡的交互.
卡片
卡片即是标题、容器的组合体,使用卡片无需使用容器的嵌套来达到布局效果,可以提高我们配置页面时的效率。另卡片组件和标题配合起来可以使每一个卡片的内容紧凑,卡片与卡片之间主题分明,具有较高的可读性。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
宽度和高度:确定组件的大小,可选择px值、百分比和自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据内部组件的宽度确定容器的大小。
定位方式:可选择相对定位和绝对定位,通过设定至顶部、左侧、右侧、底部的距离控制组件位置。
布局方式:可选择块级布局和内联布局,与对齐方式复合使用。
内联方式指下一个组件与按钮并排排列,此时可选择对齐方式,使两个组件按顶端对齐、居中对齐或底部对齐的方式并排。
块级布局指按钮单独占一行。
内外边距:内边距是组件内容与组件边界之间的空间,在内容周围创建一个内部边缘,用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间,用于控制组件与其他组件之间的距离。
- 属性配置
属性配置-原生属性
组件名称:命名组件,便于页面管理。
组件尺寸:默认为默认尺寸,可选超小尺寸、小型尺寸、中型尺寸、较大尺寸、大型尺寸和超大尺寸
卡片标题:用于修改卡片组件的标题文本文字。
阴影显示:可选择总是显示、悬浮显示、从不显示,悬浮显示是当鼠标悬浮在卡片上时,卡片出现阴影显示。
内部边距:可选择相对定位和绝对定位,通过设定至顶部、左侧、右侧、底部的距离控制组件的位置。
标题颜色和图标颜色:可修改标题的颜色和图标的颜色。
属性配置--扩展设置
- 操作按钮设置:可在卡片中添加按钮,点击该按钮弹出弹窗,填选相关信息后确定,卡片中出现按钮。
- 交互编排
- 卡片暂无交互编排。
弹窗
弹窗是出现在当前页面之上的一个浮动窗口,自带“取消”和“确定”两个按钮,此类弹窗的功能主要是引导用户填写信息,与基础组件中的提示弹窗不同。它相当于一个容器,内部可以使用其他容器实现布局,并使用基础组件、表单组件适配弹窗内容。弹窗组件常见的应用场景有增、删、改、详情等等。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
- 高度和宽度:确定组件的大小,可选择px值、百分比和自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据内部组件的宽度确定容器的大小。
- 属性配置
属性配置-原生属性
组件名称:命名组件,便于页面管理。
组件尺寸:默认为默认尺寸,可选超小尺寸、小型尺寸、中型尺寸、较大尺寸、大型尺寸和超大尺寸
弹窗标题:用于修改弹窗顶部的标题文字。
顶部距离:指弹窗距离页面顶部的距离大小,单位为vh。
弹窗显隐:用来设置弹窗在页面中是否可见。
按钮显隐:用来设置弹窗的取消按钮和确定按钮在页面中是否可见。
取消文案和确定文案:用来设置弹窗的取消按钮和确定按钮的文本文字。
取消类型和确定类型:用于修改弹窗的确定按钮和取消按钮的颜色样式。
属性配置--扩展设置
- 弹窗暂无扩展设置。
- 交互编排
- 弹窗可设置点击事件,通过设置点击事件动作实现弹窗的交互.
基础组件
按钮
按钮一般与事件编排配合使用,点击按钮触发某个事件。普通按钮用于提交表单、完成操作、打开链接、触发动作等等,是最常用的一种按钮类型。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
宽度和高度:确定其在布局中的大小,可选择px值、百分比和自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据按钮内部文字的宽度和高宽确定按钮的大小。
定位方式:可选择相对定位和绝对定位,通过设定至顶部、左侧、右侧、底部的距离控制组件的位置。
布局方式:可选择块级布局和内联布局,与对齐方式复合使用。
内联方式指下一个组件与按钮并排排列,此时可选择对齐方式,使两个组件按顶端对齐、居中对齐或底部对齐的方式并排。
块级布局指按钮单独占一行。
内外边距:内边距是组件内容与组件边界之间的空间,在内容周围创建一个内部边缘,用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间,用于控制组件与其他组件之间的距离。
样式配置-背景样式
背景阴影:可选择基础投影和浅色投影
背景图片:点击上传标识从本地选择图片或输入图片地址作为按钮的背景图片
背景颜色:在颜色面板上点击、直接输入RGB值或十六进制值来选择背景颜色。
显示边框:可选择按钮是否需要显示边框
边框样式:用于修改盒子边框的样式,可选择实线、点状、双线、虚线,与边框颜色、盒子边框配合使用。
边框颜色:用于修改盒子边框的颜色,在颜色面板上点击、直接输入RGB值或十六进制值来选择颜色。
盒子边框:用于围绕组件的内容和内外边距创建一个可见的边界。
样式配置-文字样式
字体粗细:可以调整按钮内的文字的字体粗细
字体样式:可以调整按钮内的文字的字体样式,用以选择不同的字体。
字体颜色:可以调整按钮内的文字的字体颜色。
样式配置-选择/悬浮样式
背景颜色:当选中或者鼠标悬浮在该按钮上时,按钮的背景颜色。
边框颜色:当选中或者鼠标悬浮在该按钮上时,按钮的边框颜色。
字体颜色:当选中或者鼠标悬浮在该按钮上时,按钮的字体颜色。
- 属性配置属性配置-原生属性
组件名称:命名组件,便于页面管理。
按钮名称:用于设置按钮中显示的文字内容
组件尺寸:默认为小型按钮,可选默认按钮、中等按钮、小型按钮和超小按钮
按钮类型:根据按钮的功能选择不同的按钮类型,可选文字按钮、默认按钮、主要按钮、成功按钮、警告按钮危险按钮和信息按钮,不同类型的按钮样式不同。
按钮模式:调整按钮的风格模式,可选择默认或者朴素。
按钮圆角:可选默认或者圆角,选择默认时按钮为矩形,选择圆角时按钮则为圆角矩形。
按钮圆形:可选默认或者圆形,选择相应的选项按钮就会调整为矩形或者圆形。
图标类名:可选择插入按钮图标在到文字前,注意需填写icon图标名。
是否禁用:选择禁用后按钮将无法点击。
属性配置--扩展设置
- 按钮暂无扩展设置。
- 交互编排
- 按钮可设置点击事件,通过设置点击事件动作实现按钮的交互.
文字
文字是页面最基本组件之一,合理的文字设计可以让文字更加清晰易读,增强设计的视觉冲击力和吸引力,提升用户体验。
- 样式配置
- 样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
宽度和高度:确定文字组件的大小,可选择px值、百分比和自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据文字内容的高宽确定组件的大小。
定位方式:可选择相对定位和绝对定位,通过设定至顶部、左侧、右侧、底部的距离控制其位置。
布局方式:锁定为弹性布局。弹性布局使其他组件与文字可以横向排列。
内外边距:内边距是组件内容与组件边界之间的空间,在内容周围创建一个内部边缘,用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间,用于控制组件与其他组件之间的距离。
样式配置-背景样式
背景阴影:可选择基础投影和浅色投影。
背景图片:点击上传标识从本地选择图片或输入图片地址作为组件的背景图片。
背景颜色:在颜色面板上点击、直接输入RGB值或十六进制值来选择颜色。
显示边框:可选择文字是否需要显示边框
边框样式:用于修改盒子边框的样式,可选择实线、点状、双线、虚线,与边框颜色、盒子边框配合使用。
边框颜色:用于修改盒子边框的颜色,在颜色面板上点击、直接输入RGB值或十六进制值来选择颜色。
盒子边框:用于围绕组件的内容和内外边距创建一个可见的边界,标识出组件的范围。
样式配置-文字样式
字体大小:可以设置组件内的文字的字体大小。
字体粗细:可以调整组件内的文字的字体粗细。
字体样式:可以调整组件内的文字的字体样式,用以选择不同的字体。
字体颜色:可以调整组件内的文字的字体颜色。
- 属性配置
属性配置-原生属性
组件名称:命名组件,便于页面管理。文字是页面最基本组件之一,合理的文字设计可以让文字更加清晰易读,增强设计的视觉冲击力和吸引力,提升用户体验。
文字内容:用以设置文字组件中的具体文字内容。
水平对齐:可选居左、居中和居右,灵活调整文字内容在组件中的水平位置。
垂直对齐:可选顶部、居中和底部,灵活调整文字内容在组件中的垂直位置。
首行缩进:可以调整文字内容的首行缩进距离,单位为px,直接输入数字即可。
文字间距:可以调整文字内容的间距,单位为px,直接输入数字即可。
属性配置--扩展设置
- 文字暂无扩展设置。
- 交互编排
- 文字暂无交互编排。
图片
图片组件支持上传本地图片,调整图片填充方式。若需调整图片的布局方式,需要与容器配合使用。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
宽度和高度:可选择px值、百分比和自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据具体图片的宽度和高宽确定图片组件的大小。
定位方式:图片组件的定位方式可选相对定位和绝对定位,当选择相对定位时,能够设置顶部、左侧、右侧、底部的距离。
布局方式:可选择块级布局和内联布局。与对齐方式复合使用。
内联布局指与下一个组件并列排列,此时可选择对齐方式,使两个组件按顶端对齐、居中对齐或底部对齐的方式排列。
块级布局指该组件单独占据一行。
内外边距:内边距是组件内容与组件边界之间的空间,在内容周围创建一个内部边缘,用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间,用于控制组件与其他组件之间的距离。
- 属性配置属性配置-原生属性
组件名称:命名组件,便于页面管理。
图片链接:用户能够上传本地图片,或者直接输入图片链接来为图片组件添加具体的图片,增加图片组件后,页面设计将更加生动美观。
填充方式:可以选择填充、适应、剪裁和保留原比例,可根据具体的需求选择填充方式。
可否预览:有可预览和不可预览两种选项,应该根据实际情况灵活选择具体的选项。
属性配置-扩展设置
- 图片暂无扩展设置。
- 交互编排
- 图片可设置点击事件,通过设置点击事件动作实现图片的交互.
描述列表
描述列表用于展示一组相关的标签和内容。描述列表每一行都可以设置占据行数、标签宽度和内容宽度。常用于详情页面。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
宽度和高度:可选择px值、百分比和自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据内容的宽度和高宽确定描述列表的大小。
定位方式:描述列表的定位方式为相对定位,可以设置顶部、左侧、右侧和底部的距离来调整描述列表组件的定位。
布局方式:锁定为块级布局,占据一行。
内外边距:内边距是组件内容与组件边界之间的空间,在内容周围创建一个内部边缘,用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间,用于控制组件与其他组件之间的距离。描述列表组件默认提供5个单位的内边距。
- 属性配置
属性配置-原生属性
组件名称:命名组件,便于页面管理。
标题名称:用于设置描述列表的具体标题名称。
组件尺寸:可以直接控制描述列表组件的尺寸而无需设置宽度和高度,在改变描述列表组件的尺寸时,描述列表内部的行列尺寸也会随之变化。
排列方向:通过此设置可以调整描述列表组件的排列方向,可以选择水平或者竖直的排列方向。
每行列数:默认提供的每行列数为3,即一列展示三个数据项,用户可根据实际情况选择不同的列数。
有无边框:可以控制描述列表组件是否存在边框,默认情况下为存在边框,用户也可以设置取消边框,这时页面设计将更加简洁。
标题字体:可以设置变体字体的大小,单位为px,直接输入数字即可调整字体大小,默认提供的标题字体大小为16px。
标题颜色:在颜色面板上点击、直接输入RGB值或十六进制值来选择颜色。
标签颜色:通过此设置可以自定义调整标签的颜色。
内容颜色:通过此设置可以自定义调整描述列表内颜色
属性配置-扩展属性
- 描述列表数据设置:通过此设置可以调整描述列表展示的详细数据,其中包括字段名称、字段值、绑定属性、占据列数、标签宽度、值类型和值配置。
- 交互编排
- 描述列表暂无扩展设置。
页头
页头组件主要是按钮与文字的组合体,一般用于返回上级页面。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
宽度:确定其在布局中的大小,可选择px值、百分比和自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据页头的宽度确定组件的大小。
内外边距:内边距是组件内容与组件边界之间的空间,在内容周围创建一个内部边缘,用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间,用于控制组件与其他组件之间的距离。页头默认提供5个单位的左右内边距。
样式配置-背景样式
背景阴影:可选择基础投影和浅色投影。
背景图片:点击上传标识从本地选择图片或输入图片地址作为页头的背景图片。
背景颜色:在颜色面板上点击、直接输入RGB值或十六进制值来选择颜色。
显示边框:用与选择是否需要显示边框。
边框样式:用于修改盒子边框的样式,可选择实线、点状、双线、虚线,与边框颜色、盒子边框配合使用。
边框颜色:用于修改盒子边框的颜色,在颜色面板上点击、直接输入RGB值或十六进制值来选择颜色。
盒子边框:用于围绕组件的内容和内外边距创建一个可见的边界。
- 属性配置
属性配置-原生属性
组件名称:命名组件,便于页面管理。
组件尺寸:用于选择组件的尺寸大小。
页头标题:用于设置页头组件标题的文字内容,默认提供的页头标题为“返回”,用户可根据实际情况修改页头标题内容。
标题颜色:可以设置标题的颜色,通过手动拖动拾色器、输入rgba值或输入颜色的十六进制值的方式改变标题字体的颜色。
页头内容:用于设置页头组件的文字内容,默认提供的页头内容为“详情”,用户可根据实际情况修改页头内容。
内容颜色:可以设置内容字体的颜色,通过手动拖动拾色器、输入rgba值或输入颜色的十六进制值的方式改变标题字体的颜色。
属性配置-扩展属性
- 页头暂无交互编排。
- 交互编排
- 页头可设置点击事件,通过设置点击事件动作实现页头的交互.
树组件
树组件是Web开发中常用的一种交互组件,它可以用于展示树状结构的数据,例如菜单、目录、文件等。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
宽度和高度:确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据树组件内容的高宽确定组件的大小。
定位方式:锁定为相对定位,通过设定至顶部、左侧、右侧、底部的距离控制其位置。
布局方式:此组件的布局方式固定为内联布局。
样式配置-文字样式
字体粗细:有常规加粗两种种选项,根据实际情况选择。
字体样式与颜色:字体样式可调整黑体、楷体和幼圆三种字体。字体颜色通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式来改变。
样式配置-选中/悬浮样式
- 背景颜色、边框颜色和字体颜色:通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式来改变这三种颜色。
- 属性配置
属性配置-原生属性
组件名称:命名组件,便于页面管理。
是否可选:有是或否两种选择,当开启树组件可选时,树组件就会出现可选框。
组件尺寸
默认展开:可以选择是否默认展开,设置默认展开时,打开页面就会看到完全展开的树组件。
背景透明:树组件有自己的背景颜色,可以单独调节。当开启背景透明时,树组件就会沿用父容器的背景颜色。
懒加载:用于选择树组件是否懒加载。
属性配置-扩展属性
- 树组件由不同的层级组成,利用树节点设置可以任意地调整树节点,无论是删除子集还是新增一级都十分方便。
- 交互编排
- 树组件可设置点击事件,通过设置点击事件动作实现树组件的交互.
面包屑
面包屑是一种有用且常见的站点导航方式,常用于导航结构比较复杂的网站。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
宽度:确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据组件内容的宽度确定组件的大小。
定位方式:可选相对定位或绝对定位。相对定位通过设定至顶部、左侧、右侧、底部的距离控制其位置。
布局方式:可选块级布局和内联布局。
内联布局使组件与下一组件同行排列,且可以设置对齐方式,包括顶端对齐、居中对齐与底端对齐。
块级布局使组件占据容器的单独一行。
内外边距:内边距是组件内容与组件边界之间的空间,在内容周围创建一个内部边缘,用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间,用于控制组件与其他组件之间的距离。
- 属性配置
属性配置-原生属性
组件名称:命名组件,便于页面管理。
组件尺寸:用于选择组件的尺寸大小。
分隔符号:提供多种选择,包括“&”、“+”、“-”、“_”、“$”、“#”、“@”、“!”、“>”、“<”多种符号。
分割图标:直接在输入框输入图标类名即可为组件赋予图标,需输入icon图标名。
字体颜色:用于选择组件中字体的颜色。
属性配置-扩展设置
- 面包屑设置:可以通过此设置为面包屑提供具体的数据项,默认提供了“首页”、“活动管理”、“活动列表”、“活动详情”四项数据,用户需根据实际情况自行设置。
- 交互编排
- 面包屑无交互编排。
输入框
输入框中可以输入信息展示或作为代输入信息的载体。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
宽度和高度:确定组件的大小,可选择px值、百分比和自适应,高度一般设置为自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据内部组件的宽度确定容器的大小。
定位方式:锁定为相对定位,通过设置距顶部、左侧、右侧、底部的距离调整输入框的位置。
布局方式:分为内联布局与块级布局,与对齐方式复合使用。
内联布局指下一个组件与输入框并排排列,此时可选择对齐方式,使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。
块级布局指输入框单独占据一行。
- 属性配置
属性配置-原生属性
组件名称:为组件命名,方便页面管理。
组件尺寸:确定输入框的尺寸大小。
输入类型:确定输入内容的类型,可选文本与数字,不符合类型的内容无法输入。
提示文字:是输入框未输入文字时展示的信息,在输入内容后会消失。
最大输入:决定最大输入字数。
输入提示:在输入框末尾给出输入字数/最大输入字数的提示。
清空按钮:在输入末端加入清空按钮,可一键清空所有输入内容。
是否禁用:禁用后该输入框不能再输入内容。
是否只读:开启后输入框内容不允许修改。
密码启用:启用后输入框变为密码输入框,输入时会隐藏密码,可开启可见。
前置图标:在输入框前添加图标,需输入icon图标码。
后置图标:在输入框后添加图标,需输入icon图标码。
前置内容:在输入框上方添加前置内容。
后置内容:在输入框下方添加后置内容。
属性配置-扩展设置
- 输入框暂无扩展设置
- 交互编排
- 输入框可设置点击事件,通过设置点击事件动作实现输入框的交互.
文本域
文本域中可以输入较长信息展示或作为代输入信息的载体。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
宽度和高度:确定组件的大小,可选择px值、百分比和自适应,高度一般设置为自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据内部组件的宽度确定容器的大小。
定位方式:锁定为相对定位,通过设置距顶部、左侧、右侧、底部的距离调整文本域的位置。
布局方式:分为内联布局与块级布局,与对齐方式复合使用。
内联布局指下一个组件与文本域并排排列,此时可选择对齐方式,使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。
块级布局指文本域单独占据一行。
- 属性配置
属性配置-原生属性
组件名称:为组件命名,方便页面管理。
组件尺寸:确定文本域的尺寸大小。
提示文字:文本域未输入文字时展示的信息,在输入内容后会消失。
可见行高:是文本域在布局时最高可见行高。
最大输入:决定最大输入字数。
输入提示:在文本域末尾给出输入字数/最大输入字数的提示。
是否禁用:禁用后该文本域不能再输入内容。
是否只读:开启后文本域内容不允许修改。
属性配置-扩展设置
- 文本域暂无扩展设置
- 交互编排
- 文本域可设置点击事件,通过设置点击事件动作实现文本域的交互.
单选框
单选框用于在多个互斥选项中,选出唯一项。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
宽度和高度:确定组件的大小,可选择px值、百分比和自适应,一般设置为自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据内部组件的宽度确定容器的大小。
定位方式:锁定为相对定位,通过设置距顶部、左侧、右侧、底部的距离调整单选框的位置。
布局方式:锁定为内联布局,内联布局指下一个组件与单选框并排排列。
- 属性配置
属性配置-原生属性
组件名称:为组件命名,方便页面管理。
组件尺寸:默认为默认尺寸,可选超小尺寸、小型尺寸、中型尺寸、较大尺寸、大型尺寸和超大尺寸
按钮模式:开启后单选框将变为两个按钮的模式,此时可设置文字颜色与填充颜色。
是否禁用和是否只读:选择单选框是否禁用和是否只读不可修改。
属性配置-扩展设置
- 单选框选项设置,点击后将打开单选框设置弹窗,可以在此修改单选框选项、为该单选框绑定数据字典或数据模型。修改选项时可以按需求添加或删除标签字段,绑定数据字典或数据模型时需在已有的模型中选择合适的字典或模型。
- 交互编排
- 单选框可设置点击事件,通过设置点击事件动作实现单选框的交互.
多选框
多选框用于在多个选项中,选出多项。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
宽度和高度:确定组件的大小,可选择px值、百分比和自适应,一般设置为自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据内部组件的宽度确定容器的大小。
定位方式:锁定为相对定位,通过设置距顶部、左侧、右侧、底部的距离调整多选框的位置。
布局方式:锁定为内联布局,内联布局指下一个组件与单选框并排排列。
- 属性配置
属性配置-原生属性
组件名称:为组件命名,方便页面管理。
组件尺寸:默认为默认尺寸,可选超小尺寸、小型尺寸、中型尺寸、较大尺寸、大型尺寸和超大尺寸
按钮模式:开启后多选框将变为多个按钮的模式,此时可设置文字颜色与填充颜色。
最小选中和最大选中:确定多选框最少选中项和最多选中项。
有无边框:开启后每个选项都会有一个边框。
是否禁用和是否只读:选择多选框是否禁用和是否只读不可修改。
属性配置-扩展设置
- 多选框选项设置,点击后将打开多选框设置弹窗,可以在此修改多选框选项、为该多选框绑定数据字典或数据模型。修改选项时可以按需求添加或删除标签字段,绑定数据字典或数据模型时需在已有的模型中选择合适的字典或模型。
- 交互编排
- 多选框可设置点击事件,通过设置点击事件动作实现多选框的交互.
下拉框
下拉框用于在多个选项中,选出单个选项。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
宽度和高度:确定组件的大小,可选择px值、百分比和自适应,高度一般设置为自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据内部组件的宽度确定容器的大小。
定位方式:确定组件的大小,可选择px值、百分比和自适应,高度一般设置为自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据内部组件的宽度确定容器的大小。
布局方式:分为内联布局与块级布局,与对齐方式复合使用。
内联布局指下一个组件与时间选择并排排列,此时可选择对齐方式,使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。
块级布局指时间选择单独占据一行。
- 属性配置
属性配置-原生属性
组件名称:为组件命名,方便页面管理。
组件尺寸:默认为默认尺寸,可选超小尺寸、小型尺寸、中型尺寸、较大尺寸、大型尺寸和超大尺寸
提示文字:未选择时下拉框显示的文字。
清空按钮:开启后可以一键删除下拉框内选择的内容。
可否搜索:可否通过搜索查询下拉框内的选项,开启后将出现可否创建按钮,如选择是,可将输入的内容添加到下拉框的搜索选项中作为临时搜索用,但无法将其加入数据库中。
是否禁用和是否只读:选择下拉框是否禁用和是否只读不可修改。
属性配置-扩展设置
- 下拉框选项设置,点击后将打开下拉框设置弹窗,可以在此修改下拉框选项、为该下拉框绑定数据字典或数据模型。修改选项时可以按需求添加或删除标签字段,绑定数据字典或数据模型时需在已有的模型中选择合适的字典或模型。
- 交互编排
- 下拉框可设置点击事件,通过设置点击事件动作实现下拉框的交互.
日期选择
日期选择支持选择具体的日期,即年、月、日。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
高度和宽度:确定组件的大小,可选择px值、百分比和自适应,高度一般设置为自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据内部组件的宽度确定容器的大小。
定位方式:锁定为相对定位,通过设置距顶部、左侧、右侧、底部的距离调整日期选择的位置。
布局方式:分为内联布局与块级布局,与对齐方式复合使用。
内联布局指下一个组件与日期选择并排排列,此时可选择对齐方式,使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。
块级布局指文本域单独占据一行。
- 属性配置
属性配置-原生属性
组件名称:为组件命名,方便页面管理。
组件尺寸:确定日期选择的尺寸大小。
选择类型:可以选择该选择框的选择类型,包括年、月、日期。
提示文字:日期选择未选择时展示的信息。
可否编辑:开启后可以只手动输入日期。
清空按钮:开启后出现可以一键清空日期选择框中所有内容的按钮。
是否禁用:禁用后该日期选择不能再使用。
是否只读:开启后日期选择内容不允许修改。
属性配置-扩展设置
- 日期选择暂无扩展设置。
- 交互编排
- 日期选择可设置点击事件,通过设置点击事件动作实现日期选择的交互.
时间选择
时间选择支持选择具体的时间,即时、分、秒。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
高度和宽度:确定组件的大小,可选择px值、百分比和自适应,高度一般设置为自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据内部组件的宽度确定容器的大小。
定位方式:锁定为相对定位,通过设置距顶部、左侧、右侧、底部的距离调整时间选择的位置。
布局方式:分为内联布局与块级布局,与对齐方式复合使用。
内联布局指下一个组件与时间选择并排排列,此时可选择对齐方式,使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。
块级布局指时间选择单独占据一行。
- 属性配置
属性配置-原生属性
组件名称:为组件命名,方便页面管理。
组件尺寸:确定时间选择的尺寸大小。
提示文字:时间选择未选择时展示的信息。
可否编辑:开启后可以只手动输入时间。
清空按钮:开启后出现可以一键清空时间选择框中所有内容的按钮。
是否禁用:禁用后该时间选择不能再使用。
是否只读:开启后时间选择内容不允许修改。
属性配置-扩展设置 时间选择暂无扩展设置。
- 交互编排
- 时间选择可设置点击事件,通过设置点击事件动作实现时间选择的交互.
日期时间
日期时间由两个选择框组成,支持选择具体的日期与时间,即年、月、日,时、分、秒。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
高度和宽度:确定组件的大小,可选择px值、百分比和自适应,高度一般设置为自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据内部组件的宽度确定容器的大小。
定位方式:锁定为相对定位,通过设置距顶部、左侧、右侧、底部的距离调整日期时间的位置。
布局方式:分为内联布局与块级布局,与对齐方式复合使用。
内联布局指下一个组件与日期时间并排排列,此时可选择对齐方式,使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。
块级布局指日期时间单独占据一行。
- 属性配置
属性配置-原生属性
组件名称:为组件命名,方便页面管理。
组件尺寸:确定日期时间的尺寸大小。
提示文字:日期时间未选择时展示的信息。
可否编辑:开启后可以只手动输入日期时间。
清空按钮:开启后出现可以一键清空日期时间框中所有内容的按钮。
是否禁用:禁用后该日期时间不能再使用。
是否只读:开启后日期时间内容不允许修改。
属性配置-扩展设置
- 日期选择暂无扩展设置。
- 交互编排
- 日期时间可设置点击事件,通过设置点击事件动作实现日期时间的交互.
时间范围
时间范围是指在时间选择中,可以指定一个起始时间和一个终止时间,通常用于需要设定一段时间范围的操作场景,如查询某个时间段内的数据。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
高度和宽度:确定组件的大小,可选择px值、百分比和自适应,高度一般设置为自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据内部组件的宽度确定容器的大小。
定位方式:锁定为相对定位,通过设置距顶部、左侧、右侧、底部的距离调整组件的位置。
布局方式:分为内联布局与块级布局,与对齐方式复合使用。
内联布局指下一个组件与本组件并排排列,此时可选择对齐方式,使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。
块级布局指本组件单独占据一行。
- 属性配置
属性配置-原生属性
组件名称:为组件命名,方便页面管理。
组件尺寸:下拉框选择时间范围的尺寸大小。
开始提示和结束提示:时间范围未选择时,起始时间和结束时间所展示的信息。
间隔文字:起始时间和结束时间之间的文字。
可否编辑:开启后可以手动输入时间范围。
清空按钮:开启后出现可以一键清空时间范围框中所有内容的按钮。
是否禁用:禁用后该时间范围不能再使用。
是否只读:开启后时间范围内容不允许修改。
属性配置-扩展设置
- 时间范围暂无扩展设置。
- 交互编排
- 时间范围可设置点击事件,通过设置点击事件动作实现时间范围的交互.
日期范围
与时间范围相同,日期范围是指在日期选择中,用户可以指定一个起始日期和一个终止日期。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
高度和宽度:确定组件的大小,可选择px值、百分比和自适应,高度一般设置为自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据内部组件的宽度确定容器的大小。
定位方式:锁定为相对定位,通过设置距顶部、左侧、右侧、底部的距离调整组件的位置。
布局方式:分为内联布局与块级布局,与对齐方式复合使用。
内联布局指下一个组件与本组件并排排列,此时可选择对齐方式,使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。
块级布局指本组件单独占据一行。
- 属性配置
属性配置-原生属性
组件名称:为组件命名,方便页面管理。
组件尺寸:下拉框选择日期范围的尺寸大小。
选择类型:下拉框选择月或日期。
开始提示和结束提示:日期范围未选择时,起始日期处和结束日期处所展示的信息。
间隔文字:起始日期和结束日期之间的文字。
可否编辑:开启后可以手动输入日期范围。
清空按钮:开启后出现可以一键清空日期范围框中所有内容的按钮。
是否禁用:禁用后该组件不能再使用。
是否只读:开启后该组件内容不允许修改。
属性配置-扩展设置
- 日期范围暂无扩展设置。
- 交互编排
- 日期范围可设置点击事件,通过设置点击事件动作实现日期范围的交互.
日时范围
日时范围是指在日期选择中,用户可以指定一个起始日期和一个终止日期,并在每个日期中选择具体的小时数,通常用于需要指定一段时间内每天的具体小时范围的操作,如指定每天的工作时间段。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
高度和宽度:确定组件的大小,可选择px值、百分比和自适应,高度一般设置为自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据内部组件的宽度确定容器的大小。
定位方式:锁定为相对定位,通过设置距顶部、左侧、右侧、底部的距离调整组件的位置。
布局方式:分为内联布局与块级布局,与对齐方式复合使用。
内联布局指下一个组件与本组件并排排列,此时可选择对齐方式,使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。
块级布局指本组件单独占据一行。
- 属性配置
属性配置-原生属性
组件名称:为组件命名,方便页面管理。
组件尺寸:下拉框选择日时范围的尺寸大小。
开始提示和结束提示:日时范围未选择时,起始日时处和结束日时处所展示的信息。
间隔文字:起始日时和结束日时之间的文字。
可否编辑:开启后可以手动输入日时时范围。
清空按钮:开启后出现可以一键清空日时范围框中所有内容的按钮。
是否禁用:禁用后该组件不能再使用。
是否只读:开启后该组件内容不允许修改。
属性配置-扩展设置
- 暂无扩展设置。
- 交互编排
- 日时范围可设置点击事件,通过设置点击事件动作实现日时范围的交互.
文件上传
文件上传是指将本地计算机上的文件传输到远程服务器上,并储存在其中。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
高度和宽度:确定组件的大小,可选择px值、百分比和自适应,高度一般设置为自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据内部组件的宽度确定容器的大小。
定位方式:锁定为相对定位,通过设置距顶部、左侧、右侧、底部的距离调整组件的位置。
布局方式:分为内联布局与块级布局,与对齐方式复合使用。
内联布局指下一个组件与本组件并排排列,此时可选择对齐方式,使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。
块级布局指本组件单独占据一行。
- 属性配置
属性配置-原生属性
组件名称:为组件命名,方便页面管理。
上传类型:可选择文件上传的类型,类型包括“列表”、“按钮”两种。
按钮名称:输入文件上传按钮的名称。
组件尺寸:下拉框选择文件上传按钮的尺寸大小。
按钮类型:选择不同类型按钮,可修改按钮的颜色样式。
按钮模式:可选择朴素或者默认,修改按钮的颜色深度。
按钮圆角:可选择圆角或默认,来确定按钮的四个角是圆形还是直角。
按钮图标:输入正确的图标名称,在按钮名称前会显示相应的图标。
上传数量:上传文件个数的上限。
文件类型:允许用户上传的文件类型。
文件大小:允许每一个文件上传的最大大小。
上传提示:显示在上传文件按钮下方的一段文字,开启后可手动输入提示文案。
是否禁用:禁用后该组件不能再使用。
是否只读:开启后该组件内容不允许修改。
属性配置-扩展设置
- 暂无扩展设置。
- 交互编排
- 暂无交互编排。
图片上传
图片上传是指将本地计算机上的图片传输到远程服务器上,并储存在其中。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
高度和宽度:确定组件的大小,可选择px值、百分比和自适应,高度一般设置为自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据内部组件的宽度确定容器的大小。
定位方式:锁定为相对定位,通过设置距顶部、左侧、右侧、底部的距离调整组件的位置。
布局方式:分为内联布局与块级布局,与对齐方式复合使用。
内联布局指下一个组件与本组件并排排列,此时可选择对齐方式,使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。
块级布局指本组件单独占据一行。
- 属性配置
属性配置-原生属性
组件名称:为组件命名,方便页面管理。
上传数量:上传图片个数的上限。
文件类型:允许用户上传图片的类型。
文件大小:允许每一个图片上传的最大大小。
尺寸宽度和尺寸高度:只有满足设定尺寸宽度和高度的图片才能上传。
上传提示:显示在上传图片方框下方的一段文字,开启后可手动输入提示文案。
是否禁用:禁用后该组件不能再使用。
是否只读:开启后该组件内容不允许修改。
属性配置-扩展设置
- 暂无扩展设置。
- 交互编排
- 暂无交互编排。
地图组件
二维地图
二维地图组件是一种地图组件,通常用于以平面图的形式展示地理空间信息,如行政区划、道路、建筑物等,并支持缩放、图层树、定位、测量等操作。应用场景非产广泛,常用于出行、外业调查、地图审图等场景。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
高度和宽度:确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据内部组件的高宽确定容器的大小。
定位方式:锁定为相对定位。
布局方式:分为内联布局与块级布局,与对齐方式复合使用。
内联布局指下一个组件与本组件并排排列,此时可选择对齐方式,使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。
块级布局指本组件单独占据一行。
- 属性配置
属性配置-原生属性
组件名称:命名组件,便于页面管理。
底图来源:可选择地图的来源图。
底图密钥:可填写生成地图的密钥。
中心位置:二维地图中心的经纬度坐标。
默认缩放、最小缩放和最大缩放:默认缩放指打开页面时地图默认显示的缩放等级,最小缩放和最大缩放规定了地图在放大缩小时允许的缩放程度。
坐标系:下拉框选择地图坐标系,可选择WGS84和CGCS2000坐标系。
缩放工具:用于缩放地图。可选择该组件在地图上显示或隐藏,也可修改缩放工具到地图左上角的距离百分比。加号表示放大地图,减号表示缩小地图,每次缩放都以一个等级为单位。
比例尺:可选择该组件在地图上显示或隐藏,也可修改组件到地图左上角的距离百分比。
坐标栏:显示鼠标悬浮处的经纬度坐标以及当前的缩放等级。可选择该组件在地图上显示或隐藏,也可修改其到地图左上角的距离百分比。
底图切换:选择组件的底图为矢量地图、地形图或影像。可选择该组件在地图上显示或隐藏,也可修改其到地图左上角的距离百分比。
操作按钮:具有定位、漫游、全屏、长度测量、面积测量、标绘、要素查询、地图点击八个操作功能。点击文字后的方框可选择该组件在地图上显示或隐藏,也可修改其到地图左上角的距离百分比。
属性配置-扩展设置
- 二维地图无扩展设置。
- 交互编排
- 二维地图可设置点击事件,通过设置点击事件动作实现二维地图的交互.
图表组件
基础柱状
基础柱状图是一种图表组件,通过竖直或水平方向上的矩形条表示不同类别的数值,可清晰展示数据之间的相对大小,适用于数据展示和对比等分析场景。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
高度和宽度:确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据内部组件的高宽确定容器的大小。
定位方式:可选择相对定位与决定定位,两者都可以根据填入的位边距信息来调整该组件定位
布局方式:分为内联布局与块级布局,与对齐方式复合使用。
内联布局指下一个组件与本组件并排排列,此时可选择对齐方式,使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。
块级布局指本组件单独占据一行。
- 属性配置
属性配置-原生属性
组件名称:为组件命名,方便页面管理。
柱状背景:显示柱状条背景样式,开启后可通过下方背景颜色功能来修改具体颜色。
横轴单位和纵轴单位:在输入框中填写单位,柱状图的横轴和纵轴末端则会显示所填单位名称。
单位字号和字体颜色:用于修改单位的字体大小以及单位字体颜色,字体颜色可通过点击调色板或手动输入颜色数值的方式修改。
图边距:可调整柱状图距离该组件上下左右边缘的百分比距离。
属性配置-图表属性
深色模式、图例控件和图例方向:可修改整个组件的背景样式、选择是否启用图例控件和图例方向为水平或者竖直。
图例上距和图例左距:根据填写的内容设置图例的上距和左距。
图例大小和图例颜色:根据填写的内容设置图例的大小和图例的颜色。
标题控件和标题文字:可选择标题标题控件是否显示和设置标题名称。
标题大小和标题颜色:根据填写的内容可设置标题的大小与颜色。
标题上距和标题左距:根据所填写的内容可设置标题的上距和左距
提示控件和工具控件:可选择是否启用提示控件和工具控件。
属性配置-扩展设置
横轴数据设置,点击后弹出弹窗,可修改横轴数据个数、排列方式以及横轴数据名称。
模拟数据设置,点击后弹出对话框,可添加、导入、导出和删除数据,还能够修改基础柱状图的数值和颜色。
- 交互编排
- 基础柱状无交互编排。
基础条状
与基础柱状相同,只是图表是横向的。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
高度和宽度:确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据内部组件的高宽确定容器的大小。
定位方式:可选择相对定位与决定定位,两者都可以根据填入的位边距信息来调整该组件定位
布局方式:分为内联布局与块级布局,与对齐方式复合使用。
内联布局指下一个组件与本组件并排排列,此时可选择对齐方式,使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。
块级布局指本组件单独占据一行。
- 属性配置
属性配置-原生属性
- 属性配置
组件名称:为组件命名,方便页面管理。
条状背景:显示条状条背景样式,开启后可通过下方背景颜色功能来修改具体颜色。
横轴单位和纵轴单位:在输入框中填写单位,条状图的横轴和纵轴末端则会显示所填单位名称。
单位字号和字体颜色:用于修改单位的字体大小以及单位字体颜色,字体颜色可通过点击调色板或手动输入颜色数值的方式修改。
图边距:可调整条状图距离该组件上下左右边缘的百分比距离。
属性配置-图表属性
深色模式、图例控件和图例方向:可修改整个组件的背景样式、选择是否启用图例控件和图例方向为水平或者竖直。
图例上距和图例左距:根据填写的内容设置图例的上距和左距。
图例大小和图例颜色:根据填写的内容设置图例的大小和图例的颜色。
标题控件和标题文字:可选择标题标题控件是否显示和设置标题名称。
标题大小和标题颜色:根据填写的内容可设置标题的大小与颜色。
标题上距和标题左距:根据所填写的内容可设置标题的上距和左距
提示控件和工具控件:可选择是否启用提示控件和工具控件。
属性配置-扩展设置
横轴数据设置,点击后弹出弹窗,可修改横轴数据个数、排列方式以及横轴数据名称。
模拟数据设置,点击后弹出对话框,可添加、导入、导出和删除数据,还能够修改基础条状图的数值和颜色。
- 交互编排
- 基础条状无交互编排。
基础折线
基础折线图是一种图表组件,通过将一系列点用线段连接而成,用于表示一段时间内数据的波动或趋势,常用于表示趋势、变化和周期等时间相关的数据,同时便于对比多个数据系列。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
高度和宽度:确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据内部组件的高宽确定容器的大小。
定位方式:可选择相对定位与决定定位,两者都可以根据填入的位边距信息来调整该组件定位
布局方式:分为内联布局与块级布局,与对齐方式复合使用。
内联布局指下一个组件与本组件并排排列,此时可选择对齐方式,使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。
块级布局指本组件单独占据一行。
- 属性配置
属性配置-原生属性
组件名称:为组件命名,方便页面管理。
平滑折线:选择是则将折线平滑成曲线。
横轴单位和纵轴单位:在输入框中填写单位,折线图的横轴和纵轴末端则会显示所填单位名称。
单位字号和字体颜色:用于修改单位的字体大小以及单位字体颜色,字体颜色可通过点击调色板或手动输入颜色数值的方式修改。
图边距:可调整折线图距离该组件上下左右边缘的百分比距离。
属性配置-图表属性
深色模式、图例控件和图例方向:可修改整个组件的背景样式、选择是否启用图例控件和图例方向为水平或者竖直。
图例上距和图例左距:根据填写的内容设置图例的上距和左距。
图例大小和图例颜色:根据填写的内容设置图例的大小和图例的颜色。
标题控件和标题文字:可选择标题标题控件是否显示和设置标题名称。
标题大小和标题颜色:根据填写的内容可设置标题的大小与颜色。
标题上距和标题左距:根据所填写的内容可设置标题的上距和左距
提示控件和工具控件:可选择是否启用提示控件和工具控件。
属性配置-扩展设置
横轴数据设置,点击后弹出弹窗,可修改横轴数据个数、排列方式以及横轴数据名称。
模拟数据设置,点击后弹出对话框,可添加、导入、导出和删除数据,还能够修改基础折线图的数值和颜色。
- 交互编排
- 基础折线无交互编排。
柱状折线
柱状折线图是一种图表组件,将柱状图和折线图结合起来,同时呈现数据的数量和趋势。柱状图通常用来表示数据的数量,而折线图则用来展示数据的趋势。它可以直观地展示数据的数量和变化趋势,适用于对比不同数据系列的数量和趋势的分析和展示。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
高度和宽度:确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据内部组件的高宽确定容器的大小。
定位方式:可选择相对定位与决定定位,两者都可以根据填入的位边距信息来调整该组件定位
布局方式:分为内联布局与块级布局,与对齐方式复合使用。
内联布局指下一个组件与本组件并排排列,此时可选择对齐方式,使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。
块级布局指本组件单独占据一行。
- 属性配置
属性配置-原生属性
组件名称:为组件命名,方便页面管理。
柱状背景:显示柱状图背景样式,开启后可通过下方背景颜色功能来修改具体颜色。
平滑折线:选择是则将折线平滑成曲线。
横轴单位和纵轴单位:在输入框中填写单位,柱状折线图的横轴和纵轴末端则会显示所填单位名称。
单位字号和字体颜色:用于修改单位的字体大小以及单位字体颜色,字体颜色可通过点击调色板或手动输入颜色数值的方式修改。
图边距:可调整柱状折线图距离该组件上下左右边缘的百分比距离。
属性配置-图表属性
深色模式、图例控件和图例方向:可修改整个组件的背景样式、选择是否启用图例控件和图例方向为水平或者竖直。
图例上距和图例左距:根据填写的内容设置图例的上距和左距。
图例大小和图例颜色:根据填写的内容设置图例的大小和图例的颜色。
标题控件和标题文字:可选择标题标题控件是否显示和设置标题名称。
标题大小和标题颜色:根据填写的内容可设置标题的大小与颜色。
标题上距和标题左距:根据所填写的内容可设置标题的上距和左距
提示控件和工具控件:可选择是否启用提示控件和工具控件。
属性配置-扩展设置
横轴数据设置,点击后弹出弹窗,可修改横轴数据个数、排列方式以及横轴数据名称。
模拟数据设置,点击后弹出对话框,可添加、导入、导出和删除数据,还能够修改柱状折线图的数值和颜色。
- 交互编排
- 柱状折线无交互编排。
基础面积
基础面积图是一种图表组件,通过填充坐标轴与折线之间的区域来表示数据的数量,并用平滑的边缘线方便对比多个数据系列的趋势。它可以展示数据数量的变化趋势,也可以用于比较不同数据系列之间数量的差异。常用于展示数据随时间而变化的趋势。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
高度和宽度:确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据内部组件的高宽确定容器的大小。
定位方式:可选择相对定位与决定定位,两者都可以根据填入的位边距来调整该组件定位
布局方式:分为内联布局与块级布局,与对齐方式复合使用。
内联布局指下一个组件与本组件并排排列,此时可选择对齐方式,使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。
块级布局指本组件单独占据一行。
- 属性配置
属性配置-原生属性
组件名称:为组件命名,方便页面管理。
平滑折线:选择是则将折线平滑成曲线。
横轴单位和纵轴单位:在输入框中填写单位,基础面积图的横轴和纵轴末端则会显示所填单位名称。
单位字号和字体颜色:用于修改单位的字体大小以及单位字体颜色,字体颜色可通过点击调色板或手动输入颜色数值的方式修改。
图边距:可调整基础面积图距离该组件上下左右边缘的百分比距离。
属性配置-图表属性
深色模式、图例控件和图例方向:可修改整个组件的背景样式、选择是否启用图例控件和图例方向为水平或者竖直。
图例上距和图例左距:根据填写的内容设置图例的上距和左距。
图例大小和图例颜色:根据填写的内容设置图例的大小和图例的颜色。
标题控件和标题文字:可选择标题标题控件是否显示和设置标题名称。
标题大小和标题颜色:根据填写的内容可设置标题的大小与颜色。
标题上距和标题左距:根据所填写的内容可设置标题的上距和左距
提示控件和工具控件:可选择是否启用提示控件和工具控件。
属性配置-扩展设置
横轴数据设置,点击后弹出弹窗,可修改横轴数据个数、排列方式以及横轴数据名称。
模拟数据设置,点击后弹出对话框,可添加、导入、导出和删除数据,还能够修改基础面积图的数值和颜色。
- 交互编排
- 基础面积无交互编排。
基础饼图
基础饼图是一种图表组件,通过将数据按比例划分成一个个扇形,表示不同部分在总体中所占比例,而一个圆形的饼图总共有100%的数值。常用于显示数据中不同部分的数量比例,可对比不同类别数据的占比,也可以展示数据的相对大小。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
高度和宽度:确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据内部组件的高宽确定容器的大小。
定位方式:可选择相对定位与决定定位,两者都可以根据填入的位边距来调整该组件定位
布局方式:分为内联布局与块级布局,与对齐方式复合使用。
内联布局指下一个组件与本组件并排排列,此时可选择对齐方式,使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。
块级布局指本组件单独占据一行。
- 属性配置
属性配置-原生属性
组件名称:为组件命名,方便页面管理。
饼图大小:饼图占整个组件的百分比大小。
标签显隐和标签位置:可选择饼图每个板块的标签信息是否直接在饼图上显示和标签信息直接显示在环图内部或用短折线连接在外部。
标签大小和标签颜色:用于修改标签的字体大小以及标签字体颜色,字体颜色可通过点击调色板或手动输入颜色数值的方式修改。
数据统计:可显示或隐藏饼图所有数据量的总计,表示为汉字“总数”和总和数字两部分。
总数大小和总数颜色:可修改“总数”这一汉字的字体大小和字体颜色。
数据大小和数据颜色:可修改总和数字的大小和颜色。
横向位置:下拉框选择居左、居中或居右,确定数据统计在组件内部的位置。
纵向距离、图左边距和图上边距:可调整基础饼图纵向距离和图例距离该组件上边缘和左边缘的百分比距离。
属性配置-图表属性
深色模式、图例控件和图例方向:可修改整个组件的背景样式、选择是否启用图例控件和图例方向为水平或者竖直。
图例上距和图例左距:根据填写的内容设置图例的上距和左距。
图例大小和图例颜色:根据填写的内容设置图例的大小和图例的颜色。
标题控件和标题文字:可选择标题标题控件是否显示和设置标题名称。
标题大小和标题颜色:根据填写的内容可设置标题的大小与颜色。
标题上距和标题左距:根据所填写的内容可设置标题的上距和左距
提示控件和工具控件:可选择是否启用提示控件和工具控件。
属性配置-扩展设置
- 模拟数据设置,点击后弹出对话框,可添加、导入、导出和删除数据,还能够修改基础饼图图的数值和颜色。
- 交互编排
- 基础面积无交互编排。
基础环图
基础环图是一种图表组件,是基于饼图衍生而来的一种形式,将饼图变成一个内外环形式,内环表示总体,外环表示内环总数据的比例。常用于显示数据中不同部分的数量比例,可对比不同类别数据的占比。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
高度和宽度:确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据内部组件的高宽确定容器的大小。
定位方式:可选择相对定位与决定定位,两者都可以根据填入的位边距来调整该组件定位
布局方式:分为内联布局与块级布局,与对齐方式复合使用。
内联布局指下一个组件与本组件并排排列,此时可选择对齐方式,使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。
块级布局指本组件单独占据一行。
- 属性配置
属性配置-原生属性
组件名称:为组件命名,方便页面管理。
内环大小和外环大小:分别指环形的内边和外边到圆心的百分比距离。
有无圆角、标签显隐和标签位置:选择基础环图是否圆角、标签是否显示和标签的位置是在内部或是外部。
标签大小和标签颜色:用于修改标签的字体大小以及标签字体颜色,字体颜色可通过点击调色板或手动输入颜色数值的方式修改。
数据统计:可显示或隐藏环图所有数据量的总计,表示为汉字“总数”和总和数字两部分。
总数大小和总数颜色:可修改“总数”这一汉字的字体大小和字体颜色。
数据大小和数据颜色:可修改总和数字的大小和颜色。
横向位置:下拉框选择居左、居中或居右,确定数据统计在组件内部的位置。
纵向距离、图左边距和图上边距:可调整基础环图纵向距离和图例距离该组件上边缘和左边缘的百分比距离。
属性配置-图表属性
深色模式、图例控件和图例方向:可修改整个组件的背景样式、选择是否启用图例控件和图例方向为水平或者竖直。
图例上距和图例左距:根据填写的内容设置图例的上距和左距。
图例大小和图例颜色:根据填写的内容设置图例的大小和图例的颜色。
标题控件和标题文字:可选择标题标题控件是否显示和设置标题名称。
标题大小和标题颜色:根据填写的内容可设置标题的大小与颜色。
标题上距和标题左距:根据所填写的内容可设置标题的上距和左距
提示控件和工具控件:可选择是否启用提示控件和工具控件。
属性配置-扩展设置
- 模拟数据设置,点击后弹出对话框,可添加、导入、导出和删除数据,还能够修改基础环图的数值和颜色。
- 交互编排
- 基础面积无交互编排。
玫瑰图
玫瑰图是一种基于极坐标系的饼图变体,通过将饼图的半径由等分改为非等分来表示不同的数值大小,常用于显示数据的走向和变化规律,尤其适用于周期性的数据分析。它呈现出圆心到边缘的扇形份额、中心点径向上颜色值的变化。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
高度和宽度:确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据内部组件的高宽确定容器的大小。
定位方式:可选择相对定位与决定定位,两者都可以根据填入的位边距来调整该组件定位
布局方式:分为内联布局与块级布局,与对齐方式复合使用。
内联布局指下一个组件与本组件并排排列,此时可选择对齐方式,使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。
块级布局指本组件单独占据一行。
- 属性配置
属性配置-原生属性
组件名称:为组件命名,方便页面管理。
内环大小和外环大小:分别指玫瑰图的内边和外边到圆心的百分比距离。
有无圆角、标签显隐和标签位置:选择玫瑰图是否圆角、标签是否显示和标签的位置是在内部或是外部。
标签大小和标签颜色:可设置标签的大小和颜色.
数据统计:可显示或隐藏玫瑰图所有数据量的总计,表示为汉字“总数”和总和数字两部分。
总数大小和总数颜色:可修改“总数”这一汉字的字体大小和字体颜色。
数据大小和数据颜色:可修改总和数字的大小和颜色。
横向位置:下拉框选择居左、居中或居右,确定数据统计在组件内部的位置。
纵向距离、图左边距和图上边距:可调整玫瑰图纵向距离和图例距离该组件上边缘和左边缘的百分比距离。
属性配置-图表属性
深色模式、图例控件和图例方向:可修改整个组件的背景样式、选择是否启用图例控件和图例方向为水平或者竖直。
图例上距和图例左距:根据填写的内容设置图例的上距和左距。
图例大小和图例颜色:根据填写的内容设置图例的大小和图例的颜色。
标题控件和标题文字:可选择标题标题控件是否显示和设置标题名称。
标题大小和标题颜色:根据填写的内容可设置标题的大小与颜色。
标题上距和标题左距:根据所填写的内容可设置标题的上距和左距
提示控件和工具控件:可选择是否启用提示控件和工具控件。
属性配置-扩展设置
- 模拟数据设置,点击后弹出对话框,可添加、导入、导出和删除数据,还能够修改玫瑰图的数值和颜色。
- 交互编排
- 基础面积无交互编排。
雷达图
雷达图是一种基于极坐标系的图表组件,通过将数据沿着不同方向绘制成多边形,以显示不同项的相对大小和比例,通常用于从多个方面对比不同指标、不同选项、不同评估对象的综合性指数或特征。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
高度和宽度:确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据内部组件的高宽确定容器的大小。
定位方式:可选择相对定位与决定定位,两者都可以根据填入的位边距来调整该组件定位
布局方式:分为内联布局与块级布局,与对齐方式复合使用。
内联布局指下一个组件与本组件并排排列,此时可选择对齐方式,使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。
块级布局指本组件单独占据一行。
- 属性配置
属性配置-原生属性
组件名称:为组件命名,方便页面管理。
图表大小:雷达图占整个组件的百分比大小。
图表类型:可选择多边形雷达图或圆形雷达图。
图左边距和图上边距:可调整雷达图距离该组件上边缘和左边缘的百分比距离。
属性配置-图表属性
深色模式、图例控件和图例方向:可修改整个组件的背景样式、选择是否启用图例控件和图例方向为水平或者竖直。
图例上距和图例左距:根据填写的内容设置图例的上距和左距。
图例大小和图例颜色:根据填写的内容设置图例的大小和图例的颜色。
标题控件和标题文字:可选择标题标题控件是否显示和设置标题名称。
标题大小和标题颜色:根据填写的内容可设置标题的大小与颜色。
标题上距和标题左距:根据所填写的内容可设置标题的上距和左距
提示控件和工具控件:可选择是否启用提示控件和工具控件。
属性配置-扩展设置
分类数据设置,点击后弹出弹窗,可修改雷达数据个数、排列方式以及数据名称。
模拟数据设置,点击后弹出对话框,可添加、导入、导出和删除数据,还能够修改雷达图的数值和颜色。
- 交互编排
- 基础面积无交互编排。
仪表盘
仪表盘是一种图表组件,常用于显示度量或指标的值,并将其与预定义的目标或阈值进行比较。它通常以圆形或半圆形的形式呈现,具有刻度、指针等组成部分,以方便用户直观地读取数据值,同时提供了重要的警告或提醒功能,适用于显示指标的趋势或变化状态。常用于监测系统、行驶车速、油量、温度等需要实时监控的场景。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
高度和宽度:确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据内部组件的高宽确定容器的大小。
定位方式:可选择相对定位与决定定位,两者都可以根据填入的位边距来调整该组件定位
布局方式:分为内联布局与块级布局,与对齐方式复合使用。
内联布局指下一个组件与本组件并排排列,此时可选择对齐方式,使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。
块级布局指本组件单独占据一行。
- 属性配置
属性配置-原生属性
组件名称:为组件命名,方便页面管理。
深色模式:可修改整个组件的背景样式。
图表大小:仪表盘占整个组件的百分比大小。
图左边距和图上边距:可调整雷达图距离该组件上边缘和左边缘的百分比距离。
数值名称和数值大小:可修改数值的名称和大小。
数值单位和数值字体:可修改数值的单位和字体样式。
数值颜色:用于修改数值的颜色。
最小表值和最大表值:分别指仪表盘初始刻度处和结束刻度处的数值大小。
分割数值:指割成最小表值到最大表值之间数的份数。
开始角度和结束角度:前者指仪表盘初始刻度-圆心的连线和水平线的夹角,后者指仪表盘结束刻度-圆心的连线和水平线的夹角。
提示标题:当鼠标悬浮在仪表盘指针上时,会有小文本框显示仪表盘的标题信息。
属性配置-扩展设置
- 仪表盘无扩展设置。
- 交互编排
- 仪表盘无交互编排。
高级组件
查询容器
查询容器即是用于查询表格的容器,配合表单组件中的输入框、下拉框、级联选择、日期选择、日期范围等组件一起使用。查询容器自带“查询”和“重置”按钮,配合事件编排和查询或重置表格。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
宽度和高度:确定组件的大小,可选择px值、百分比和自适应,高度一般设置为自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据内部组件的宽度确定容器的大小。
定位方式:锁定为相对定位,通过设定至顶部、左侧、右侧、底部的距离控制其位置。
布局方式:锁定为块级布局,即查询容器在排版时单独占据一行。
水平溢出和垂直溢出:可以选择隐藏和滚动,当查询容器中内容的尺寸超过查询容器的尺寸时,选择隐藏只能展示查询容器尺寸范围内的内容,选择滚动则可以通过滑动展示所有内容。
内外边距:内边距是组件内容与组件边界之间的空间,在内容周围创建一个内部边缘,用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间,用于控制组件与其他组件之间的距离。
- 属性配置
属性配置-原生属性
组件名称:命名组件,便于页面管理。
组件尺寸:用于调节查询容器内容尺寸,可选择默认尺寸、超小尺寸、小型尺寸、中等尺寸、较大尺寸、大型尺寸、超大尺寸。
标签宽度和组件宽度:查询容器子元素组件的标签的宽度和组件宽度。
查询按钮名称和查询按钮类型:可选择该组件查询按钮的名称和查询按钮的类型。
重置按钮名称和重置按钮类型:可选择该组件重置按钮的名称和重置按钮的类型。
重置按钮模式:可选择朴素或者默认,修改重置按钮颜色深度,如下图,第一个查询容器重置按钮为默认,第二个为朴素。
属性配置-扩展设置
- 查询容器暂无扩展设置。
- 交互编排
- 查询容器可设置点击事件,通过设置点击事件动作实现查询容器的交互。
卡片列表
卡片列表即是多个卡片组成的列表,使用卡片列表形式可以更方便地统一卡片的样式。可以设置卡片列表的每行个数、显示个数、卡片阴影、卡片间距。和弹性容器配合使用可为每个卡片增加边框。适用于图片和文字组合的列表页面。
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
宽度和高度:确定组件的大小,可选择px值、百分比和自适应,高度一般设置为自适应。px值即像素值大小,百分比是相对于父容器的大小,自适应可根据内部组件的宽度确定容器的大小。
定位方式:锁定为相对定位,通过设定至顶部、左侧、右侧、底部的距离控制组件位置。
布局方式:锁定为块级布局。块级布局使组件占据容器的单独一行。
内外边距:内边距是组件内容与组件边界之间的空间,在内容周围创建一个内部边缘,用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间,用于控制组件与其他组件之间的距离。
- 属性配置
属性配置-原生属性
组件名称:命名组件,便于页面管理。
每行个数和显示个数:卡片列表每一行显示卡片的个数和在卡片列表容器中可显示的卡片总个数。
有无分页:表示在卡片列表最下方是否进行分页显示。
页数选择:片列表下方显示分页的页数。
卡片阴影:可选择总是显示、悬浮显示、从不显示,悬浮显示是当鼠标悬浮在卡片上时,卡片出现阴影显示。
卡片高度和卡片间距:用于修改每个卡片的高度值以及卡片与卡片之间的横向纵向间距。
边框圆角:可以设置卡片列表边框圆角.
属性配置-扩展设置
- 扩展设置包括动态数据配置和静态数据配置,这两个功能都需要拖入其他组件到卡片列表后使用,下方将文字组件拖入,每张卡片都会自动加载一个文字组件。
- 交互编排
- 卡片列表可设置点击事件,通过设置点击事件动作实现卡片列表的交互。
高级表格
- 样式配置
样式配置-自定义样式:填写完自定义样式即可呈现出对应的效果。
样式配置-布局样式
宽度和高度:命名组件,便于页面管理。
定位方式:命名组件,便于页面管理。
布局方式:分为内联布局与块级布局,与对齐方式复合使用。
内联布局指下一个组件与本组件并排排列,此时可选择对齐方式,使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。
块级布局指本组件单独占据一行。
内外边距:命名组件,便于页面管理。
- 属性配置
属性配置-原生属性
组件名称:命名组件,便于页面管理。
组件尺寸:用于调节查询容器内容尺寸,可选择默认尺寸、超小尺寸、小型尺寸、中等尺寸、较大尺寸、大型尺寸、超大尺寸。
有无边框和斑马纹理:选择高几百个是否显示边框和斑马纹理。
有无表头和有无分页:选择高级表格是否添加表头和分页功能。
最大高度和行间距:设置高级表格的最大高度和表格内的行间距。
页数选择:选择表格一页可以展示的数据条数。
属性配置-扩展设置
基础列设置
点击“基础列设置”按钮后打开基础列设置弹窗,在弹窗中可对多选框、序号和操作栏的信息进行编辑。
在弹窗中可以选择多选框的对齐方式。
并且可以设置列宽、是否显示列、固定列。
在弹窗中可以选择序号的对齐方式。
并且可以设置列宽、表头字体、表头颜色、表格字体、表格颜色和是否显示列、固定列。
在弹窗中可以选择操作栏的对齐方式.
并且可以设置列宽、表头字体、表头颜色和是否显示列、固定列。
表格列设置
点击“表格列设置”按钮
打开表格列设置弹窗在弹窗中可设置表格列信息。
在弹窗中点击【添加一列】按钮即可为高级表格新增一列,在新增的列中设置列名称、对齐方式、列宽、最小列宽、表头字体、表头颜色、表格字体、表格颜色、值类型、值配置、超出隐藏、开启排序和是否固定列,其中值配置是根据所选的值类型类进行对应的配置。
当值类型选择为纯文字时,点击【值配置】按钮打开表格列自定义配置弹窗。
在弹窗中点击【添加一列】按钮添加过滤条件,需要填入过滤条件的过滤值和过滤文案,若想删除点击“删除”按钮即可删除对应的过滤条件。配置完过滤条件后点击【确定】按钮即可配置完成。
点击【表格数据设置】按钮打开表格数据设置弹窗。
在弹窗中刚刚值类型选择纯文字的对应列中填入过滤值后点击【确定】按钮。
即可在表格中展示对应的过滤文案。
当值类型选择为图标文字,点击【值配置】按钮打开表格列自定义配置弹窗。
在弹窗中点击【添加一列】按钮添加过滤条件,需要填入过滤条件的过滤值和图标类名,若想删除点击“删除”按钮即可删除对应的过滤条件。配置完过滤条件后点击【确定】按钮即可配置完成。
点击【表格数据设置】按钮打开表格数据设置弹窗。
在弹窗中刚刚值类型选择图标文字的对应列中填入过滤值后点击【确定】按钮。
即可在表格中展示对应的过滤文案。
当值类型选择为图片文字,点击【值配置】按钮打开表格列自定义配置弹窗。
在弹窗中点击【添加一列】按钮添加过滤条件,需要填入过滤条件的过滤值和图片地址,若想删除点击“删除”按钮即可删除对应的过滤条件。配置完过滤条件后点击【确定】按钮即可配置完成。
点击【表格数据设置】按钮打开表格数据设置弹窗。
在弹窗中刚刚值类型选择图片文字的对应列中填入过滤值后点击【确定】按钮。
即可在表格中展示对应的过滤文案。
当值类型选择为标签文字,点击【值配置】按钮打开表格列自定义配置弹窗。
在弹窗中点击【添加一列】按钮添加过滤条件,需要填入过滤条件的过滤值和标签名称,若想删除点击“删除”按钮即可删除对应的过滤条件。配置完过滤条件后点击【确定】按钮即可配置完成。
点击【表格数据设置】按钮打开表格数据设置弹窗。
在弹窗中刚刚值类型选择标签文字的对应列中填入过滤值后点击【确定】按钮。
即可在表格中展示对应的过滤文案。当值类型选择为进度条文字,点击怕【值配置】按钮打开表格列自定义配置弹窗。
在弹窗中填写进度条高度、进度条最小值、进度条最小值和选择是否显示文案后点击“确定”按钮即可完成配置。
点击【表格数据设置】按钮打开表格数据设置弹窗。
在弹窗中刚刚值类型选择进度条文字的对应列中填入进度条的进度值后点击【确定】按钮。
即可在表格中展示对应的进度条。
当值类型选择为动态图片,点击【值配置】按钮打开表格列自定义配置弹窗。
在弹窗中填写图片宽度、图片高度后点击【确定】按钮即可完成配置。
点击【表格数据设置】按钮打开表格数据设置弹窗。
在弹窗中刚刚值类型选择动态图片的对应列中填入动态图片地址后点击【确定】按钮。
即可在高级表格中展示动态图片。
当值类型选择为文件时,点击【值配置】按钮打开表格列自定义配置弹窗。
在弹窗中选择是否需要文件预览和文件预览后点击【确定】按钮即可完成配置。
点击【表格数据设置】按钮打开表格数据设置弹窗。
在弹窗中刚刚值类型选择文件的对应列中填入文件地址后点击【确定】按钮。
即可在高级表格中展示动态图片。
点击上移、下移或删除可将对应的列在当前位置在表格中向前移动一位、向后移动以为或者删除此列。
在弹窗中点击“通用配置”按钮打开表格列通用配置弹窗。
在弹窗中填写对齐方式、表头字体、表头颜色、表格字体和表格颜色后点击【确定】按钮后配置成功。
操作按钮设置
点击【操作按钮设置】按钮后打开操作按钮设置弹窗,在弹窗中可设置表格中的操作按钮。
点击弹窗中【】添加按钮填写新增按钮的按钮名称、按钮类型、按钮尺寸、按钮图标、按钮颜色和左外边距点击确定后,即可在高级表格中的操作栏添加一个按钮。
点击弹窗中【删除】按钮即可删除对应的按钮。
点击弹窗中【权限】按钮打开按钮权限设置弹窗,在弹窗中点击【添加过滤条件】后填写相关数据后点击确定即可完成设置。
表格数据设置
点击【表格数据设置】按钮后打开表格数据设置弹窗,在弹窗中可设置表格中的数据信息。
点击弹窗中【添加】按钮,即可新增一行表格数据。
点击弹窗中【导入】按钮即可将Excel中的数据导入到表格中
点击弹窗中【导出】按钮即可将表格中的数据导出到Excel中。
- 交互编排
- 高级表格可设置点击事件,通过设置点击事件动作实现高级表格的交互。
应用发布
应用发布是特别核心的功能,包括“应用校验”、“发布构建”、“查看日志”、“立即访问”、“构建状态”、“停止应用”、“启动应用”功能。
应用校验
在发布构建前,我们可以进行“导出校验”查看,该应用是否满足发布或导出的条件,它可以为我们检查应用事件编排、数据绑定等操作存在的问题。
点击浮木云上方工作台进入“应用发布”。
勾选需要校验的应用后点击上方【导出校验】按钮,在出现的弹窗中可查看应用存在的问题,点击【下载校验明细】可下载查看具体的错误信息。
发布构建
- 点击浮木云上方工作台进入“应用发布”。
- 勾选应用列表中需要发布的子应用,点击上方【发布构建】按钮完成发布。
查看日志
- 在对应用发布构建后,若“构建状态”为“构建成功”,点击应用列表中该应用右侧的【查看日志】按钮即可查看发布日志。
立即访问
- 在对应用发布构建后,若“构建状态”为“构建成功”,点击应用列表中该应用右侧的【立即访问】按钮即可访问该应用进行测试。
构建状态
- 在对应用发布构建后,会在表格中构架状态中查看到应用构建的动态构建进度。
停止应用
- 在对应用发布构建后,若“构建状态”为“构建成功”,点击应用列表中该应用右侧的【停止应用】按钮即可停止对该应用的发布。
启动应用
- 在对应用发布构建后,若“构建状态”为“已停止”,点击应用列表中该应用右侧的【启动应用】按钮即可对该应用进行启动。
源码导出
应用源码导出
应用源码导出是指根据需求,将子应用中的页面和页面交互的源代码打包成压缩文件,并下载到本地。导出的源码不仅可供研发人员进行修改,降低他们编写代码的工作量,同时还能提高开发效率。
你可以通过以下方式导出应用源码:
- 进入工作台点击【源码导出】按钮,打开源码导出弹窗;
- 选择导出应用后,可输入关键字查询子应用名称;
- 勾选需要导出的子应用源码,点击【导出源码】按钮,即可通过压缩包将勾选的子应用源码导出到本地。
页面源码导出
你可以通过以下方式导出页面源码:
- 进入工作台点击【源码导出】按钮,打开源码导出弹窗;
- 选择导出页面后,可输入关键字查询页面名称;
- 勾选需要导出的页面,点击【导出源码】按钮,即可通过压缩包将勾选的页面导出到本地。
应用校验
在导出源码前,我们可以进行“导出校验”查看,该应用是否满足导出的条件,它可以为我们检查应用交互编排等操作存在的问题。
你可以通过以下方式校验应用:
- 进入工作台点击【源码导出】按钮,打开源码导出弹窗;
- 勾选需要校验的子应用后,点击【应用校验】按钮校验通过后会提示“校验通过”;
- 校验失败则会出现弹窗提示,点击【下载校验明细】会下载一个Excel到本地。
页面校验
你可以通过以下方式校验页面:
- 进入工作台点击【源码导出】按钮,打开源码导出弹窗;
- 勾选需要校验的页面后,点击【应用校验】按钮校验通过后会提示“校验通过”;
- 校验失败则会出现弹窗提示,点击【下载校验明细】会下载一个Excel到本地。
团队管理
团队名称编辑
你可以通过以下方式编辑团队名称:
在浮木云主页左侧导航栏菜单中选择【团队管理】。
点击团队管理页面上方的编辑图标。
在输入框中编辑团队名称,点击确认图标,即可完成团队名称的编辑。
升级团队
你可以通过以下方式升级团队:
在浮木云主页左侧导航栏菜单中选择【团队管理】。
点击团队管理页面的【升级团队】按钮,页面出现“升级团队”弹窗。
创建团队的时候默认团队版本是免费版,席位数、应用数、应用运行数、单个应用页面数、源码导出次数、存储空间和项目连续运行时间都有一定限制。点击企业版【抢先体验】按钮,页面出现弹窗。
在“抢先体验”弹窗中输入企业名称、姓名、联系电话和验证码,点击【确定】按钮后即可完成升级企业版团队的信息登记。
点击私有部署版【联系我们】按钮,页面出现弹窗。
在“联系我们”弹窗中输入企业名称、姓名、联系电话和验证码,点击【确定】按钮后即可完成升级私有部署版团队的信息登记。
解散团队
你可以通过以下方式解散团队:
在浮木云主页左侧导航栏菜单中选择【团队管理】。
点击团队管理页面的【解散团队】按钮,页面出现提示弹窗。
点击弹窗右下角的【确定】按钮,即可解散团队。
移交团队
你可以通过以下方式移交团队:
在浮木云主页左侧导航栏菜单中选择【团队管理】。
点击团队管理页面的【移交团队】按钮,页面出现弹窗。
在下拉框中选择移交用户,再输入验证码。点击弹窗右下角的【确定】按钮,即可移交团队。每个团队只有一位团队管理员,移交后将成为普通成员,不会退出团队。
邀请成员
你可以通过以下方式邀请成员:
在浮木云主页左侧导航栏菜单中选择【团队管理】。
点击团队管理页面的【邀请成员】按钮,页面出现弹窗。
在输入框中输入手机号,点击【发送邀请】按钮,即可通过手机号邀请对方加入团队。
点击【复制链接】按钮,将链接分享给好友,好友注册并登录后接收邀请即可加入团队。
移出成员
你可以通过以下方式移出成员:
在浮木云主页左侧导航栏菜单中选择【团队管理】。
点击团队管理页面列表操作列的【移出成员】按钮,页面出现提示弹窗。
点击弹窗右下角的【确定】按钮,即可移出成员。
个人中心
个人中心
你可以通过以下方式管理个人中心:
点击浮木云主页右上角的头像,点击【个人中心】即可进入个人中心页面。
在个人信息板块,可以查看头像、用户名和手机号。点击用户名左侧的编辑图标。
在输入框中编辑用户名称,点击确认图标,即可完成用户名的编辑。
在参与的应用板块点击卡片,即可快速进入想要编辑的应用工作台页面。
在参与的团队板块可以查看参与的团队名称、团队角色、团队版本、加入团队时间、团队项目数量和团队页面数量。
修改密码
你可以通过以下方式修改密码:
点击浮木云主页右上角的头像,点击【修改密码】,页面出现弹窗。
在弹窗中输入原密码和新密码,再确认新密码。点击【确定】,即可完成密码的修改。
创建团队
你可以通过以下方式创建团队:
点击浮木云主页上方的团队名称。
点击【创建新团队】,页面出现弹窗。
在弹窗中输入团队名称,点击【确定】按钮,即可完成创建团队操作。
团队切换
你可以通过以下方式切换团队:
点击浮木云主页上方的团队名称。
点击想要切换的团队,即可完成团队的切换操作。
协作管理
协作管理可为应用添加成员、移出成员、控制应用内的成员权限,可提高工作效率、减少沟通成本、减少误操作。
添加成员
点击浮木云工作台“应用设置”按钮,进入左侧【协作管理】。
进入应用设置后点击工作台的【协作管理】按钮。
点击页面左上角【添加成员】按钮。
弹窗中勾选参与应用的成员,配置该人员的权限后点击【确定】按钮完成添加,可在协作人员列表中看到该成员。
查询成员
- 在协作管理页面左上角输入框输入要查询的人员名称后点击【查询】按钮即可查询该人员信息,点击“重置”按钮即可重置输入框与列表信息。
权限管理
点击【权限管理】即可设置成员可查看、可管理或可编辑权限。
选择设置成员对此应用的权限后点击【确认】按钮后即可添加成功。
移除成员
- 点击移出成员后会弹出提示弹窗,点击提示弹窗中的【确认】按钮后完成移出成员操作。