应用开发

应用创建

  应用是浮木云的基础，本目录中的所有操作都是基于应用进行的，以下将会介绍如何创建、编辑、删除应用。

应用设置

应用封面更换

1. 在基本信息板块点击【编辑应用】按钮。
   

2. 在页面出现的弹窗里选择应用封面，点击右下角删除图标，将已有的应用封面删除。
   
   

3. 点击应用封面，上传新的封面，点击【确定】按钮，应用封面更换完成。
   

应用名称修改

1. 在基本信息板块点击【编辑应用】按钮。
   

2. 在页面出现的弹窗里编辑应用名称。点击【确定】按钮，应用名称修改完成。
   

行业分类编辑

1. 在基本信息板块点击【编辑应用】按钮。
   

2. 在页面出现的弹窗里选择行业分类。行业分类有智慧政务、农业农村、城乡住建、自然资源、园区管理、企业管理、教育教学、毕业设计和其他九个选项。点击【确定】按钮，行业分类编辑完成。
   

应用描述编辑

1. 在基本信息板块点击【编辑应用】按钮。
   

2. 在页面出现的弹窗里编辑应用描述。 点击【确定】按钮，应用描述编辑完成。
   

保存应用信息

1. 点击【确定】按钮，保存应用信息。
   

删除应用

 可以通过以下两种方式删除应用：

从应用管理页面删除应用

1. 点击【删除】按钮，页面出现提示弹窗。
   

2. 点击弹窗下方的【确定】按钮即可完成应用的删除。
   

从应用设置页面删除应用

1. 点击应用左上方导航栏中的【应用设置】后，进入应用设置页面。
   

2. 在基本信息板块点击【删除应用】按钮。
   

3. 出现提示弹窗，点击【确定】按钮可完成应用的删除。
   

子应用创建

  为满足用户多样化的需求，浮木云支持web，业务大屏、移动端H5三种应用类型的管理。Web应用是一种在浏览器中运行的应用程序，这种应用程序通常通过互联网或内部网络提供服务。Web应用程序可以用于各种用途，例如在线购物、社交媒体、搜索引擎。业务大屏是一种实时监控和数据可视化工具，能够将复杂的业务数据以图表、报表等可视化元素的方式呈现在大屏幕上。通过业务大屏，用户可以快速了解整个业务的运行情况、趋势和关键指标，以便更好地做出决策和调整业务策略。业务大屏通常用于企业、政府机构或其他组织内部。H5应用是一种以HTML5技术为基础的移动应用程序。H5应用使用HTML5、CSS和JavaScript技术，可以在各种移动设备上运行，例如智能手机、平板电脑等。与原生应用相比，H5应用更易于开发和维护，并且可以跨平台运行。常见的H5应用包括移动端网站、微信小程序等。

子应用创建

 可以通过以下两种方式创建子应用：

从应用设置页面新增子应用

1. 点击【应用设置】后，进入应用设置页面。
   

2. 点击子应用信息板块的【新增子应用】按钮。
   

3. 在页面出现的弹窗里面输入新建的子应用名称，选择子应用类型和应用尺寸。新建子应用类型有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。点击弹窗下方的【确定】按钮，即可完成子应用的新增。
   

4. 新增子应用后，可在子应用信息模块查看新增的子应用。
   

编辑子应用

 可以通过以下方式编辑子应用：

1. 点击应用页面上方导航栏中的【应用设置】后，进入应用设置页面，点击切换到需要修改的子应用。点击【编辑子应用】按钮。
   

2. 在页面出现的弹窗里面修改子应用名称、切换子应用尺寸、对子应用标题重命名、重新上传子应用图标。点击弹窗下方的【确定】按钮，即可完成子应用的编辑。
   

删除子应用

1. 点击应用页面上方导航栏中的【应用设置】后，进入应用设置页面。
   

2. 点击子应用信息板块的【删除子应用】按钮。
   

3. 页面出现提示弹窗，点击【确定】按钮即可完成子应用的删除。
   

子应用主题配置

导航配置

1. 点击【子应用主题配置】按钮，打开子应用主题配置弹窗。
   

2. 导航主题。选择导航主题样式，具体样式有深蓝色、暗黑色、墨绿色和自定义。
   

3. 菜单背景颜色。 输入RGB或者CMYK的具体参数，修改菜单背景颜色。
   

4. 菜单悬浮颜色。 输入RGB或者CMYK的具体参数，修改菜单悬浮颜色。
   

5. 菜单激活颜色。 输入RGB或者CMYK的具体参数，修改菜单激活颜色。
   

6. 菜单文字颜色。 输入RGB或者CMYK的具体参数，修改菜单文字颜色。
   

7. 菜单文字悬浮颜色。 输入RGB或者CMYK的具体参数，修改菜单文字悬浮颜色。
   

8. 菜单文字激活颜色。 输入RGB或者CMYK的具体参数，修改菜单文字激活颜色。
   

9. 头部文字颜色。 输入RGB或者CMYK的具体参数，修改头部文字颜色。
   

10. 头部背景颜色。 输入RGB或者CMYK的具体参数，修改头部背景颜色。
    

11. 导航边框颜色。 输入RGB或者CMYK的具体参数，修改导航边框颜色。
    

12. 菜单文字字体大小设置。
    

13. 顶部高度设置。
    

14. 侧边宽度设置。
    

组件主题配置

1. 点击【子应用主题配置】按钮，打开子应用主题配置弹窗。
   

2. 子应用主题。选择子应用主题样式，具体样式有默认、深蓝主题、暗黑主题、墨绿主题、淡灰主题、青紫主题、深绿主题、蓝紫主题、蓝黑主题、暗黄主题、淡绿主题。
   

3. 主要颜色。输入RGB或者CMYK的具体参数，修改组件主要颜色。
   

4. 成功颜色。输入RGB或者CMYK的具体参数，修改成功颜色。
   

5. 警告颜色。输入RGB或者CMYK的具体参数，修改警告颜色。
   

6. 危险颜色。输入RGB或者CMYK的具体参数，修改危险颜色。
   

7. 信息颜色。输入RGB或者CMYK的具体参数，修改信息颜色。
   

8. 组件尺寸。选择组件尺寸，尺寸有超大尺寸、大型尺寸、较大尺寸、默认尺寸、中型尺寸、小型尺寸和超小尺寸。
   

9. 组件类型。选择组件类型，类型有主要类型、成功类型、警告类型、危险类型和信息类型。
   

编辑导航配置

  导航通常指的是应用程序中引导用户访问各个功能或内容的布局结构。导航的作用是告诉用户如何找到他们需要的信息或完成特定的任务。一个良好的导航设计应简洁明了，避免过多的层级关系和复杂的操作。

导航菜单菜单配置

  导航菜单数据配置是指在Web应用中对导航菜单进行设置和调整的过程。通过配置数据，可以自定义导航菜单的样式、内容和交互方式，以满足用户需求和提高用户体验。

1. 导航类型
    可以通过以下方式配置导航：
   （1）点击【编辑导航配置】按钮，出现编辑导航配置弹窗。
   
   （2）在页面出现的弹窗左侧选择导航类型和默认首页，点击【保存】按钮即可完成导航的配置。
   
   

2. 导航菜单数据配置
    导航菜单数据配置是指在Web应用中对导航菜单进行设置和调整的过程。通过配置数据，可以自定义导航菜单的样式、内容和交互方式，以满足用户需求和提高用户体验。导航菜单数据配置包括“全部展开”、“全部收起”、“新增菜单”、“编辑菜单”、“删除菜单”、“新增子应用”。
   （1）全部展开
    导航菜单数据配置全部展开是指在Web应用中，将导航菜单的所有子菜单项都设置为展开状态。当用户访问导航菜单时，所有子菜单项都将自动展开，无需用户手动展开。全部展开的优点是用户可以快速地看到所有可用的子菜单项，并直接点击所需的链接，提升了用户体验。
   

 在编辑导航配置弹窗中点击【全部展开】按钮后即可全部展开。
  

（2）全部收起
 导航菜单数据配置全部收起是指在Web应用中，将导航菜单的所有子菜单项都设置为折叠状态。这意味着当用户访问导航菜单时，所有子菜单项都将默认折叠，用户需要手动展开所需的子菜单项。全部收起的优点是节省屏幕空间，使主内容区域更加集中和清晰。

 在编辑导航配置弹窗中点击【全部收起】按钮后即可全部收起。
  

 （3）新增菜单
 导航菜单数据配置新增菜单是指在Web应用中配置数据来添加新的菜单。这通常涉及编辑导航菜单的数据结构，添加菜单的父级菜单、菜单名称、菜单别名、排序、跳转页面、关联页面、菜单图标属性，并更新相应的菜单显示内容。父级菜单为新增的菜单的上一级菜单，菜单名称为新增的菜单的名称，菜单别名为新增的菜单的别称，排序为新增的菜单所在顺序，跳转页面为新增的菜单被点击后跳转到目标页面，关联页面为新增的菜单绑定关系的页面，菜单图标则是菜单的显示图标。

 可以通过以下方式新增菜单：
 a.在编辑导航配置弹窗中点击【新增菜单】按钮后会弹出新增菜单弹窗。
  
 b.在新增菜单弹窗中填写新增的菜单的父级菜单、菜单名称、菜单别名、排序、跳转页面、关联页面、菜单图标字段属性后点击【确定】按钮即可新增成功。
  

 （4）编辑菜单
 导航菜单数据配置编辑菜单是指在Web应用中对现有导航菜单进行编辑的过程。通过编辑菜单，可以修改菜单的父级菜单、菜单名称、菜单别名、排序、跳转页面、关联页面、菜单图标属性，以满足用户需求或更新菜单显示内容。

 可以通过以下方式编辑菜单：
 a.点击编辑导航配置弹窗中要编辑的菜单对应的最右侧第二个蓝色按钮会打开编辑菜单弹窗。
  

b.在编辑弹窗中填写要编辑菜单的父级菜单、菜单名称、菜单别名、排序、跳转页面、关联页面、菜单图标字段属性后点击【确定】按钮即可编辑成功。
  

（5）删除菜单
 导航菜单数据配置删除菜单是指在Web应用中将现有导航菜单从菜单结构中移除的过程。通过删除菜单，可以移除不再需要或不再适用的菜单项，以简化导航菜单的结构和内容。

 可以通过以下方式删除菜单：
 a.点击编辑导航配置弹窗中要删除的菜单对应的最右侧红色按钮会打开删除提示弹窗。
  

 b.提示弹窗中会给出消息提示确认您是否删除菜单，点击提示弹窗中的【确定】按钮即可删除。
  

 （6）新增子菜单
 导航菜单数据配置新增子菜单是指在Web应用中通过配置数据来添加新的子菜单项的过程。这通常涉及编辑导航菜单的数据结构，添加新的子菜单项，并更新相应的父菜单项以包含新添加的子菜单项。

可以通过以下方式新增子菜单：
a.点击编辑导航配置弹窗中要新增子菜单的菜单对应的最右侧第一个按钮会打开新增菜单弹窗。
  

b.在新增菜单弹窗中填写要新增的子菜单的父级菜单、菜单名称、菜单别名、排序、跳转页面、关联页面、菜单图标字段属性后点击确定即可新增子菜单成功。
  

应用发布运行与源码导出

应用发布

  页面搭建和交互逻辑设计完成后，可进行应用发布，应用发布包括“应用校验”、“发布构建”、“查看日志”、“立即访问”、“构建状态”、“停止应用”、“启动应用”功能。

应用校验

  在发布构建前，我们可以进行“导出校验”查看，该应用是否满足发布或导出的条件，它可以为我们检查应用事件编排、数据绑定等操作存在的问题。

1. 点击浮木云上方工作台进入“应用发布”。
   

2. 勾选需要校验的应用后点击上方【应用校验】按钮，在出现的弹窗中可查看应用存在的问题，点击【下载校验明细】可下载查看具体的错误信息。
   

发布构建

1. 点击浮木云上方工作台进入“应用发布”。
   
2. 勾选应用列表中需要发布的子应用，点击上方【发布构建】按钮完成发布。
   

查看日志

1. 在对应用发布构建后，若“构建状态”为“构建成功”，点击应用列表中该应用右侧的【查看日志】按钮即可查看发布日志。
   

立即访问

1. 在对应用发布构建后，若“构建状态”为“构建成功”，点击应用列表中该应用右侧的【立即访问】按钮即可访问该应用进行测试。
   

构建状态

1. 在对应用发布构建后，会在表格中构架状态中查看到应用构建的动态构建进度。
   

停止应用

1. 在对应用发布构建后，若“构建状态”为“构建成功”，点击应用列表中该应用右侧的【停止应用】按钮即可停止对该应用的发布。
   

启动应用

1. 在对应用发布构建后，若“构建状态”为“已停止”，点击应用列表中该应用右侧的【启动应用】按钮即可对该应用进行启动。
   

源码导出

  应用源码导出是指根据需求，将子应用中的页面和页面交互的源代码打包成压缩文件，并下载到本地。导出的源码不仅可供研发人员进行修改，降低他们编写代码的工作量，同时还能提高开发效率。
你可以通过以下方式导出应用源码：

1. 进入工作台点击【源码导出】按钮；
   
2. 系统显示导出成功，用户可将源码包另存为文件夹；
   

页面管理与设计

页面管理

新增页面

1. 在当前子应用下点击“页面”菜单下“全部”文件夹右侧的【齿轮】按钮，在弹出的弹窗中点击【新增页面】按钮。
   

2. 在弹出的【新增页面】弹窗中输入页面名称和标签，点击【确定】完成新增，页面的标签首字母必须大写，不能包含中文和数字，且不同页面的标签不能一样。页面名称用于在画布中区分不同的页面，页面标签用于区分发布后的页面。
   

   一般页面的命名规则为：“模块-页面名称 ”或“人员-页面名称”，例如“人员管理-添加人员”、“管理人员-首页”。

编辑页面

1. 点击页面右侧的【齿轮】按钮，在出现的下拉框中点击【编辑页面】按钮。
   

2. 在出现的弹窗中修改“名称”后，点击【确定】完成编辑。
   

克隆页面

1. 点击需要移动的页面右侧的【齿轮】按钮，在出现的下拉框中选择【克隆页面】。会弹出信息弹窗。
   

2. 弹出克隆页面弹窗，自拟名称和标签后点击【确定】按钮。
   

3. 克隆后的页面将会默认出现在“全部”分组之下，克隆页面后，原页面的数据绑定和事件编排也会一并带过来，在设计页面时应根据需要进行修改。
   

移动页面

1. 点击需要移动的页面右侧的【齿轮】按钮，在出现的下拉框中选择【移动页面】。
   

2. 在出现的弹窗中选择移动页面的目标子应用。
   

3. 点击【确认】按钮后即可在目标子应用看到移动的页面。
   

克隆并移动页面

1. 点击页面右侧的【齿轮】按钮，在出现的下拉框中选择【克隆并移动】。
   

2. 在出现的弹窗中填写名称、标签、选择应用和选择页面要移动到的子应用，WEB端的子应用只能移动到WEB端，其他类型子应用同理。
   

3. 点击【确认】按钮后即可在目标子应用看到克隆的页面。
   

删除页面

1. 点击页面右侧的【齿轮】按钮，在出现的下拉框中选择【删除页面】。
   

2. 在出现的弹窗中点击【确定】完成删除（若该页面已配置导航菜单则无法删除，需要解除菜单配置才能删除）。
   

页面布局

画布基本属性

 应用页面一般宽高为1920*1080px，顶栏高度为60px，由于画布中的“页面”自带10px的左右内边距，再去掉浏览器的标签页，系统下方的任务栏等影响，可操作的页面一般总宽高为1900px·857px。（若有左侧导航栏还应去掉导航栏的宽度）。

页面结构树

 熟练使用页面结构树，可以让我们快速定位组件的位置、页面搭建存在问题、审视页面的布局是否合理。通过页面结构树视图可以对当前页面的所有组件进行查询、编辑和排版。

1. 在“页面设计”界面选择所需的子应用以及页面，左侧导航栏的“页面结构树”即可对当前页面的组件进行编辑和排版。
   

2. 在当前页面新增组件库中的组件之后，左侧导航栏的“页面结构树”中的输入框中对新增的组件进行搜索、过滤以及定位。
   

3. “页面结构树”也会根据新增的组件自动生成树状结构目录，点击左侧导航栏“页面结构树”下组件目录树对应的组件名，中间画布中会自动选中对应的组件。
   

页面操作

  页面操作位于“页面设计”画布上方菜单栏，熟练使用页面操作可以使我们更加方便，快速的搭建页面，也能减少错误率。使用页面操作的前提是页面的状态为“解锁”状态。

释放/解锁页面

 点击“资源锁”后可修改当前页面的状态，当“页面资源锁”处于锁定的状态下时，“页面设计”下当前页面的页面结构、组件库和属性配置、数据绑定、事件编排都将无法操作，而其他人可以进入该页面进行操作。当“页面资源锁”处于“解锁”状态下时候，自己则可以对页面进行操作，而其他人在进入该页面时则为“锁定”状态。所以自己在操作“页面设计”之前必须先确保当前页面的页面资源锁处于解锁状态，想要他人操作该页面之前必须确保自己当前页面的资源锁处于锁定状态，关闭该页面自动解锁。操作步骤如下：

1. 点击“页面设计”画布上方菜单栏的【锁】图标。
   

2. 当“锁”图标处于解锁状态时，再次点击【锁】图标，页面将处于锁定状态，且当前页面所有功能都将无法操作。
   

保存

1. 保存是保存当前的页面设计，可点击画布上方【保存】按钮，也可通过快捷键“Ctrl+S”实现。
   

居中

1. 居中是将画布处于页面中间，快速回到画布。
   

撤销/恢复

1. 点击撤销可撤销上一步操作，恢复是恢复撤销的操作。
   

删除

1. 选中画布中组件，点击【删除】按钮可删除选中的组件。也可点击页面结构树种的组件进行删除。
   

复制/粘贴

1. 选中需要复制的组件，点击画布上方菜单栏【复制】图标，提示“复制成功”。
   

2. 复制好组件后，点击画布中或结构树中待粘贴的父组件，点击画布上方菜单栏【粘贴】按钮。待粘贴处显示该组件说明粘贴成功，同时右上角提示“粘贴成功”。
   

3. 复制一次后可进行多次粘贴。
   注：粘贴组件后，该组件的数据绑定和事件编排会自动清除。

预览

 在页面设计画布中完成设计后，可以通过预览的方式查看页面设计情况，页面预览操作步骤如下：

1. 在“页面设计”中，点击画布上方菜单栏【保存】按钮，或通过快捷键“Ctrl + S”对页面进行保存（若未保存则预览的是上次保存后的页面）。

2. 保存好页面后，点击画布上方菜单栏【预览】图标。
   

3. 点击【预览】图标之后，浏览器会自动新增一个预览标签页。
   

代码预览

 在页面设计画布中完成设计后，可以使用代码预览来查看搭建的页面的代码，页面代码预览操作步骤如下：

1. 在“页面设计”中，点击画布上方菜单栏“保存”按钮，或通过快捷键“Ctrl + S”对页面进行保存（若未保存则代码预览的是上次保存后的页面）。

2. 保存好页面后，点击画布上方菜单栏【代码预览】图标。
   

3. 点击【代码预览】图标之后，浏览器会在当前窗口右侧自动弹出代码展示窗口。
   

页面校验

 在页面设计画布中完成设计后，可以使用页面校验来判断当前搭建的页面的交互编排是否有错误、组件是否存在、页面是否存在、页面参数是否存在和变量是否存在。如果页面有错误的话，校验就无法通过。 页面校验操作步骤如下：

1. 在“页面设计”中，点击画布上方菜单栏【保存】按钮，或通过快捷键“Ctrl + S”对页面进行保存。
2. 保存好页面后，点击画布上方菜单栏“页面校验”图标。
3. 点击“页面校验”图标之后，浏览器会在当前窗口自动弹出提示弹框。
   页面校验未通过的情形如下：
   页面校验通过的情形如下：
   

开启辅助线

1. 开启辅助线即显示各个组件的边框，便于了解当前页面组件大小。
   

缩放画布

 缩放画布即是缩小或放大画布尺寸，可选择合适的画布大小进行页面搭建，浮木云画布的缩放范围为40%-200%。 可以直接点击画布上方菜单栏的“缩放画布”图标。

页面设计WEB端组件库

  组件是一种可重复利用的模块化部件，它拥有特定的功能和界面，并能够与其他组件或应用程序进行交互。组件能够在项目或应用程序中被多次使用，以提高开发效率和代码可维护性。

容器

  容器都是用来布局和管理页面元素的工具，其丰富的配置项、可重用性强的特点适应了不同的页面需求并减少了代码的冗余和维护成本。容器的配置包括属性配置和样式配置。

布局容器

  布局容器是包含和组织其他控件的容器，容器中的组件默认为纵向排列，正确的使用布局容器可以帮我们构建良好结构化的用户界面。

1. 属性配置:
   属性配置--原生属性:
   

• 组件别名，命名组件，便于页面管理。
  

• 拖拽提示，是否显示拖拽组件字段。
  

• 是否隐藏，用于设置组件是否可见。
  

  属性配置--扩展设置:

• 布局容器暂无扩展设置。
  

2. 样式配置：
   样式配置--布局样式：
   

• 宽度和高度： 确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的高宽确定容器的大小。
  

• 水平溢出和垂直溢出： 可以选择隐藏和滚动，当布局容器中内容的尺寸超过弹性容器的尺寸时，选择隐藏只能展示布局容器尺寸范围内的内容，选择滚动则可以通过滑动展示所有内容。
  

• 定位方式： 可选择相对定位和绝对定位，通过设定至顶部、左侧、右侧、底部的距离控制其位置。
  

• 展示层级 当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

• 内外边距： 内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。如下图所示，对第一行外部容器的左内边距设置为50，下外边距设置为20。
  

  样式配置--背景样式：

• 背景颜色： 通过手动拖动拾色器、输入颜色的rgba值或输入颜色的十六进制值的方式改变背景颜色。
  

• 背景图片： 点击上传标识从本地选择图片或输入图片地址作为容器的背景图片。
  

• 背景阴影： 可选择基础投影和浅色投影。
  

• 显示边框： 用于修改盒子边框的样式，可选择实线、点状、双线、虚线，与边框颜色、盒子边框配合使用。
  

3. 事件编排
   

• 布局容器可设置点击事件，通过设置点击事件动作实现布局容器的交互.
  

弹性容器

  弹性容器是用于构建灵活的、自适应布局的模块，容器内的组件默认为横向排列，它提供了一种方便的方式，使容器内的元素按指定的规则排列并可以扩展和收缩。

1. 属性配置:
   属性配置--原生属性:
   

• 组件别名，命名组件，便于页面管理。
  

• 拖拽提示，用于设置组件拖拽文字提示是否可见。
  

• 是否隐藏，用于设置组件是否可见。
  

  属性配置--扩展设置:

• 弹性容器暂无扩展设置。
  

2. 样式配置：
   样式配置--布局样式：
   

• 宽度和高度： 确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的高宽确定容器的大小。
  

• 水平溢出和垂直溢出： 可以选择隐藏和滚动，当弹性容器中内容的尺寸超过弹性容器的尺寸时，选择隐藏只能展示弹性容器尺寸范围内的内容，选择滚动则可以通过滑动展示所有内容。
  

• 布局方式： 锁定为弹性布局。弹性布局可以使容器在水平方向上排列其子元素，并可以将子元素进行伸缩和对齐调整。
  

• 横向对齐和纵向对齐： 确定其内部组件在容器中的对齐方式。
  

• 换行方式 可选择不换行和换行，不换行允许多个组件在同一行水平排列，换行只允许一行放置一个组件。
  

• 定位方式： 可选择相对定位和绝对定位，通过设定至顶部、左侧、右侧、底部的距离控制其位置。
  

• 展示层级 当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

• 内外边距： 内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

  样式配置--背景样式：

• 背景颜色： 通过手动拖动拾色器、输入颜色的rgba值或输入颜色的十六进制值的方式改变背景颜色。
  

• 背景图片： 点击上传标识从本地选择图片或输入图片地址作为容器的背景图片。
  

• 背景阴影： 可选择基础投影和浅色投影。
  

• 显示边框： 用于修改盒子边框的样式，可选择实线、点状、双线、虚线，与边框颜色、盒子边框配合使用。
  

3. 交互编排
   

• 弹性容器可设置点击事件，通过设置点击事件动作实现弹性容器的交互.
  

****

  栅格容器页面划分为一个或多个栏数，通过设置分栏栏数、分栏间隔和分栏占比实现页面的布局。使用栅格容器就可以避免多个容器组建的嵌套，适用于布局复杂、内容的丰富的页面。

1. 属性配置
   属性配置-原生属性

• 组件别名：命名组件，便于页面管理。
  

• 分栏间隔：用于修改栅格容器中两插槽之间的间隔距离。
  

• 分栏栏数：下拉框选择不同数量，可修改栅格容器插槽容器的数量。
  

• 分栏占比：指栅格容器插槽的宽度比。
  

属性配置-扩展属性 栅格容器暂无扩展属性。

2. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 水平溢出和垂直溢出：可以选择隐藏和滚动，当栅格容器中内容的尺寸超过表单的尺寸时，选择隐藏只能展示栅格容器尺寸范围内的内容，选择滚动则可以通过滑动展示所有内容。
  

• 定位方式：锁定为相对定位，通过设定至顶部、左侧、右侧、底部的距离控制组件位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

  样式配置-背景样式

• 背景阴影：可选择基础投影和浅色投影。
  

• 背景图片：点击上传标识从本地选择图片或输入图片地址作为容器的背景图片。
  

• 背景颜色：通过手动拖动拾色器、输入颜色的rgba值或输入颜色的十六进制值的方式改变背景颜色。
  

• 显示边框：选择是否显示边框，如果显示，出现一个盒子，用于围绕组件的内容和内外边距创建一个可见的边界。下方图例将盒子边框四角设置为20，使盒子四个角平滑化，将上下左右值设置为10，使盒子边框大小为10，并将边框样式设置为虚线，边框颜色设置为蓝色。
  

折叠面板

  折叠面板允许通过单击折叠面板标题栏来显示或隐藏相关内容，通常用于组织大量信息并提高页面的可用性，同时还能使界面更加整洁美观。

1. 属性配置
   属性配置-原生属性

• 组件别名：命名组件，便于页面管理。
  

• 组件尺寸：调整组件大小。
  

• 标题颜色：通过手动拖动拾色器、直接输入rgba值或输入十六进制值的方式改变折叠面板所有的标题颜色。
  

• 字体粗细：用于修改折叠面板标题的粗细。
  

• 标题左距：标题至折叠面板容器左边边界的距离。
  

• 图标地址：点击上传标识从本地选择图片或输入图片地址作为标题前的图片。
  

  属性配置-扩展设置

• 默认状态：全展开指所有折叠面板的内容都展开，全收起指折叠面板所有内容都隐藏，自定义指自由选择展开和隐藏的面板。

• 面板设置：点击添加可新增一个面板，在面板设置内可修改每个面板的标题，对勾可控制每个面板的展开状态，操作栏可删除面板。

2. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 水平溢出和垂直溢出：可以选择隐藏和滚动，当折叠面板中内容的尺寸超过折叠面板的尺寸时，选择隐藏只能展示折叠面板尺寸范围内的内容，选择滚动则可以通过滑动展示所有内容。
  

• 定位方式：可选择相对定位和绝对定位，通过设定至顶部、左侧、右侧、底部的距离控制组件位置。
  

• 定位位置：通过设定至顶部、左侧、右侧、底部的距离控制组件位置。
  

• 展示层级：不同组件在同一页面显示的优先级。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

选项卡

  选项卡一般用于分隔内容上有关联但属于不同类别的数据集合，例如项目的不同类别，使用选项卡的前提是这些类别是有限的。标签页可以帮助开发者更好地组织页面内容,减少信息量,方便用户快速找到自己需要的信息，提高页面的易用性和用户体验。

1. 属性配置
   属性配置-原生属性

• 组件别名：命名组件，便于页面管理。
  

• 组件尺寸：调整组件大小
  

• 标签风格：可选择默认、选项卡、卡片三种风格，来修改标签样式。
  

• 标签位置：标签在标签页组件的位置，可选择顶部、右侧、左侧。
  

• 标签颜色：可修改标签的字体大小（单位为px）和颜色。
  

  属性配置-扩展设置

• 面板设置：点击添加可新增一个选项，在选项设置内可修改每个标签的标题，操作栏可删除标签。

2. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：可选择相对定位和绝对定位，通过设定至顶部、左侧、右侧、底部的距离控制组件位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

3. 事件编排
   

• 选项卡可设置点击事件，通过设置点击事件动作实现标签页的交互.
  

弹窗

  弹窗是出现在当前页面之上的一个浮动窗口，自带“取消”和“确定”两个按钮，此类弹窗的功能主要是引导用户填写信息，与基础组件中的提示弹窗不同。它相当于一个容器，内部可以使用其他容器实现布局，并使用基础组件、表单组件适配弹窗内容。弹窗组件常见的应用场景有增、删、改、详情等等。

1. 属性配置
   属性配置-原生属性

• 组件别名：命名组件，便于页面管理。
  

• 拖拽提示：用于设置组件拖拽文字提示是否可见。
  

• 组件尺寸：调整组件大小
  

• 弹窗标题：用于修改弹窗顶部的标题文字。
  

• 顶部距离：指弹窗距离页面顶部的距离大小，单位为vh。
  

• 弹窗显隐：用来设置弹窗在页面中是否可见。
  

• 能否拖拽：用于设置组件拖拽文字提示是否可见。
  

• 按钮显隐：用来设置弹窗的取消按钮和确定按钮在页面中是否可见。
  

• 取消文案和确定文案：用来设置弹窗的取消按钮和确定按钮的文本文字。
  

• 取消类型和确定类型：用于修改弹窗的确定按钮和取消按钮的颜色样式。
  

  属性配置--扩展设置

• 弹窗暂无扩展设置。

2. 样式配置
   样式配置-布局样式

• 高度和宽度：确定组件的大小，可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

3. 交互编排
   

• 弹窗可设置点击事件，通过设置点击事件动作实现弹窗的交互.
  

抽屉

  抽屉是当前页面侧边的一个容器，自带取消和确定两个按钮。可以设置抽屉的大小、打开方向（左或右）、抽屉显隐、按钮显隐等。和其他组件配合使用在容器中展示信息。常用于对某内容进行补充说明；展示不紧急的细节信息。进行信息补充编辑等。不会跳转页面而打断用户的操作流程。

1. 属性配置
   属性配置-原生属性

• 组件别名：命名组件，便于页面管理。
  

• 拖拽提示：用于设置组件拖拽文字提示是否可见。
  

• 组件尺寸：调整组件大小。
  

• 抽屉标题：用于修改抽屉顶部的标题文字。
  

• 打开方向：可选择四个方向打开抽屉。
  

• 抽屉大小：用于修改抽屉的宽度大小。
  

• 抽屉显隐：用来设置抽屉在页面中是否可见。
  

• 点击遮罩是否关闭：选择否，则点击页面非抽屉部分，抽屉不会隐藏。若选择是，则点击页面非抽屉部分，抽屉自动隐藏。
  

• 按钮显隐：用来设置抽屉的取消按钮和确定按钮在页面中是否可见。
  

• 取消文案和确定文案：用来设置抽屉的取消按钮和确定按钮的文本文字。
  

• 取消类型和确定类型：用于修改抽屉的确定按钮和取消按钮的颜色样式。
  

  属性配置-原生属性

• 抽屉暂无扩展设置。

2. 样式配置
   

• 抽屉暂无样式配置。

3. 交互编排
   

• 抽屉可设置点击事件，通过设置点击事件动作实现抽屉的交互.
  

基础组件

  基础组件提供了在应用开发过程中常用的一些可重复使用的组件，它们可以帮助开发人员快速构建应用的用户界面，并且可以根据具体需求进行自定义定制。基础组件的设计旨在提高开发效率、节省时间和资源，并且提供一定的灵活性和扩展性，以满足不同应用的需要。

按钮

  按钮一般与事件编排配合使用，点击按钮触发某个事件。普通按钮用于提交表单、完成操作、打开链接、触发动作等等，是最常用的一种按钮类型；文字按钮常用于表格的操作列。

1. 属性配置
   属性配置-原生属性

• 组件别名：命名组件，便于页面管理。
  

• 按钮名称：用于设置按钮中显示的文字内容
  

• 按钮类型：根据按钮的功能选择不同的按钮类型，可选默认按钮、主要按钮、成功按钮、警告按钮危险按钮和信息按钮，不同类型的按钮样式不同。
  

• 文字按钮：选择是否为文字按钮。
  

• 组件尺寸：调整组件大小。
  

• 按钮模式：调整按钮的风格模式，可选择默认或者朴素。
  

• 按钮圆角：可选默认或者圆角，选择默认时按钮为矩形，选择圆角时按钮则为圆角矩形。
  

• 按钮圆形：可选默认或者圆形，选择相应的选项按钮就会调整为矩形或者圆形。
  

• 按钮颜色：可选不同按钮颜色。
  

• 按钮图标：可选不同按钮图标。
  

• 图标位置：可选择左边或者右边。
  

• 是否禁用：选择禁用后按钮将无法点击。
  

  属性配置--扩展设置

• 按钮暂无扩展设置。

2. 样式配置
   样式配置-布局样式

• 宽度和高度：确定其在布局中的大小，可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据按钮内部文字的宽度和高宽确定按钮的大小。
  

• 定位方式：可选择相对定位和绝对定位，通过设定至顶部、左侧、右侧、底部的距离控制组件的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

  样式配置-文字样式

• 字体大小：可以设置按钮内的文字的字体大小。
  

• 字体颜色：可以调整按钮内的文字的字体颜色。
  

• 字体粗细：可以调整按钮内的文字的字体粗细。
  

• 字体样式：可以调整按钮内的文字的字体样式，用以选择不同的字体。
  

3. 事件编排

• 按钮可设置点击事件，通过设置点击事件动作实现按钮的交互.
  

文字

  文字是页面最基本组件之一，合理的文字设计可以让文字更加清晰易读，增强设计的视觉冲击力和吸引力，提升用户体验。

1. 属性配置
   属性配置-原生属性

• 组件别名：命名组件，便于页面管理。文字是页面最基本组件之一，合理的文字设计可以让文字更加清晰易读，增强设计的视觉冲击力和吸引力，提升用户体验。
  

• 文字内容：用以设置文字组件中的具体文字内容。
  

• 水平对齐和垂直对齐：可选居左、居中和居右，灵活调整文字内容在组件中的水平位置；可选顶部、居中和底部，灵活调整文字内容在组件中的垂直位置。。
  

• 首行缩进：可以调整文字内容的首行缩进距离，单位为px，直接输入数字即可。
  

• 文字间距：可以调整文字内容的间距，单位为px，直接输入数字即可。
  

  属性配置--扩展设置

• 文字暂无扩展设置。

2. 样式配置
   样式配置-布局样式

• 宽度和高度：确定文字组件的大小，可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据文字内容的高宽确定组件的大小。
  

• 水平溢出和垂直溢出：可以选择隐藏和滚动，当折叠面板中内容的尺寸超过折叠面板的尺寸时，选择隐藏只能展示折叠面板尺寸范围内的内容，选择滚动则可以通过滑动展示所有内容。
  

• 定位方式：可选择相对定位和绝对定位，通过设定至顶部、左侧、右侧、底部的距离控制其位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  >

  样式配置-背景样式

• 背景颜色：在颜色面板上点击、直接输入RGB值或十六进制值来选择颜色。
  

• 背景图片：点击上传标识从本地选择图片或输入图片地址作为组件的背景图片。
  

• 背景阴影：可选择基础投影和浅色投影。
  

• 显示边框：用于围绕组件的内容和内外边距创建一个可见的边界,标识出组件的范围。
  

  样式配置-文字样式

• 字体大小：可以设置组件内的文字的字体大小。
  

• 字体颜色：可以调整组件内的文字的字体颜色。
  

• 字体粗细：可以调整组件内的文字的字体粗细。
  

• 字体样式：可以调整组件内的文字的字体样式，用以选择不同的字体。
  

3. 事件编排

• 文字暂无交互编排。

提示弹窗

  提示弹窗是弹窗的一种，主要用法有：提示信息：当需要用户呈现重要的提示信息时，可以使用弹窗来确保用户看到这些信息；警告信息：当用户进行一些危险操作时，可以使用弹窗来警告用户，避免用户做出错误的决定；确认提示：当需要用户进行一些重要的操作，例如删除数据等等，可以使用弹窗来确认用户的意图，以避免误操作。

1. 属性配置
   属性配置-原生属性

• 组件别名：命名组件，便于页面管理。
  

• 组件尺寸：可选择组件的尺寸,包括超小尺寸、小型尺寸、中型尺寸、默认尺寸、较大尺寸、大型尺寸、超大尺寸。
  

• 弹窗标题：用以设置提示弹窗顶部的标题文字。
  

• 标题颜色：用以设置标题的字体大小，单位为px，直接输入数字即可。
  

• 弹窗类型：可选择信息、成功、警告和危险5种弹窗类型，当用户选择不同的弹窗类型时，弹窗中的图标就会发生改变。
  

• 提示文案：提示弹窗中的主要显示内容，确保用户能看到重要的信息。
  

• 文案颜色：用以调整提示文案的字体样式，文案颜色可以输入RGB值、十六进制值或者在颜色面板上点击来选择颜色。
  

• 顶部距离：可调整弹窗顶部与其他组件之间的距离，单位为vh，直接输入数字即可。
  

• 弹窗显隐：用以控制弹窗的显示或者隐藏，当选择弹窗隐藏后，该提示弹窗将不可见。
  

• 能否拖拽：对于弹窗中的两个按钮，用户可自定义地选择是否显示拖拽。
  

• 按钮显隐：对于弹窗中的两个按钮，用户可自定义地选择是否展示。
  

• 取消文案和确定文案：用以自定义两个按钮内的文案内容，让按钮内显示不同的文字。
  

• 取消类型和确定类型：用以选择弹窗内按钮的类型，可选默认按钮、主要按钮、成功按钮、警告按钮、危险按钮和信息按钮。
  

  属性配置-扩展设置

• 提示弹窗组件暂无扩展设置。

2. 样式配置

• 宽度和高度：调整宽高。
  

3. 事件编排

• 提示弹窗可设置点击事件，通过设置点击取消，确定事件动作实现提示弹窗的交互.
  

图片

  图片组件支持上传本地图片，调整图片填充方式。若需调整图片的布局方式，需要与容器配合使用。

1. 属性配置属性配置-原生属性

• 组件别名：命名组件，便于页面管理。
  

• 图片链接：用户能够上传本地图片，或者直接输入图片链接来为图片组件添加具体的图片，增加图片组件后，页面设计将更加生动美观。
  

• 填充方式：可以选择填充、适应、剪裁和保留原比例，可根据具体的需求选择填充方式。
  

• 可否预览：有可预览和不可预览两种选项，应该根据实际情况灵活选择具体的选项。
  

2. 样式配置
   样式配置-布局样式

• 宽度和高度：可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据具体图片的宽度和高宽确定图片组件的大小。
  

• 定位方式：图片组件的定位方式可选相对定位和绝对定位，当选择相对定位时，能够设置顶部、左侧、右侧、底部的距离。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

3. 事件编排

• 图片可设置点击事件，通过设置点击事件动作实现图片的交互.
  

描述列表

  描述列表用于展示一组相关的标签和内容。描述列表每一行都可以设置占据行数、标签宽度和内容宽度。常用于详情页面。

1. 属性配置
   属性配置-原生属性

• 组件别名：命名组件，便于页面管理。
  

• 标题名称：用于设置描述列表的具体标题名称。
  

• 组件尺寸：可以直接控制描述列表组件的尺寸而无需设置宽度和高度，在改变描述列表组件的尺寸时，描述列表内部的行列尺寸也会随之变化。
  

• 排列方向：通过此设置可以调整描述列表组件的排列方向，可以选择水平或者竖直的排列方向。
  

• 每行列数：默认提供的每行列数为3，即一列展示三个数据项，用户可根据实际情况选择不同的列数。
  

• 有无边框：可以控制描述列表组件是否存在边框，默认情况下为存在边框，用户也可以设置取消边框，这时页面设计将更加简洁。
  

• 标题字体：可以设置变体字体的大小，单位为px，直接输入数字即可调整字体大小，默认提供的标题字体大小为16px。
  

• 标题颜色：在颜色面板上点击、直接输入RGB值或十六进制值来选择颜色。
  

• 标签颜色：通过此设置可以自定义调整标签的颜色。
  

• 内容颜色：通过此设置可以自定义调整描述列表内的颜色。
  

  属性配置-扩展属性

• 描述列表数据设置：通过此设置可以调整描述列表展示的详细数据，其中包括字段名称、字段值、绑定属性、占据列数、标签宽度、值类型和值配置。
  

2. 样式配置
   
   样式配置-布局样式

• 宽度和高度：可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内容的宽度和高宽确定描述列表的大小。
  

• 水平溢出和垂直溢出：可以选择隐藏和滚动，当折叠面板中内容的尺寸超过折叠面板的尺寸时，选择隐藏只能展示折叠面板尺寸范围内的内容，选择滚动则可以通过滑动展示所有内容。
  

• 定位方式：描述列表的定位方式为相对定位，可以设置顶部、左侧、右侧和底部的距离来调整描述列表组件的定位。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。描述列表组件默认提供5个单位的内边距。
  

页头

  页头组件主要是按钮与文字的组合体，一般用于返回上级页面。

1. 属性配置
   属性配置-原生属性

• 组件别名：命名组件，便于页面管理。
  

• 组件尺寸：调整组件大小。
  

• 页头标题：用于设置页头组件标题的文字内容，默认提供的页头标题为“返回”，用户可根据实际情况修改页头标题内容。
  

• 页头内容：用于设置页头组件的文字内容，默认提供的页头内容为“详情”，用户可根据实际情况修改页头内容。
  

• 内容颜色：可以设置内容字体的颜色，通过手动拖动拾色器、输入rgba值或输入颜色的十六进制值的方式改变标题字体的颜色。
  

  属性配置-扩展属性

• 页头暂无交互编排。

2. 样式配置
   样式配置-布局样式

• 宽度：确定其在布局中的大小，可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据页头的宽度确定组件的大小。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。页头默认提供5个单位的左右内边距。
  

  样式配置-背景样式

• 背景颜色：在颜色面板上点击、直接输入RGB值或十六进制值来选择颜色。
  

• 背景图片：点击上传标识从本地选择图片或输入图片地址作为页头的背景图片。
  

• 背景阴影：可选择基础投影和浅色投影。
  

• 显示边框：用于围绕组件的内容和内外边距创建一个可见的边界。
  

3. 事件编排

• 页头可设置点击事件，通过设置点击事件动作实现页头的交互.
  

幻灯片

  幻灯片可以自动播放一组图片，主要应用于需要展示多张图片的页面，具有广告宣传、特别产品促销、精彩瞬间展示等功能。常用于企业主页、活动页、新闻咨询页等页面。

1. 属性配置
   属性配置-原生属性
   

• 组件别名：命名组件，便于页面管理。
  

• 排列方向：可以调整幻灯片组件的排列方向为水平或者竖直，当排列方向设置为水平时，幻灯片将会横向切换，当排列方向设置为竖直时，幻灯片将会纵向切换。
  

• 卡片类型：可以设置是否启用卡片类型的幻灯片组件，两种类型风格不同，可根据实际情况选择。
  

• 自动播放：有启用和禁用自动播放两种选择，当选择启用自动播放时，能够设置播放间隔，默认为3000毫秒。
  

• 播放间隔：当选择启用自动播放时，能够设置播放间隔，默认为3000毫秒。
  

• 箭头显示：可以改变幻灯片的箭头显示设置，有悬浮显示、一直显示和不显示三种选项，默认为悬浮显示。
  

• 箭头背景颜色：在颜色面板上点击、直接输入RGB值或十六进制值来选择颜色。
  

• 箭头悬浮背景：在颜色面板上点击、直接输入RGB值或十六进制值来选择颜色。
  

• 箭头图标颜色：在颜色面板上点击、直接输入RGB值或十六进制值来选择颜色。
  

• 指示器位置：可以选择内部、外部和不显示，当设置为内部或外部时，可以选择触发为悬浮还是点击，设置指示器背景颜色和选中颜色；当设置为不显示控件位置时，则控件触发、控件背景颜色和控件选中颜色无法调整。
  

• 指示器触发：选择悬浮或许点击。
  

• 指示器背景颜色：在颜色面板上点击、直接输入RGB值或十六进制值来选择颜色。
  

  属性配置-扩展属性

• 数据设置:可以为幻灯片添加数据或者删除数据，幻灯片的数据实际上就是图片，所以需要在添加数据的同时需要输入图片链接。
  

2. 样式配置
   

• 宽高：可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内容的宽度和高宽确定描述列表的大小。
  

• 水平溢出和垂直溢出：可以选择隐藏和滚动，当折叠面板中内容的尺寸超过折叠面板的尺寸时，选择隐藏只能展示折叠面板尺寸范围内的内容，选择滚动则可以通过滑动展示所有内容。
  

• 定位方式及定位位置：描述列表的定位方式为相对定位，可以设置顶部、左侧、右侧和底部的距离来调整描述列表组件的定位。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。描述列表组件默认提供5个单位的内边距。
  

树组件

  树组件是Web开发中常用的一种交互组件，它可以用于展示树状结构的数据，例如菜单、目录、文件等。

1. 属性配置
   属性配置-原生属性

• 组件别名：命名组件，便于页面管理。
  

• 是否可选：有是或否两种选择，当开启树组件可选时，树组件就会出现可选框。
  

• 组件尺寸
  

• 默认展开：可以选择是否默认展开，设置默认展开时，打开页面就会看到完全展开的树组件。
  

• 背景透明：树组件有自己的背景颜色，可以单独调节。当开启背景透明时，树组件就会沿用父容器的背景颜色。
  

• 懒加载：可选择是否。
  

  属性配置-扩展属性

• 树组件由不同的层级组成，利用树节点设置可以任意地调整树节点，无论是删除子集还是新增一级都十分方便。
  

2. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据树组件内容的高宽确定组件的大小。
  

• 定位方式：锁定为相对定位，通过设定至顶部、左侧、右侧、底部的距离控制其位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

  样式配置-文字样式

• 字体样式：字体样式可调整黑体、楷体和宋体三种字体。
  

• 字体颜色：字体颜色通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式来改变。
  

• 字体粗细：有常规加粗两种种选项，根据实际情况选择。
  

  样式配置-选中/悬浮样式

• 背景颜色和字体颜色：通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式来改变这三种颜色。
  

标签

  标签在浮木云中是一个没有实际功能的元素，一般用作分类和标记，作用让用户可以快速找到感兴趣的内容，并建立相关主题的联系。

1. 属性配置
   属性配置-原生属性
   

• 组件别名：命名组件，便于页面管理
  

• 标签名称：用于设置标签中显示的字体内容，默认提供为“标签”二字，用户可根据实际情况自行输入文字。
  

• 组件尺寸：可选择超大尺寸、大型尺寸、较大尺寸和默认尺寸，中型尺寸，小型尺寸，超小尺寸，默认选择为默认尺寸。
  

• 标签类型：根据标签的功能，可以选择不同的标签类型，提供默认、信息、成功、警告、错误共6种标签的类型选择。
  

• 标签主题：此设置只改变外观，提供默认、深色和朴素三种风格的标签主题。
  

• 标签颜色：标签同样提供自定义颜色，输入rgba值或直接输入十六进制值的方式来改变标签颜色。
  

2. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据标签内容的高宽确定组件的大小。
  

• 定位方式：锁定为相对定位，通过设定至顶部、左侧、右侧、底部的距离控制其位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

  样式配置-文字样式

• 字体大小：通过此设置可以调整标签中的字体大小，单位为px，直接在输入框输入数字即可调整字体大小。
  

• 字体颜色：字体颜色通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式来改变。
  

• 字体粗细：有常规、较粗和加粗三种选项，根据实际情况选择。
  

• 字体样式：字体样式可调整黑体、楷体和幼圆三种字体。
  

3. 事件编排

• 标签暂无交互编排

分割线

  分割线是一条可以调整长度和高度的线，可以分隔开两部分的内容，增强页面的可读性。

1. 属性配置
   属性配置-原生属性
   

• 组件别名：命名组件，便于页面管理。
  

• 组件尺寸：选择组件大小。
  

• 分割方向：可以选择水平或者竖直，以实现不同的分割效果，默认分割方向为水平。
  

• 线条颜色：通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式来改变分割线的颜色。
  

• 线条样式：可以选择实线，虚线和点线。
  

• 文案类型：可选择文案或者图标。
  

• 文案值：输入框输入文案值。
  

• 文案位置：可选择左边、中间和右边。
  

• 文案颜色：文案颜色通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式来改变分割线的颜色。
  

2. 样式配置
   
   样式配置-布局样式

• 宽度和高度：确定组件在布局中的大小。可选择px值、百分比和自适应。
  

• 定位方式和定位位置：锁定为相对定位，通过设定至顶部、左侧、右侧、底部的距离控制其位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

3. 事件编排

• 分割线暂无交互编排

超链接

  超链接是一种在用于在文本或图片中链接其他相关文档或资源的元素。在浮木云中一般用于页面跳转，并可选择内部与外部页面。

1. 属性配置
   属性配置-原生属性
   

• 组件别名：命名组件，便于页面管理。
  

• 组件尺寸：选择组件大小。
  

• 字体颜色：选择字体颜色。
  

• 链接文案：用于设置超链接组件中显示的具体文字。
  

• 图标名称：可以直接在输入框输入图标类名为组件赋予图标，需填写icon图标名。
  

• 下划线：可选择有或者无，超链接组件默认提供下划线。
  

• 是否禁用：当选择禁用时，超链接将不能点击。
  

2. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据组件内容的高宽确定组件的大小。
  

• 布局方式：可选内联布局和块级布局。选择内联布局会出现对齐方式，可选择顶部对齐，居中对齐或者底部对齐方式。
  

• 定位方式：可选相对定位或绝对定位。相对定位通过设定至顶部、左侧、右侧、底部的距离控制其位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

3. 事件编排

• 超链接暂无交互编排

面包屑

  面包屑是一种有用且常见的站点导航方式，常用于导航结构比较复杂的网站。

1. 属性配置
   属性配置-原生属性

• 组件别名：命名组件，便于页面管理。
  

• 组件尺寸：用于选择组件的组件尺寸。
  

• 分隔符号：提供多种选择，包括“&”、“+”、“-”、“_”、“$”、“#”、“@”、“!”、“>”、“<”多种符号。
  

• 分割图标：直接在输入框输入图标类名即可为组件赋予图标，需输入icon图标名。
  

• 字体颜色：点击选择颜色。
  

  属性配置-扩展设置

• 面包屑设置：可以通过此设置为面包屑提供具体的数据项，默认提供了“首页”、“活动管理”、“活动列表”、“活动详情”四项数据，用户需根据实际情况自行设置。
  

2. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据组件内容的高宽确定组件的大小。
  

• 水平溢出和垂直溢出：可以选择隐藏和滚动，当折叠面板中内容的尺寸超过折叠面板的尺寸时，选择隐藏只能展示折叠面板尺寸范围内的内容，选择滚动则可以通过滑动展示所有内容。
  

• 布局方式：可选块级布局和内联布局。
  

• 内联布局使组件与下一组件同行排列，且可以设置对齐方式，包括顶端对齐、居中对齐与底端对齐。
  

• 定位方式：可选相对定位或绝对定位。相对定位通过设定至顶部、左侧、右侧、底部的距离控制其位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

3. 交互编排
   

• 面包屑无交互编排。

空状态

  空状态是可以设置文案的图片，一般用作图片提示。

1. 属性配置
   属性配置-原生属性
   

• 组件别名：命名组件，便于页面管理
  

• 组件尺寸：改变组件组件尺寸。
  

• 占位图片：可以输入图片链接或者上传本地图片来为组件添加图片。
  

• 描述文案：可以通过输入文字的方式为组件添加文字形式的描述文案。
  

2. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据组件内容的高宽确定组件的大小。
  

• 定位方式：默认为相对定位，也可选绝对定位。相对定位通过设定至顶部、左侧、右侧、底部的距离控制其位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

标记

  标记组件由一个按钮和按钮右上方的数字标记组成。可以修改标记以及按钮的样式。常用于需要展示数字的场景。

1. 属性配置
   属性配置-原生属性
   

• 组件别名：命名组件，便于页面管理
  

• 标记尺寸：选择组件尺寸。
  

• 标记值：直接在相应输入框输入数字即可调整标记值。
  

• 最大值：直接在相应输入框输入数字即可调整最大值。
  

• 标记类型：用于调整组件的类型样式，可选主要类型、成功类型、警告类型、危险类型和信息类型。
  

• 标记样式：可在默认选项和圆点选项之间切换。
  

• 隐藏标记：开启标记隐藏后，该标记组件将不可见。
  

2. 样式配置
   样式配置-布局样式

• 定位方式：可选相对定位或绝对定位。相对定位通过设定至顶部、左侧、右侧、底部的距离控制其位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

头像

  头像组件没有实际的功能，若有浮木云无法实现的功能，则需要自定义组件，充当一个占位符。

1. 属性配置
   属性配置-原生属性
   

• 组件别名：命名组件，便于页面管理
  

• 头像类型：用于调整组件的风格，可选图片、图标和文字。
  

• 头像图标：可以直接在输入框输入图片类名来调整头像图标。
  

• 头像尺寸：可选择超小尺寸、小型尺寸、中型尺寸、默认标签、较大尺寸、大型尺寸和超大尺寸，默认选择为默认尺寸。
  

• 头像形状：可选圆形和方形，一般情况下头像为圆形。
  

  属性配置-扩展属性

• 头像暂无扩展属性

2. 样式配置
   样式配置-布局样式

• 布局方式：可选块级布局和内联布局。块级布局使组件占据容器的单独一行，内联布局使组件与下一组件同行排列，且可以进行伸缩和对齐调整。
  

• 内联布局指下一个组件与输入框并排排列，此时可选择对齐方式，使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。
  

• 定位方式：可选相对定位或绝对定位。通过设定至顶部、左侧、右侧、底部的距离控制其位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。头像组件默认不提供内外边距。
  

3. 交互编排

• 头像暂无交互编排

步骤条

  步骤条是用于指示用户当前进程并引导用户完成多个连续步骤的界面元素。

1. 属性配置
   属性配置-原生属性
   

• 组件别名：命名组件，便于页面管理。
  

• 组件尺寸：选择组件大小。
  

• 是否简约：用于调整组件的外观风格，可根据实际情况选择。
  

• 是否居中：居中后，组件的内容将居中呈现在所占据位置的中央。
  

属性配置-扩展属性

• 步骤条项设置：可以添加或者删除步骤，还可以为每项步骤添加图标。
  

2. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据组件内容的高宽确定组件的大小。
  

• 定位方式：可选相对定位，通过设定至顶部、左侧、右侧、底部的距离控制其位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。步骤条组件默认提供10个单位的左右内边距和5个单位的上下内边距。
  

3. 事件编排
   步骤条可以通过配置进行交互编排。
   

实时日期

  实时日期。

1. 属性配置
   属性配置-原生属性
   

• 组件别名：命名组件，便于页面管理
  

• 水平对齐与垂直对齐：各自可以选择居中，居左和居右。
  

• 首行缩进：选择缩进几个像素。
  

• 文字间距：选择文字相隔的间距。
  

• 显示星期：选择显示或者隐藏。
  

2. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据标签内容的高宽确定组件的大小。
  

• 水平溢出和垂直溢出：可以选择隐藏和滚动，当折叠面板中内容的尺寸超过折叠面板的尺寸时，选择隐藏只能展示折叠面板尺寸范围内的内容，选择滚动则可以通过滑动展示所有内容。
  

• 定位方式：锁定为相对定位，通过设定至顶部、左侧、右侧、底部的距离控制其位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。步骤条组件默认提供10个单位的左右内边距和5个单位的上下内边距。
  

3. 交互编排

• 实时日期暂无交互编排

iframe

  iframe。

1. 属性配置
   属性配置-原生属性
   

• 组件别名：命名组件，便于页面管理
  

• iframe地址：输入地址。
  

2. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据标签内容的高宽确定组件的大小。
  

• 水平溢出和垂直溢出：可以选择隐藏和滚动，当折叠面板中内容的尺寸超过折叠面板的尺寸时，选择隐藏只能展示折叠面板尺寸范围内的内容，选择滚动则可以通过滑动展示所有内容。
  

• 定位方式：锁定为相对定位，通过设定至顶部、左侧、右侧、底部的距离控制其位置。
  

• 定位位置：锁定为相对定位，通过设定至顶部、左侧、右侧、底部的距离控制其位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

3. 交互编排

• iframe暂无交互编排

输入组件

  输入组件是开发中常用的用户交互组件之一，用于收集用户的输入数据。

输入框

  输入框中可以输入信息展示或作为代输入信息的载体。

1. 属性配置
   属性配置-原生属性

• 组件别名：为组件命名，方便页面管理。
  

• 组件尺寸：确定输入框的组件尺寸。
  

• 提示文字：是输入框未输入文字时展示的信息，在输入内容后会消失。
  

• 最大输入：决定最大输入字数。
  

• 输入提示：在输入框末尾给出输入字数/最大输入字数的提示。
  

• 清空按钮：在输入末端加入清空按钮，可一键清空所有输入内容。
  

• 是否禁用：禁用后该输入框不能再输入内容。
  

• 是否只读：开启后输入框内容不允许修改。
  

• 密码启用：启用后输入框变为密码输入框，输入时会隐藏密码，可开启可见。
  

• 前置图标：在输入框前添加图标，需输入icon图标码。
  

• 后置图标：在输入框后添加图标，需输入icon图标码。
  

• 前置内容：在输入框上方添加前置内容。
  

• 后置内容：在输入框下方添加后置内容。
  

  属性配置-扩展设置

• 输入框暂无扩展设置

2. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，高度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整输入框的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

3. 事件编排

• 输入框可设置数据改变事件，通过设置数据改变事件动作实现输入框的交互.
  

文本域

  文本域中可以输入较长信息展示或作为代输入信息的载体。

1. 属性配置
   属性配置-原生属性

• 组件别名：为组件命名，方便页面管理。
  

• 组件尺寸：确定文本域的组件尺寸。
  

• 提示文字：文本域未输入文字时展示的信息，在输入内容后会消失。
  

• 可见行高：是文本域在布局时最高可见行高。
  

• 最大输入：决定最大输入字数。
  

• 输入提示：在文本域末尾给出输入字数/最大输入字数的提示。
  

• 是否禁用：禁用后该文本域不能再输入内容。
  

• 是否只读：开启后文本域内容不允许修改。
  

  属性配置-扩展设置

• 文本域暂无扩展设置

2. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，高度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位。
  

• 定位位置：通过设置距顶部、左侧、右侧、底部的距离调整文本域的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

3. 事件编排

• 文本域可设置数据改变事件，通过设置数据改变事件动作实现文本域的交互.
  

计数器

  计数器可以用来统计数量。

1. 属性配置
   属性配置-原生属性
   

• 组件别名：命名组件，便于页面管理
  

• 组件尺寸：确定计数器的组件尺寸。
  

• 步长：确定计数器每次增加或减少的间隔。
  

• 最小数字：计数器的最小最大数字。
  

• 严格递增：开启计数器内的数字只能为整数，无法被修改为小数。
  

• 控制按钮：控制按钮是否显示。
  

• 按钮位置：控制按钮的位置，可选默认或右边。
  

• 是否禁用：禁用后该计数器不能使用。
  

• 是否只读：开启后计数器内容不允许修改。
  

  属性配置-扩展属性 暂无扩展设置

2. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，高度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：默认为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整计数器的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

3. 事件编排

• 计数器可设置数据改变事件，通过设置数据改变事件动作实现计数器的交互.
  

单选框

  单选框用于在多个互斥选项中，选出唯一项。

1. 属性配置
   属性配置-原生属性
   

• 组件别名：为组件命名，方便页面管理。
  

• 组件尺寸：确定单选框的组件尺寸。
  

• 按钮模式：开启后单选框将变为两个按钮的模式，此时可设置文字颜色与填充颜色。
  

• 有无边框：开启后每个选项都会有一个边框。
  

• 是否禁用：禁用后该单选框不能再使用。
  

• 是否只读：开启后单选框选项不允许修改。
  

  属性配置-扩展设置

• 单选框选项设置，点击后将打开单选框设置弹窗，可以在此修改单选框选项、为该单选框绑定数据字典或数据模型。修改选项时可以按需求添加或删除标签字段，绑定数据字典或数据模型时需在已有的模型中选择合适的字典或模型。
  

2. 样式配置
   样式配置-布局样式
   

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整单选框的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

3. 事件编排

• 单选框可设置点击事件，通过设置数据改变事件动作实现单选框的交互.
  

多选框

  多选框用于在多个选项中，选出多项。

1. 属性配置
   属性配置-原生属性

• 组件别名：为组件命名，方便页面管理。
  

• 组件尺寸：确定多选框的组件尺寸。
  

• 按钮模式：开启后多选框将变为多个按钮的模式，此时可设置文字颜色与填充颜色。
  

• 有无边框：开启后每个选项都会有一个边框。
  

• 是否禁用：禁用后该多选框不能再使用。
  

• 是否只读：开启后多选框选项不允许修改。
  

属性配置-扩展设置

• 多选框选项设置，点击后将打开多选框设置弹窗，可以在此修改多选框选项、为该多选框绑定数据字典或数据模型。修改选项时可以按需求添加或删除标签字段，绑定数据字典或数据模型时需在已有的模型中选择合适的字典或模型。
  

2. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整多选框的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

3. 事件编排

• 多选框可设置数据改变事件，通过设置数据改变事件动作实现多选框的交互.
  

下拉框

  下拉框用于在多个选项中，选出单个选项。

1. 属性配置
   属性配置-原生属性
   

• 组件别名：为组件命名，方便页面管理。
  

• 组件尺寸：确定下拉框的组件尺寸。
  

• 提示文字：未选择时下拉框显示的文字。
  

• 清空按钮：开启后可以一键删除下拉框内选择的内容。
  

• 可否搜索：可否通过搜索查询下拉框内的选项，开启后将出现可否创建按钮，如选择是，可将输入的内容添加到下拉框的搜索选项中作为临时搜索用，但无法将其加入数据库中。
  

• 是否禁用：禁用后该下拉框不能再使用。
  

• 是否只读：开启后下拉框选项不允许修改。
  

  属性配置-扩展设置

• 下拉框选项设置：点击后将打开下拉框设置弹窗，可以在此修改下拉框选项、为该下拉框绑定数据字典或数据模型。修改选项时可以按需求添加或删除标签字段，绑定数据字典或数据模型时需在已有的模型中选择合适的字典或模型。
  

2. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，高度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整下拉框的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

3. 事件编排

• 下拉框可设置数据改变事件，通过设置数据改变事件动作实现下拉框的交互.
  

多选下拉

  多选下拉框用于在多个选项中，选出多个选项。
2. 属性配置
属性配置-原生属性

• 组件别名：命名组件，便于页面管理
  

• 组件尺寸：确定多选下拉框的组件尺寸。
  

• 提示文字：未选择时多选下拉框显示的文字。
  

• 清空按钮：开启后可以一键删除多选下拉框内选择的内容和是否可以搜索。
  

• 可否搜索：可否通过搜索查询下拉框内的选项，开启后将出现可否创建按钮，如选择是，可将输入的内容添加到多选下拉框的搜索选项中作为临时搜索用，但无法将其加入数据库中。
  

• 合并选项：开启后在多选框内不显示具体选项，只显示选中了几个。
  

• 最大可选：确定最多可选中几个选项。
  

• 是否禁用：禁用后该多选下拉框不能再使用。
  

• 是否只读：开启后多选下拉框选项不允许修改。
  

属性配置-扩展属性

• 下拉框选项设置，点击后将打开多选下拉框设置弹窗，可以在此修改多选下拉框选项、为该多选下拉框绑定数据。
  

2. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，高度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整多选下拉框的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

3. 事件编排

• 多选下拉框可设置数据改变事件，通过设置数据改变事件动作实现多选下拉框的交互.
  

级联选择

  级联选择是一种交互方式，通过用户对一个选项的选择会影响到后续选项的范围和内容，通常用于需要从复杂选项中快速筛选出目标选项的场景，如行政区划。
2. 属性配置
属性配置-原生属性

• 组件别名：命名组件，便于页面管理
  

• 组件尺寸：确定级联选择的组件尺寸。
  

• 提示文字：级联选择未选择时展示的信息。
  

• 分隔符：选中展示为完整路径时，每级之间的分隔字符。
  

• 选择展示：决定级联选择框内展示的选项，可选完整路径或最后一级。
  

• 父子关联：开启后可以只选择父选项。
  

• 清空按钮：开启后出现可以一键清空级联选择框中所有内容的按钮。
  

• 可否搜索：可否通过搜索查询级联选择内的选项，开启后将出现可否创建按钮，如选择是，可将输入的内容添加到级联选择的搜索选项中作为临时搜索用，但无法将其加入数据库中。
  

• 是否禁用：禁用后该级联选择不能再使用。
  

• 是否只读：开启后级联选择内容不允许修改。
  

属性配置-扩展属性

• 级联选择选项设置，点击后可打开弹窗，可以修改级联选择的选项或为级联选项绑定数据模型。在设置级联选择选项时，可以按照需求新增一级数据，或为一个选项新增子集，或删除多余的选项。绑定数据模型时需选择对应的数据模型与字段。
  

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，高度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整级联选择的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

3. 事件编排

• 级联选择可设置数据改变事件，通过设置数据改变事件动作实现级联选择的交互.
  

日期选择

  日期时间由两个选择框组成，支持选择具体的日期与时间，即年、月、日。

1. 属性配置
   属性配置-原生属性
   

• 组件别名：为组件命名，方便页面管理。
  

• 组件尺寸：确定日期时间的组件尺寸。
  

• 选择类型：可以选择该选择框的选择类型，包括年、月、日期。
  

• 提示文字：日期时间未选择时展示的信息。
  

• 可否编辑：开启后可以只手动输入日期时间。
  

• 清空按钮：开启后出现可以一键清空日期时间框中所有内容的按钮。
  

• 是否禁用：禁用后该日期时间不能再使用。
  

• 是否只读：开启后日期时间内容不允许修改。
  

属性配置-扩展设置

• 日期选择暂无扩展设置。

1. 样式配置
   样式配置-布局样式

• 高度和宽度：确定组件的大小，可选择px值、百分比和自适应，高度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整日期选择的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

3. 事件编排

• 日期选择可设置数据改变事件，通过设置数据改变事件动作实现日期选择的交互.
  

时间选择

  时间选择支持选择具体的时间，即时、分、秒。

1. 属性配置
   属性配置-原生属性

• 组件别名：为组件命名，方便页面管理。
  

• 组件尺寸：确定时间选择的组件尺寸。
  

• 提示文字：时间选择未选择时展示的信息。
  

• 可否编辑：开启后可以只手动输入时间。
  

• 清空按钮：开启后出现可以一键清空时间选择框中所有内容的按钮。
  

• 是否禁用：禁用后该时间选择不能再使用。
  

• 是否只读：开启后时间选择内容不允许修改。
  

属性配置-扩展设置 时间选择暂无扩展设置。

2. 样式配置
   样式配置-布局样式

• 高度和宽度：确定组件的大小，可选择px值、百分比和自适应，高度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整时间选择的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

3. 事件编排

• 时间选择可设置数据改变事件，通过设置数据改变事件动作实现时间选择的交互.
  

日期时间

  日期时间由两个选择框组成，支持选择具体的日期与时间，即年、月、日，时、分、秒。
2. 属性配置
属性配置-原生属性

• 组件别名：为组件命名，方便页面管理。
  

• 组件尺寸：确定日期时间的组件尺寸。
  

• 提示文字：日期时间未选择时展示的信息。
  

• 可否编辑：开启后可以只手动输入日期时间。
  

• 清空按钮：开启后出现可以一键清空日期时间框中所有内容的按钮。
  

• 是否禁用：禁用后该日期时间不能再使用。
  

• 是否只读：开启后日期时间内容不允许修改。
  

属性配置-扩展设置

• 日期选择暂无扩展设置。

1. 样式配置
   样式配置-布局样式

• 高度和宽度：确定组件的大小，可选择px值、百分比和自适应，高度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整日期时间的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

3. 事件编排

• 日期时间可设置数据改变事件，通过设置数据改变事件动作实现日期时间的交互.
  

日期范围

  与时间范围相同，日期范围是指在日期选择中，用户可以指定一个起始日期和一个终止日期。

1. 属性配置
   属性配置-原生属性
   

• 组件别名：为组件命名，方便页面管理。
  

• 组件尺寸：下拉框选择日期范围的组件尺寸。
  

• 选择类型：下拉框选择月或日期。
  

• 开始提示和结束提示：日期范围未选择时，起始日期处和结束日期处所展示的信息。
  

• 间隔文字：起始日期和结束日期之间的文字。
  

• 可否编辑：开启后可以手动输入日期范围。
  

• 清空按钮：开启后出现可以一键清空日期范围框中所有内容的按钮。
  

• 是否禁用：禁用后该组件不能再使用。
  

• 是否只读：开启后该组件内容不允许修改。
  

  属性配置-扩展设置

• 日期范围暂无扩展设置。

1. 样式配置
   样式配置-布局样式

• 高度和宽度：确定组件的大小，可选择px值、百分比和自适应，高度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整组件的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

3. 事件编排

• 日期范围可设置数据改变事件，通过设置数据改变事件动作实现日期范围的交互.
  

时间范围

  时间范围是指在时间选择中，可以指定一个起始时间和一个终止时间，通常用于需要设定一段时间范围的操作场景，如查询某个时间段内的数据。

1. 属性配置
   属性配置-原生属性
   

• 组件别名：为组件命名，方便页面管理。
  

• 组件尺寸：下拉框选择时间范围的组件尺寸。
  

• 开始提示及结束提示：时间范围未选择时，起始时间和结束时间所展示的信息。
  

• 间隔文字：起始时间和结束时间之间的文字。
  

• 可否编辑：开启后可以手动输入时间范围。
  

• 清空按钮：开启后出现可以一键清空时间范围框中所有内容的按钮。
  

• 是否禁用：禁用后该时间范围不能再使用。
  

• 是否只读：开启后时间范围内容不允许修改。
  

  属性配置-扩展设置

• 时间范围暂无扩展设置。

2. 样式配置
   

样式配置-布局样式

• 高度和宽度：确定组件的大小，可选择px值、百分比和自适应，高度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整组件的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

3. 事件编排
   

• 时间范围可设置数据改变事件，通过设置数据改变事件动作实现时间范围的交互.
  

日时范围

  日时范围是指在日期选择中，用户可以指定一个起始日期和一个终止日期，并在每个日期中选择具体的小时数，通常用于需要指定一段时间内每天的具体小时范围的操作，如指定每天的工作时间段。
2. 属性配置
属性配置-原生属性

• 组件别名：为组件命名，方便页面管理。
  

• 组件尺寸：下拉框选择日时范围的组件尺寸。
  

• 开始提示和结束提示：日时范围未选择时，起始日时处和结束日时处所展示的信息。
  

• 间隔文字：起始日时和结束日时之间的文字。
  

• 可否编辑：开启后可以手动输入日时时范围。
  

• 清空按钮：开启后出现可以一键清空日时范围框中所有内容的按钮。
  

• 是否禁用：禁用后该组件不能再使用。
  

• 是否只读：开启后该组件内容不允许修改。
  

  属性配置-扩展设置

• 暂无扩展设置。

1. 样式配置
   样式配置-布局样式

• 高度和宽度：确定组件的大小，可选择px值、百分比和自适应，高度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整组件的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

3. 交互编排
   

• 日时范围可设置数据改变事件，通过设置数据改变事件动作实现日时范围的交互.
  

文件上传

  文件上传是指将本地计算机上的文件传输到远程服务器上，并储存在其中。

1. 属性配置
   属性配置-原生属性
   

• 组件别名：为组件命名，方便页面管理。
  

• 组件尺寸：下拉框选择文件上传的组件尺寸。
  

• 上传类型：选择列表或按钮。
  

• 按钮名称：输入按钮名称。
  

• 按钮类型：选择不同类型按钮，可修改按钮的颜色样式。
  

• 按钮模式：可选择朴素或者默认，修改按钮的颜色深度。
  

• 上传数量：上传文件个数的上限。
  

• 文件类型：允许用户上传的文件类型。
  

• 文件大小：允许每一个文件上传的最大大小。
  

• 上传提示：显示在上传文件按钮下方的一段文字，开启后可手动输入提示文案。
  

• 是否禁用：禁用后该组件不能再使用。
  

• 是否只读：开启后该组件内容不允许修改。
  

  属性配置-扩展设置

• 暂无扩展设置。

2. 样式配置
   样式配置-布局样式

• 高度和宽度：确定组件的大小，可选择px值、百分比和自适应，高度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整组件的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

3. 交互编排
   

• 暂无交互编排。

图片上传

  图片上传是指将本地计算机上的图片传输到远程服务器上，并储存在其中。

1. 属性配置
   属性配置-原生属性

• 组件别名：为组件命名，方便页面管理。
  

• 组件尺寸：下拉框选择文件上传的组件尺寸。
  

• 上传数量：上传图片个数的上限。
  

• 文件类型：允许用户上传图片的类型。
  

• 文件大小：允许每一个图片上传的最大大小。
  

• 上传提示：显示在上传图片方框下方的一段文字，开启后可手动输入提示文案。
  

• 是否禁用：禁用后该组件不能再使用。
  

• 是否只读：开启后该组件内容不允许修改。
  

  属性配置-扩展设置

• 暂无扩展设置。

2. 样式配置
   样式配置-布局样式

• 高度和宽度：确定组件的大小，可选择px值、百分比和自适应，高度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整组件的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

3. 交互编排
   

• 暂无交互编排。

开关

开关是一种界面控件，通常表示一个二选一的状态，用户通过开关切换状态，常用于开启或关闭一个功能或选项。

1. 属性配置
   属性配置-原生属性
   

• 组件别名：命名组件，便于页面管理。
  

• 组件尺寸：下拉框选择文件上传的组件尺寸。
  

• 打开文案和关闭文案：打开文案显示在开关右侧，关闭文案显示在开关左侧，可手动输入文案内容。
  

• 文案位置：选择内部还是外部。
  

• 是否禁用：禁用后该组件不能再使用。
  

• 是否只读：禁用后该组件不能再使用,开启只读后该组件内容不允许修改。
  

属性配置-扩展属性 开关暂无扩展属性。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，开关的宽度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整组件的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

3. 事件编排

• 开关可设置点击事件，通过设置点击事件动作实现开关的交互.
  

颜色选择

  颜色选择是一种界面控件，通过用户选择一种颜色，从而设定该颜色的属性值，通常用于美术设计、网站建设等需要指定颜色属性的场景。

1. 属性配置
   属性配置-原生属性
   

• 组件别名：命名组件，便于页面管理。
  

• 组件尺寸：下拉框选择颜色选择按钮的组件尺寸。
  

• 支撑透明：使用该组件选择颜色时，是否支持颜色具有透明度。
  

• 快捷颜色：可选择是否开启快捷颜色。
  

• 是否禁用：禁用后该组件不能再使用。
  

• 是否只读：开启后该组件内容不允许修改。
  

  属性配置-扩展属性

• 颜色选择暂无扩展属性。

2. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，高度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整组件的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

3. 交互编排

• 颜色选择暂无交互编排。

评分

  评分是一种界面控件，通常用于用户对一个产品、服务、文章等进行打分或评价，以进行量化的评估和统计。

1. 属性配置
   属性配置-原生属性
   

• 组件别名：命名组件，便于页面管理。
  

• 组件尺寸：默认为默认尺寸，可选超小尺寸、小型尺寸、中型尺寸、较大尺寸、大型尺寸和超大尺寸。
  

• 最大分值：评分满分的分数值。
  

• 低分限值：确定低分限值。
  

• 高分限值：确定高分限值。
  

• 显示评分：在五角星后面显示数值分数。
  

• 允许半选：指评分时是否允许打半星。
  

• 是否禁用：禁用后该组件不能再使用。
  

• 是否只读：开启后该组件内容不允许修改。
  

  属性配置-扩展属性 评分暂无扩展属性。 2. 样式配置
样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，高度和宽度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 水平溢出和垂直溢出：可以选择隐藏和滚动，当折叠面板中内容的尺寸超过折叠面板的尺寸时，选择隐藏只能展示折叠面板尺寸范围内的内容，选择滚动则可以通过滑动展示所有内容。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整组件的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

3. 交互编排 评分暂无交互编排。

滑块

  滑块是一种界面控件，通过拖动滑块可以实现对数值的快速调整，通常用于对数值大小的设定，如音量大小等。
2. 属性配置
属性配置-原生属性

• 组件别名：命名组件，便于页面管理。
  

• 控件：滑块右侧显示当前数值大小的数字框。可以在数字框中手动输入大小控制滑块位置，也可以开启控件按钮调整滑块位置。
  

• 最小值：指滑块左端的初始值。
  

• 最大值：指滑块右端的结束值。
  

• 步长：指滑块每滑动一步的数值大小。
  

• 间断点：若开启显示，滑条上则会显示滑块可以停留的所有点。
  

• 数值显示：鼠标悬浮在滑块上时，会显示此处值的大小。
  

• 是否禁用：禁用后该组件不能再使用。
  

• 是否只读：开启后该组件内容不允许修改。
  

属性配置-扩展属性

• 滑块暂无扩展属性

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，高度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 水平溢出和垂直溢出：可以选择隐藏和滚动，当折叠面板中内容的尺寸超过折叠面板的尺寸时，选择隐藏只能展示折叠面板尺寸范围内的内容，选择滚动则可以通过滑动展示所有内容。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整组件的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。步骤条组件默认提供10个单位的左右内边距和5个单位的上下内边距。
  

3. 交互编排 滑块暂无交互编排

二维码

  二维码在浮木云中本质是图片。

1. 属性配置
   属性配置-原生属性
   

• 组件别名：命名组件，便于页面管理。
  

• 组件尺寸：下拉框选择文件上传的组件尺寸。
  

• 静态地址：二维码图片的来源地址，可手动输入，或点击上传按钮在本地上传。
  

• 可否预览：若开启，则在点击二维码时会出现预览界面。
  

  属性配置-扩展属性 二维码暂无扩展属性。 2. 样式配置
样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，高度和宽度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 水平溢出和垂直溢出：可以选择隐藏和滚动，当折叠面板中内容的尺寸超过折叠面板的尺寸时，选择隐藏只能展示折叠面板尺寸范围内的内容，选择滚动则可以通过滑动展示所有内容。
  

• 定位方式：可选择相对定位或绝对定位，通过设置距顶部、左侧、右侧、底部的距离调整组件的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

3. 交互编排

• 二维码暂无交互编。

行政区选择

1. 属性配置
   属性配置-原生属性
   

• 组件别名：命名组件，便于页面管理。
  

• 组件尺寸：下拉框选择行政区划的大小。
  

• 提示文字：设置没有选择时的提示文字,选择区域后文字消失。
  

• 分隔符：设置分隔符。
  

• 选择类型：选择行政区划类型为区或市等。
  

• 选中展示：选择展示完整路径或者最后一级。
  

• 清空按钮：选择是否开启清空按钮。
  

• 可否搜索：选择是否可以搜索。
  

• 是否禁用：禁用后该组件不能再使用。
  

• 是否只读：开启只读后该组件内容不允许修改。
  

  属性配置-扩展属性
  行政区划选择暂无扩展属性。

2. 样式配置
   样式配置-布局样式
   

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，高度和宽度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位。
  

• 定位位置：通过设置距顶部、左侧、右侧、底部的距离调整组件的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

3. 事件编排

• 行政区选择可设置数据改变事件，通过设置数据改变事件动作实现行政区选择的交互.
  

地图组件

二维地图

1. 样式配置
   

样式配置-布局样式

• 高度和宽度：确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的高宽确定容器的大小。
  

• 定位方式：锁定为相对定位。
  

• 定位位置：通过设置距顶部、左侧、右侧、底部的距离调整组件的位置。
  

• 展示层级： 当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

• 自定义样式： 自定义样式是一种界面设计技巧，通过编写自定义的CSS代码，可以实现修改浮木云组件中没有提供的属性，如列表、查询容器背景颜色等，能够让界面更符合需求。使用方法如下：

• 在画布或页面结构树种点击一个组件，进入“样式配置”，向下滑动找到“自定义样式”即可进行自定义，如修改背景颜色为黑色，只需在".self{}"中输入"background:black;"
  

2. 属性配置
   属性配置-原生属性
   

• 组件别名：命名组件，便于页面管理。
  

• 底图显隐：选择该组件的底图在地图上显示或隐藏。
  

• 底图来源：选择该组件的底图来源，默认选择为天地图。
  

• 底图密钥：选择该组件的底图密钥
  

• 中心位置：二维地图中心的经纬度坐标。
  

• 默认缩放、最小缩放和最大缩放：默认缩放指打开页面时地图默认显示的缩放等级，最小缩放和最大缩放规定了地图在放大缩小时允许的缩放程度。
  

• 坐标系：下拉框选择地图坐标系，可选择WGS84和CGCS2000坐标系。
  

• 比例尺：可选择该组件在地图上显示或隐藏，也可修改组件到地图左上角的距离百分比。
  

• 缩放工具：用于缩放地图。可选择该组件在地图上显示或隐藏，也可修改缩放工具到地图左上角的距离百分比。加号表示放大地图，减号表示缩小地图，每次缩放都以一个等级为单位。
  

• 底图切换：选择组件的底图为矢量地图、地形图或影像。可选择该组件在地图上显示或隐藏，也可修改其到地图左上角的距离百分比。
  

• 操作按钮：具有定位、漫游、全屏、长度测量、面积测量、标绘、要素查询、地图点击八个操作功能。点击文字后的方框可选择该组件在地图上显示或隐藏，也可修改其到地图左上角的距离百分比。
  

  属性配置-扩展设置:二维地图暂无扩展设置。

3. 数据绑定：二维地图暂无数据绑定。
   

4. 交互编排
   

• 二维地图可设置要素点击、地图点击、绘制结束事件，通过设置要素点击、地图点击、绘制结束事件动作实现二维地图的交互.
  

三维地图

1. 样式配置
   

• 高度和宽度：确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的高宽确定容器的大小。
  

• 定位方式：锁定为相对定位。
  

• 定位位置：通过设置距顶部、左侧、右侧、底部的距离调整组件的位置。
  

• 展示层级： 当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

• 自定义样式： 自定义样式是一种界面设计技巧，通过编写自定义的CSS代码，可以实现修改浮木云组件中没有提供的属性，如列表、查询容器背景颜色等，能够让界面更符合需求。使用方法如下：

• 在画布或页面结构树种点击一个组件，进入“样式配置”，向下滑动找到“自定义样式”即可进行自定义，如修改背景颜色为黑色，只需在".self{}"中输入"background:black;"
  

2. 属性配置
   属性配置-原生属性
   

• 组件别名：命名组件，便于页面管理。
  

• 底图来源：选择该组件的底图来源，默认选择为天地图。
  

• 底图密钥：选择该组件的底图密钥
  

• 地形显隐：选择该组件是否有地形起伏。
  

• 地形夸张：调节地形的夸张程度。
  

• 初始模型：选择该底图的初始模型，包括建筑群，学校和人工建模。
  

• 初始经度、初始纬度和初始高度：是三维地图中心位置的坐标，可手动修改。
  

• X轴视角、Y轴视角和Z轴视角：是三维地图中心位置的坐标，可手动修改。
  

• 最近视高、最远视高：通过输入具体数字可以调整最近视高和最远视高
  

• 坐标栏：是三维地图中心位置的坐标，可手动修改。
  

• 底图切换：选择组件的底图为天地图影像、ArcGIS影像或天地图注记。可选择该组件在三维图上显示或隐藏，也可修改其到三维图左上角的距离百分比。
  

• 操作按钮：具有距离量算、面积量算、高度量算、标绘、剖面分析、限高分析、淹没分析、通视分析八个操作功能。点击文字后的方框可选择该组件在三维地图上显示或隐藏，也可修改其到地图左上角的距离百分比。
  

  属性配置-扩展设置:三维地图暂无扩展设置。

3. 数据绑定：三维地图暂无数据绑定。
   

4. 交互编排
   

• 三维地图可设置底图加载，标注点击，单体化点击。三个事件动作实现三维地图的交互.
  

图表组件

基础柱状

  基础柱状图是一种图表组件，通过竖直或水平方向上的矩形条表示不同类别的数值，可清晰展示数据之间的相对大小，适用于数据展示和对比等分析场景。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，高度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 布局方式：分为内联布局与块级布局，与对齐方式复合使用。联布局指下一个组件与输入框并排排列，此时可选择对齐方式，使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。块级布局指输入框单独占据一行。
  

• 定位方式：可选择相对定位或绝对定位，通过设置距顶部、左侧、右侧、底部的距离调整输入框的位置。
  

• 展示层级： 当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

• 内外边距： 内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

• 自定义样式： 自定义样式是一种界面设计技巧，通过编写自定义的CSS代码，可以实现修改浮木云组件中没有提供的属性，如列表、查询容器背景颜色等，能够让界面更符合需求。使用方法如下：

• 在画布或页面结构树种点击一个组件，进入“样式配置”，向下滑动找到“自定义样式”即可进行自定义，如修改背景颜色为黑色，只需在".self{}"中输入"background:black;"
  

2. 属性配置
   属性配置-原生属性
   

• 组件别名：为组件命名，方便页面管理。
  

• 柱状背景：显示柱状条背景样式，开启后可通过下方背景颜色功能来修改具体颜色。
  

• 横轴单位和纵轴单位：在输入框中填写单位，柱状图的横轴和纵轴末端则会显示所填单位名称。
  

• 单位字号和字体颜色：用于修改单位的字体大小以及单位字体颜色，字体颜色可通过点击调色板或手动输入颜色数值的方式修改。
  

• 图边距：可调整柱状图距离该组件上下左右边缘的百分比距离。
  

  属性配置-图表属性

• 深色模式：可修改整个组件的背景样式。
  

• 图例控件：启用和禁用可调整图例是否可见。启用图例后可调整图例方向、图例上距、图例左距、图例字体大小和图例字体颜色。
  

• 标题控件：显示和隐藏可调整标题是否可见。显示标题后可调整标题文字、大小、颜色、标题上距和标题左距。
  

• 提示控件：启用后，当鼠标悬浮在柱状条上时，会有小文本框显示该柱状条信息。
  

• 工具控件：启用后，图表上会显示数据视图、刷新和保存为图三个工具，可调整工具方向、工具上距和工具右距。
  

  属性配置-扩展设置

• 横轴数据设置，点击后弹出弹窗，可修改横轴数据个数、排列方式以及横轴数据名称。
  

• 模拟数据设置: 点击后弹出对话框，可添加、导入、导出和删除数据，还能够修改基础柱状图的数值和颜色。
  
  

1. 交互编排：基础柱状暂无交互编排。
   

基础条状

  与基础柱状相同，只是图表是横向的。

1. 样式配置
   样式配置-布局样式

• 高度和宽度：确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的高宽确定容器的大小。
  

• 布局方式：分为内联布局与块级布局，与对齐方式复合使用。
  

• 内联布局指下一个组件与本组件并排排列，此时可选择对齐方式，使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。
  

• 定位方式：可选择相对定位与决定定位，两者都可以根据填入的位边距信息来调整该组件定位
  

• 展示层级： 当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

• 内外边距： 内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

• 自定义样式： 自定义样式是一种界面设计技巧，通过编写自定义的CSS代码，可以实现修改浮木云组件中没有提供的属性，如列表、查询容器背景颜色等，能够让界面更符合需求。使用方法如下：

• 在画布或页面结构树种点击一个组件，进入“样式配置”，向下滑动找到“自定义样式”即可进行自定义，如修改背景颜色为黑色，只需在".self{}"中输入"background:black;"
  

2. 属性配置
   属性配置-原生属性
   

• 组件别名：为组件命名，方便页面管理。
  

• 条状背景：显示条状条背景样式，开启后可通过下方背景颜色功能来修改具体颜色。
  

• 横轴单位和纵轴单位：在输入框中填写单位，条状图的横轴和纵轴末端则会显示所填单位名称。
  

• 单位字号和字体颜色：用于修改单位的字体大小以及单位字体颜色，字体颜色可通过点击调色板或手动输入颜色数值的方式修改。
  

• 图边距：可调整条状图距离该组件上下左右边缘的百分比距离。
  

  属性配置-图表属性

• 深色模式：可修改整个组件的背景样式。
  

• 图例控件：启用和禁用可调整图例是否可见。启用图例后可调整图例方向、图例上距、图例左距、图例字体大小和图例字体颜色。
  

• 标题控件：显示和隐藏可调整标题是否可见。显示标题后可调整标题文字、大小、颜色、标题上距和标题左距。
  

• 提示控件：启用后，当鼠标悬浮在柱状条上时，会有小文本框显示该柱状条信息。
  

• 工具控件：启用后，图表上会显示数据视图、刷新和保存为图三个工具，可调整工具方向、工具上距和工具右距。
  

属性配置-扩展设置

• 横轴数据设置：点击后弹出弹窗，可修改横轴数据个数、排列方式以及横轴数据名称。
  

• 模拟数据设置: 点击后弹出对话框，可添加、导入、导出和删除数据，还能够修改基础条状图的数值和颜色。
  

3. 数据绑定：数据绑定可以将组件与数据模型进行绑定，从而实现前端页面与数据模型的连接。
   

4. 交互编排：基础条状暂无交互编排。
   

基础折线

  基础折线图是一种图表组件，通过将一系列点用线段连接而成，用于表示一段时间内数据的波动或趋势，常用于表示趋势、变化和周期等时间相关的数据，同时便于对比多个数据系列。

1. 样式配置
   样式配置-布局样式

• 高度和宽度：确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的高宽确定容器的大小。
  

• 布局方式：分为内联布局与块级布局，与对齐方式复合使用。
  

• 内联布局指下一个组件与本组件并排排列，此时可选择对齐方式，使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。
  

• 定位方式：可选择相对定位与决定定位，两者都可以根据填入的位边距信息来调整该组件定位
  

• 展示层级： 当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

• 内外边距： 内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

• 自定义样式： 自定义样式是一种界面设计技巧，通过编写自定义的CSS代码，可以实现修改浮木云组件中没有提供的属性，如列表、查询容器背景颜色等，能够让界面更符合需求。使用方法如下：

• 在画布或页面结构树种点击一个组件，进入“样式配置”，向下滑动找到“自定义样式”即可进行自定义，如修改背景颜色为黑色，只需在".self{}"中输入"background:black;"
  

2. 属性配置
   属性配置-原生属性

• 平滑折线：选择是则将折线平滑成曲线。
  

• 横轴单位和纵轴单位：在输入框中填写单位，条状图的横轴和纵轴末端则会显示所填单位名称。
  

• 单位字号和字体颜色：用于修改单位的字体大小以及单位字体颜色，字体颜色可通过点击调色板或手动输入颜色数值的方式修改。
  

• 图边距：可调整条状图距离该组件上下左右边缘的百分比距离。
  

  属性配置-图表属性

• 深色模式：可修改整个组件的背景样式。
  

• 图例控件：启用和禁用可调整图例是否可见。启用图例后可调整图例方向、图例上距、图例左距、图例字体大小和图例字体颜色。
  

• 标题控件：显示和隐藏可调整标题是否可见。显示标题后可调整标题文字、大小、颜色、标题上距和标题左距。
  

• 提示控件：启用后，当鼠标悬浮在柱状条上时，会有小文本框显示该柱状条信息。
  

• 工具控件：启用后，图表上会显示数据视图、刷新和保存为图三个工具，可调整工具方向、工具上距和工具右距。
  

属性配置-扩展设置

• 横轴数据设置：点击后弹出弹窗，可修改横轴数据个数、排列方式以及横轴数据名称。
  

• 模拟数据设置: 点击后弹出对话框，可添加、导入、导出和删除数据，还能够修改基础条状图的数值和颜色。
  

1. 交互编排：基础折线暂无交互编排。
   

柱状折线

  柱状折线图是一种图表组件，将柱状图和折线图结合起来，同时呈现数据的数量和趋势。柱状图通常用来表示数据的数量，而折线图则用来展示数据的趋势。它可以直观地展示数据的数量和变化趋势，适用于对比不同数据系列的数量和趋势的分析和展示。

1. 样式配置
   样式配置-布局样式

• 高度和宽度：确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的高宽确定容器的大小。
  

• 布局方式：分为内联布局与块级布局，与对齐方式复合使用。
  

• 内联布局指下一个组件与本组件并排排列，此时可选择对齐方式，使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。
  

• 定位方式：可选择相对定位与决定定位，两者都可以根据填入的位边距信息来调整该组件定位
  

• 展示层级： 当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

• 内外边距： 内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

• 自定义样式： 自定义样式是一种界面设计技巧，通过编写自定义的CSS代码，可以实现修改浮木云组件中没有提供的属性，如列表、查询容器背景颜色等，能够让界面更符合需求。使用方法如下：

• 在画布或页面结构树种点击一个组件，进入“样式配置”，向下滑动找到“自定义样式”即可进行自定义，如修改背景颜色为黑色，只需在".self{}"中输入"background:black;"
  

2. 属性配置
   属性配置-原生属性
   

• 组件别名：为组件命名，方便页面管理。
  

• 柱状背景：显示条状条背景样式，开启后可通过下方背景颜色功能来修改具体颜色。
  

• 平滑折线：选择是则将折线平滑成曲线。
  

• 横轴单位和纵轴单位：在输入框中填写单位，条状图的横轴和纵轴末端则会显示所填单位名称。
  

• 单位字号和字体颜色：用于修改单位的字体大小以及单位字体颜色，字体颜色可通过点击调色板或手动输入颜色数值的方式修改。
  

• 图边距：可调整条状图距离该组件上下左右边缘的百分比距离。
  

  属性配置-图表属性

• 深色模式：可修改整个组件的背景样式。
  

• 图例控件：启用和禁用可调整图例是否可见。启用图例后可调整图例方向、图例上距、图例左距、图例字体大小和图例字体颜色。
  

• 标题控件：显示和隐藏可调整标题是否可见。显示标题后可调整标题文字、大小、颜色、标题上距和标题左距。
  

• 提示控件：启用后，当鼠标悬浮在柱状条上时，会有小文本框显示该柱状条信息。
  

• 工具控件：启用后，图表上会显示数据视图、刷新和保存为图三个工具，可调整工具方向、工具上距和工具右距。
  

属性配置-扩展设置

• 横轴数据设置：点击后弹出弹窗，可修改横轴数据个数、排列方式以及横轴数据名称。
  

• 模拟数据设置: 点击后弹出对话框，可添加、导入、导出和删除数据，还能够修改基础条状图的数值和颜色。
  

1. 交互编排：柱状折线暂无交互编排。
   

基础面积

  基础面积图是一种图表组件，通过填充坐标轴与折线之间的区域来表示数据的数量，并用平滑的边缘线方便对比多个数据系列的趋势。它可以展示数据数量的变化趋势，也可以用于比较不同数据系列之间数量的差异。常用于展示数据随时间而变化的趋势。

1. 样式配置
   样式配置-布局样式

• 高度和宽度：确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的高宽确定容器的大小。
  

• 布局方式：分为内联布局与块级布局，与对齐方式复合使用。
  

• 内联布局指下一个组件与本组件并排排列，此时可选择对齐方式，使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。
  

• 定位方式：可选择相对定位与决定定位，两者都可以根据填入的位边距信息来调整该组件定位
  

• 展示层级： 当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

• 内外边距： 内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

• 自定义样式： 自定义样式是一种界面设计技巧，通过编写自定义的CSS代码，可以实现修改浮木云组件中没有提供的属性，如列表、查询容器背景颜色等，能够让界面更符合需求。使用方法如下：

• 在画布或页面结构树种点击一个组件，进入“样式配置”，向下滑动找到“自定义样式”即可进行自定义，如修改背景颜色为黑色，只需在".self{}"中输入"background:black;"
  

2. 属性配置
   属性配置-原生属性
   

• 组件别名：为组件命名，方便页面管理。
  

• 平滑折线：选择是则将折线平滑成曲线。
  

• 横轴单位和纵轴单位：在输入框中填写单位，基础面积图的横轴和纵轴末端则会显示所填单位名称。
  

• 单位字号和字体颜色：用于修改单位的字体大小以及单位字体颜色，字体颜色可通过点击调色板或手动输入颜色数值的方式修改。
  

• 图边距：可调整基础面积图距离该组件上下左右边缘的百分比距离。
  

  属性配置-图表属性

• 深色模式：可修改整个组件的背景样式。
  

• 图例控件：启用和禁用可调整图例是否可见。启用图例后可调整图例方向、图例上距、图例左距、图例字体大小和图例字体颜色。
  

• 标题控件：显示和隐藏可调整标题是否可见。显示标题后可调整标题文字、大小、颜色、标题上距和标题左距。
  

• 提示控件：启用后，当鼠标悬浮在柱状条上时，会有小文本框显示该柱状条信息。
  

• 工具控件：启用后，图表上会显示数据视图、刷新和保存为图三个工具，可调整工具方向、工具上距和工具右距。
  

属性配置-扩展设置

• 横轴数据设置：点击后弹出弹窗，可修改横轴数据个数、排列方式以及横轴数据名称。
  

• 模拟数据设置: 点击后弹出对话框，可添加、导入、导出和删除数据，还能够修改基础条状图的数值和颜色。
  

1. 交互编排：基础面积暂无交互编排。
   

基础饼图

  基础饼图是一种图表组件，通过将数据按比例划分成一个个扇形，表示不同部分在总体中所占比例，而一个圆形的饼图总共有100%的数值。常用于显示数据中不同部分的数量比例，可对比不同类别数据的占比，也可以展示数据的相对大小。

1. 样式配置
   样式配置-布局样式

• 高度和宽度：确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的高宽确定容器的大小。
  

• 布局方式：分为内联布局与块级布局，与对齐方式复合使用。
  

• 内联布局指下一个组件与本组件并排排列，此时可选择对齐方式，使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。
  

• 定位方式：可选择相对定位与决定定位，两者都可以根据填入的位边距信息来调整该组件定位
  

• 展示层级： 当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

• 内外边距： 内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

• 自定义样式： 自定义样式是一种界面设计技巧，通过编写自定义的CSS代码，可以实现修改浮木云组件中没有提供的属性，如列表、查询容器背景颜色等，能够让界面更符合需求。使用方法如下：

• 在画布或页面结构树种点击一个组件，进入“样式配置”，向下滑动找到“自定义样式”即可进行自定义，如修改背景颜色为黑色，只需在".self{}"中输入"background:black;"
  

2. 属性配置
   属性配置-原生属性
   

• 组件名称：为组件命名，方便页面管理。
  

• 饼图大小：饼图占整个组件的百分比大小。
  

• 标签显隐：饼图每个板块的标签信息是否直接在饼图上显示。
  

• 标签位置：可选择标签信息直接显示在环图内部或用短折线连接在外部。
  

• 标签大小和标签颜色：用于修改标签的字体大小以及标签字体颜色，字体颜色可通过点击调色板或手动输入颜色数值的方式修改。
  

• 数据统计：可显示或隐藏饼图所有数据量的总计，表示为汉字“总数”和总和数字两部分。
  

• 总数大小和总数颜色：可修改“总数”这一汉字的字体大小和字体颜色。
  

• 数据大小和数据颜色：可修改总和数字的大小和颜色。
  

• 横向位置：下拉框选择居左、居中或居右，确定数据统计在组件内部的位置。
  

• 纵向距离、图左边距和图上边距：可调整基础饼图纵向距离和图例距离该组件上边缘和左边缘的百分比距离。
  

  属性配置-图表属性

• 深色模式：可修改整个组件的背景样式。
  

• 图例控件：启用和禁用可调整图例是否可见。启用图例后可调整图例方向、图例上距、图例左距、图例字体大小和图例字体颜色。
  

• 标题控件：显示和隐藏可调整标题是否可见。显示标题后可调整标题文字、大小、颜色、标题上距和标题左距。
  

• 提示控件：启用后，当鼠标悬浮在饼图上时，会有小文本框显示该柱状条信息。
  

• 工具控件：启用后，图表上会显示数据视图、刷新和保存为图三个工具，可调整工具方向、工具上距和工具右距。
  

  属性配置-扩展设置

• 模拟数据设置，点击后弹出对话框，可添加、导入、导出和删除数据，还能够修改基础饼图图的数值和颜色。
  

1. 交互编排：基础饼图暂无交互编排。
   

基础环图

  基础环图是一种图表组件，是基于饼图衍生而来的一种形式，将饼图变成一个内外环形式，内环表示总体，外环表示内环总数据的比例。常用于显示数据中不同部分的数量比例，可对比不同类别数据的占比。

1. 样式配置
   样式配置-布局样式
   

• 高度和宽度：确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的高宽确定容器的大小。
  

• 布局方式：分为内联布局与块级布局，与对齐方式复合使用。
  

• 内联布局指下一个组件与本组件并排排列，此时可选择对齐方式，使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。
  

• 定位方式：可选择相对定位与决定定位，两者都可以根据填入的位边距来调整该组件定位
  

• 展示层级： 当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

• 内外边距： 内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

• 自定义样式： 自定义样式是一种界面设计技巧，通过编写自定义的CSS代码，可以实现修改浮木云组件中没有提供的属性，如列表、查询容器背景颜色等，能够让界面更符合需求。使用方法如下：

• 在画布或页面结构树种点击一个组件，进入“样式配置”，向下滑动找到“自定义样式”即可进行自定义，如修改背景颜色为黑色，只需在".self{}"中输入"background:black;"
  

2. 属性配置
   属性配置-原生属性
   

• 组件名称：为组件命名，方便页面管理。
  

• 内环大小和外环大小：分别指环形的内边和外边到圆心的百分比距离。
  

• 有无圆角：选择基础环图是否圆角。
  

• 标签显隐：选择基础环图标签是否显示。
  

• 标签位置：选择基础环图标签的位置是在内部或是外部。
  

• 标签大小和标签颜色：用于修改标签的字体大小以及标签字体颜色，字体颜色可通过点击调色板或手动输入颜色数值的方式修改。
  

• 数据统计：可显示或隐藏环图所有数据量的总计，表示为汉字“总数”和总和数字两部分。
  

• 总数大小和总数颜色：可修改“总数”这一汉字的字体大小和字体颜色。
  

• 数据大小和数据颜色：可修改总和数字的大小和颜色。
  

• 横向位置和纵向距离：下拉框选择居左、居中或居右，确定数据统计在组件内部的位置。
  

• 图左边距和图上边距：可调整基础环图纵向距离和图例距离该组件上边缘和左边缘的百分比距离。
  

  属性配置-图表属性

• 深色模式：可修改整个组件的背景样式。
  

• 图例控件：启用和禁用可调整图例是否可见。启用图例后可调整图例方向、图例上距、图例左距、图例字体大小和图例字体颜色。
  

• 标题控件：显示和隐藏可调整标题是否可见。显示标题后可调整标题文字、大小、颜色、标题上距和标题左距。
  

• 提示控件：启用后，当鼠标悬浮在环图上时，会有小文本框显示该柱状条信息。
  

• 工具控件：启用后，图表上会显示数据视图、刷新和保存为图三个工具，可调整工具方向、工具上距和工具右距。
  

  属性配置-扩展设置

• 模拟数据设置，点击后弹出对话框，可添加、导入、导出和删除数据，还能够修改基础环图的数值和颜色。
  

1. 交互编排：基础环图暂无交互编排。
   

玫瑰图

  玫瑰图是一种基于极坐标系的饼图变体，通过将饼图的半径由等分改为非等分来表示不同的数值大小，常用于显示数据的走向和变化规律，尤其适用于周期性的数据分析。它呈现出圆心到边缘的扇形份额、中心点径向上颜色值的变化。

1. 属性配置
   属性配置-原生属性
   

• 组件名称：为组件命名，方便页面管理。
  >

• 内环大小和外环大小：分别指玫瑰图的内边和外边到圆心的百分比距离。
  

• 有无圆角：选择玫瑰图是否圆角。
  

• 标签显隐：选择玫瑰图标签是否显示。
  

• 标签位置：选择玫瑰图标签的位置是在内部或是外部。
  

• 标签大小和标签颜色：可设置标签的大小和颜色。
  

• 数据统计：可显示或隐藏玫瑰图所有数据量的总计，表示为汉字“总数”和总和数字两部分。
  

• 总数大小和总数颜色：可修改“总数”这一汉字的字体大小和字体颜色。
  

• 数据大小和数据颜色：可修改总和数字的大小和颜色。
  

• 横向位置：下拉框选择居左、居中或居右，确定数据统计在组件内部的位置。
  

• 纵向距离、图左边距和图上边距：可调整玫瑰图纵向距离和图例距离该组件上边缘和左边缘的百分比距离。
  

属性配置-图表属性

• 深色模式：可修改整个组件的背景样式。
  

• 图例控件：启用和禁用可调整图例是否可见。启用图例后可调整图例方向、图例上距、图例左距、图例字体大小和图例字体颜色。
  

• 标题控件：显示和隐藏可调整标题是否可见。显示标题后可调整标题文字、大小、颜色、标题上距和标题左距。
  

• 提示控件：启用后，当鼠标悬浮在玫瑰图上时，会有小文本框显示该柱状条信息。
  

• 工具控件：启用后，图表上会显示数据视图、刷新和保存为图三个工具，可调整工具方向、工具上距和工具右距。
  

属性配置-扩展设置

• 模拟数据设置，点击后弹出对话框，可添加、导入、导出和删除数据，还能够修改玫瑰图的数值和颜色。
  

1. 样式配置
   样式配置-布局样式

• 高度和宽度：确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的高宽确定容器的大小。
  

• 布局方式：分为内联布局与块级布局，与对齐方式复合使用。
  

• 内联布局指下一个组件与本组件并排排列，此时可选择对齐方式，使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。
  

• 块级布局指本组件单独占据一行。
  

• 定位方式：可选择相对定位、绝对定位和固定定位，三者都可以根据填入的位边距来调整该组件定位。
  

• 展示层级：可输入展示层级，输入数字越大，展示优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

1. 交互编排

• 玫瑰图无交互编排。
  

雷达图

  雷达图是一种基于极坐标系的图表组件，通过将数据沿着不同方向绘制成多边形，以显示不同项的相对大小和比例，通常用于从多个方面对比不同指标、不同选项、不同评估对象的综合性指数或特征。

1. 属性配置
   属性配置-原生属性
   

• 组件名称：为组件命名，方便页面管理。
  

• 图表大小：雷达图占整个组件的百分比大小。
  

• 图表类型：可选择多边形雷达图或圆形雷达图。
  

• 图左边距和图上边距：可调整雷达图距离该组件上边缘和左边缘的百分比距离。
  

  属性配置-图表属性

• 深色模式：可修改整个组件的背景样式。
  

• 图例控件：启用和禁用可调整图例是否可见。启用图例后可调整图例方向、图例上距、图例左距、图例字体大小和图例字体颜色。
  

• 标题控件：显示和隐藏可调整标题是否可见。显示标题后可调整标题文字、大小、颜色、标题上距和标题左距。
  

• 提示控件：启用后，当鼠标悬浮在玫瑰图上时，会有小文本框显示该柱状条信息。
  

• 工具控件：启用后，图表上会显示数据视图、刷新和保存为图三个工具，可调整工具方向、工具上距和工具右距。
  

  属性配置-扩展设置

• 横轴数据设置，点击后弹出弹窗，可修改雷达数据个数、排列方式以及数据名称。
  

• 模拟数据设置，点击后弹出对话框，可添加、导入、导出和删除数据，还能够修改雷达图的数值和颜色。
  

2. 样式配置
   样式配置-布局样式
   

• 高度和宽度：确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的高宽确定容器的大小。
  

• 定位方式：可选择相对定位、绝对定位和固定定位，三者都可以根据填入的位边距来调整该组件定位。
  

• 展示层级：可输入展示层级，输入数字越大，展示优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

• 布局方式：分为内联布局与块级布局，与对齐方式复合使用。
  

• 内联布局指下一个组件与本组件并排排列，此时可选择对齐方式，使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。
  

• 块级布局指本组件单独占据一行。

1. 交互编排

• 雷达图无交互编排。
  

仪表盘

  仪表盘是一种图表组件，常用于显示度量或指标的值，并将其与预定义的目标或阈值进行比较。它通常以圆形或半圆形的形式呈现，具有刻度、指针等组成部分，以方便用户直观地读取数据值，同时提供了重要的警告或提醒功能，适用于显示指标的趋势或变化状态。常用于监测系统、行驶车速、油量、温度等需要实时监控的场景。

1. 属性配置
   属性配置-原生属性
   

• 组件名称：为组件命名，方便页面管理。
  

• 深色模式：可修改整个组件的背景样式。
  

• 图表大小：雷达图占整个组件的百分比大小。
  

• 图左边距和图上边距：可调整雷达图距离该组件上边缘和左边缘的百分比距离。
  

• 数值信息：可修改数值名称、数值大小、数值单位、数值字体以及数值颜色。
  

• 最小表值和最大表值：分别指仪表盘初始刻度处和结束刻度处的数值大小。
  

• 分割数值：指割成最小表值到最大表值之间数的份数。
  

• 开始角度和结束角度：前者指仪表盘初始刻度-圆心的连线和水平线的夹角，后者指仪表盘结束刻度-圆心的连线和水平线的夹角。
  

• 提示标题：当鼠标悬浮在仪表盘指针上时，会有小文本框显示仪表盘的标题信息。
  

  属性配置-扩展设置

• 仪表盘无扩展设置。

2. 样式配置
   样式配置-布局样式
   

• 高度和宽度：确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的高宽确定容器的大小。
  

• 定位方式：可选择相对定位、绝对定位和固定定位，三者都可以根据填入的位边距来调整该组件定位。
  

• 展示层级：可输入展示层级，输入数字越大，展示优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

• 布局方式：分为内联布局与块级布局，与对齐方式复合使用。
  

• 内联布局指下一个组件与本组件并排排列，此时可选择对齐方式，使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。
  

• 块级布局指本组件单独占据一行。
  

1. 交互编排

• 仪表盘无交互编排。
  

高级组件

表单组件

  表单组件一般用于在表单中排版页面内嵌输入组件，也可单独使用。内嵌输入组件使用与单独使用的配置略有不同，即内嵌输入组件使用时，属性配置会多出表单属性这一模块，且没有样式配置。表单属性已在表单容器中有过详细介绍，在此不过多赘述。以下将介绍表单组件在单独使用时的配置。

1. 属性配置:
   属性配置--原生属性:
   

• 组件别名：命名组件，便于页面管理。
  

• 拖拽提示，是否显示拖拽组件字段。
  

• 组件尺寸：可选择组件的尺寸,包括超小尺寸、小型尺寸、中型尺寸、默认尺寸、较大尺寸、大型尺寸、超大尺寸。
  

• 对齐方式，表单子元素组件的标签对齐方式。
  

• 标签宽度，表单子元素组件的标签宽度大小。
  

• 宽度占比，表单子元素组件占表单一行的比例大小。
  

• 是否禁用，选择禁用后表单内部组件无法继续使用。
  

• 是否只读，开启后表单内部组件无法编辑。
  

属性配置--扩展设置:

• 生成静态数据
  

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 水平溢出和垂直溢出： 可以选择隐藏和滚动，当弹性容器中内容的尺寸超过弹性容器的尺寸时，选择隐藏只能展示弹性容器尺寸范围内的内容，选择滚动则可以通过滑动展示所有内容。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

样式配置--背景样式：

• 背景阴影： 可选择基础投影和浅色投影。
  

• 背景图片： 点击上传标识从本地选择图片或输入图片地址作为容器的背景图片。
  

• 背景颜色： 通过手动拖动拾色器、输入颜色的rgba值或输入颜色的十六进制值的方式改变背景颜色。
  

• 边框样式： 用于修改盒子边框的样式，可选择实线、点状、双线、虚线，与边框颜色、盒子边框配合使用。
  

• 边框颜色： 用于修改盒子边框的颜色，通过手动拖动拾色器、直接输入rgba值或输入十六进制值的方式改变颜色。
  

• 盒子边框： 用于围绕组件的内容和内外边距创建一个可见的边界。下方图例将盒子边框四角设置为20，使盒子四个角平滑化，将上下左右值设置为10，使盒子边框大小为10，并将边框样式设置为虚线，边框颜色设置为蓝色。
  

查询容器

  查询容器即是用于查询表格的容器，配合表单组件中的输入框、下拉框、级联选择、日期选择、日期范围等组件一起使用。查询容器自带“查询”和“重置”按钮，配合事件编排和查询或重置表格。

1. 属性配置:
   属性配置--原生属性:
   

• 组件别名：命名组件，便于页面管理。
  

• 尺寸大小：用于调节查询容器内容尺寸，可选择默认尺寸、中等尺寸、小型尺寸、超小尺寸。
  

• 标签宽度和组件宽度：查询容器子元素组件的标签的宽度和组件宽度。
  

• 查询按钮名称和重置按钮名称：可修改按钮文本文字。
  

• 查询按钮类型和重置按钮类型：选择不同类型按钮，可修改按钮的颜色样式。
  

• 重置按钮模式：选择禁用后表单内部组件无法继续使用。
  

  属性配置--扩展设置:

• 查询容器暂无扩展设置。
  

2. 样式配置：
   样式配置--布局样式：
   

• 宽度和高度： 确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的高宽确定容器的大小。<br/v>

• 水平溢出和垂直溢出： 可以选择隐藏和滚动，当布局容器中内容的尺寸超过弹性容器的尺寸时，选择隐藏只能展示布局容器尺寸范围内的内容，选择滚动则可以通过滑动展示所有内容。
  

• 内外边距： 内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。如下图所示，对第一行外部容器的左内边距设置为50，下外边距设置为20。
  

  样式配置--背景样式：

• 背景颜色： 通过手动拖动拾色器、输入颜色的rgba值或输入颜色的十六进制值的方式改变背景颜色。
  

• 背景图片： 点击上传标识从本地选择图片或输入图片地址作为容器的背景图片。
  

• 背景阴影： 可选择基础投影和浅色投影。
  

• 显示边框： 用于修改盒子边框的样式，可选择实线、点状、双线、虚线，与边框颜色、盒子边框配合使用。
  

3. 事件编排
   

• 查询容器可设置点击事件，通过设置点击事件动作实现查询容器的交互.
  

卡片列表

  卡片列表即是多个卡片组成的列表，使用卡片列表形式可以更方便地统一卡片的样式。可以设置卡片列表的每行个数、显示个数、卡片阴影、卡片间距。和弹性容器配合使用可为每个卡片增加边框。适用于图片和文字组合的列表页面。

1. 属性配置
   属性配置-原生属性

• 组件名称：命名组件，便于页面管理。
  

• 每行个数：卡片列表每一行显示卡片的个数。
  

• 显示个数：在卡片列表容器中可显示的卡片总个数。
  

• 有无分页：表示在卡片列表最下方是否进行分页显示。
  

• 页数选择：卡片列表下方显示分页的页数。
  

• 卡片阴影：可选择总是显示、悬浮显示、从不显示，悬浮显示是当鼠标悬浮在卡片上时，卡片出现阴影显示。
  

• 卡片高度和卡片间距：用于修改每个卡片的高度值以及卡片与卡片之间的横向纵向间距。
  

• 边框圆角：用于修改每个卡片边框圆角的弧度。
  

  属性配置-扩展设置

• 扩展设置包括动态数据配置和静态数据配置，这两个功能都需要拖入其他组件到卡片列表后使用，下方将文字组件拖入，每张卡片都会自动加载一个文字组件。
  

• 静态数据配置：点击静态数据配置按钮，弹出弹窗，序号与卡片一一对应，手动填入信息，在编译后卡片会显示相应信息。
  

• 动态数据配置：卡片列表绑定数据模型后，点击动态数据配置按钮，弹出弹窗，选择数据模型的某一字段进行绑定。
  

2. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 水平溢出和垂直溢出： 可以选择隐藏和滚动，当弹性容器中内容的尺寸超过弹性容器的尺寸时，选择隐藏只能展示弹性容器尺寸范围内的内容，选择滚动则可以通过滑动展示所有内容。
  

• 定位方式：锁定为相对定位，通过设定至顶部、左侧、右侧、底部的距离控制组件位置。
  

• 定位位置：锁定为相对定位，通过设定至顶部、左侧、右侧、底部的距离控制其位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

3. 事件编排
   

• 卡片列表可设置点击事件，通过设置点击事件动作实现卡片列表的交互.
  

高级表格

  高级表格是一种数据数据展示方式，它可以将数据信息组织成一行一列的形式。可以统一设置表格的序号、多选框、操作栏、列名，调整表头及表格字体，填充模拟数据。

1. 属性配置
   属性配置-原生属性

• 组件名称：命名组件，便于页面管理。
  

• 表格尺寸：用以调整表格行列的大小，可选默认尺寸、中等尺寸、小型尺寸、中等尺寸四种类型，方便用户根据实际情况灵活选择尺寸大小。
  

• 有无边框：可以控制表格相邻列之间是否存在边框。
  

• 斑马纹理：添加斑马纹理后，表格行出现灰白相间的颜色分布，能够让表格中的数据更加易于读取。
  

• 有无表头：表头是表格第一行的提示文字，展示了具体数据的类型或者名称，用户可以选择关闭表头，使页面设计更加整洁。
  

• 有无分页：选择有分页时，表格数据将会分不同页面展示，选择无分页时，表格数据将无分页，以竖向的方式直接展示。
  

• 最大高度：可以手动设置表格的最大高度，单位为px，直接输入数字即可，默认最大高度为400px。
  

• 行间距：可以手动设置表格的行间距，单位为px

• 页数选择：用户可以根据数据的总量，选择不同的页数。
  

  属性配置-扩展设置

• 基础列设置：可以设置表格中的多选框、序号和操作栏中的详细设置，如对齐方式、列宽、表头字体、表头颜色、表格字体和表格颜色等，提供了极大程度的自定义表格。
  

• 表格列设置：对表格的列进行详细的设置，可以选择添加列，也能够对不同的列进行删除，还能对列的位置进行调整，具体的每一列可以设置列名称、列字段、对齐方式、列宽、表头字体、表头颜色、表格字体、表格颜色、值类型、超出隐藏和开启排序。
  

• 操作按钮设置：可以为表格的操作栏进行按钮设置，可以自由地添加或者删除按钮，也能够对每一个按钮进行独立的详细设置，如按钮名称、按钮类型、按钮尺寸、按钮图标和按钮颜色。
  

• 表格数据设置：可以为表格设置初始数据，支持手动添加数据，也能够方便地进行数据地导入或者导出。
  

2. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 水平溢出和垂直溢出： 可以选择隐藏和滚动，当弹性容器中内容的尺寸超过弹性容器的尺寸时，选择隐藏只能展示弹性容器尺寸范围内的内容，选择滚动则可以通过滑动展示所有内容。
  

• 定位方式：锁定为相对定位，通过设定至顶部、左侧、右侧、底部的距离控制组件位置。
  

• 定位位置：锁定为相对定位，通过设定至顶部、左侧、右侧、底部的距离控制其位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

3. 事件编排

• 高级表格可设置加载、点击事件，通过设置加载、点击事件动作实现表格的交互.
  

动态表单

  动态表单是一种灵活的表单设计方式，可以根据不同的需求和条件生成表单内容。使用动态表单可以自行添加、删除数据。

1. 属性配置
   属性配置-原生属性

• 组件名称：命名组件，便于页面管理。
  

• 组件尺寸：能够方便调节动态表单的尺寸大小，可选默认尺寸、中等尺寸、小型尺寸和超小尺寸。
  

• 有无边框：可以控制动态表单的列之间是否存在边框，可根据具体情况选择是否添加边框。
  

• 斑马纹理：在动态表单的每两行之间添加灰白相间的颜色，能够方便数据的阅读。
  

• 是否只读：可以控制动态表单的读写模式，当设置动态表单为只读时，动态表单中的数据将无法修改。
  

• 是否禁用：设置动态表单禁用后，该动态表单将无法使用。
  

• 是否必要：设置动态表单非必要后，该动态表单的操作栏将无法使用。
  

• 操作列宽：可控制表单每列的宽度，默认操作列宽为65px，建议根据数据元素的长度分别调节操作列宽。
  

• 新增显隐：决定是否隐藏底部的添加一栏。
  

  属性配置-扩展设置

• 动态表单列设置：能够设置动态表单的列展示数据，可以自由地添加或者删除列数据，其中对每列的数据还能进行详细的设置，如列名称、列字段、列宽、组件、和必填选项。
  

• 动态表单按钮设置：可以为动态表单的操作栏进行按钮设置，可以自由地添加或者删除按钮，也能够对每一个按钮进行独立的详细设置，如按钮名称、按钮类型、按钮尺寸、按钮图标和按钮颜色。
  

• 生成静态数据：点击后，自动生成静态数据并填充至动态表单中。
  

2. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 水平溢出和垂直溢出： 可以选择隐藏和滚动，当弹性容器中内容的尺寸超过弹性容器的尺寸时，选择隐藏只能展示弹性容器尺寸范围内的内容，选择滚动则可以通过滑动展示所有内容。
  

• 布局方式：布局方式，可选择块级布局和内联布局，与对齐方式复合使用。

• 块级布局指表格单独占一行。
  

• 内联方式指下一个组件与表格并排排列，此时可选择对齐方式，使两个组件按顶端对齐、居中对齐或底部对齐的方式并排。
  

• 定位方式：动态表单的定位方式锁定为相对定位，且能够设置顶部、左侧、右侧、底部的距离。
  

• 定位位置：锁定为相对定位，通过设定至顶部、左侧、右侧、底部的距离控制其位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

3. 事件编排

• 动态表单可设置点击事件，实现交互.
  

一对多组件

1. 属性配置
   属性配置-原生属性

• 组件名称：命名组件，便于页面管理。
  

• 组件尺寸：能够方便调节一对多组件的尺寸大小，可选默认尺寸、中等尺寸、小型尺寸和超小尺寸。
  

• 有无边框：可以控制一对多组件的列之间是否存在边框，可根据具体情况选择是否添加边框。
  

• 斑马纹理：在一对多组件的每两行之间添加灰白相间的颜色，能够方便数据的阅读。
  

• 是否只读：可以控制一对多组件的读写模式，当设置一对多组件为只读时，一对多组件中的数据将无法修改。
  

• 是否禁用：设置一对多组件禁用后，该一对多组件将无法使用。
  

• 是否必要：设置一对多组件非必要后，该一对多组件的操作栏将无法使用。
  

• 操作列宽：可控制表单每列的宽度，默认操作列宽为65px，建议根据数据元素的长度分别调节操作列宽。
  

• 新增显隐：决定是否隐藏底部的添加一栏。
  

  属性配置-扩展设置

• 一对多组件单项设置：能够设置一对多组件的列展示数据，可以自由地添加或者删除列数据，其中对每列的数据还能进行详细的设置，如列名称、列字段、列宽、组件、和必填选项。
  

• 一对多组件按钮设置：可以为一对多组件的操作栏进行按钮设置，可以自由地添加或者删除按钮，也能够对每一个按钮进行独立的详细设置，如按钮名称、按钮类型、按钮尺寸、按钮图标和按钮颜色。
  

• 生成静态数据：点击后，自动生成静态数据并填充至一对多组件中。
  

2. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 水平溢出和垂直溢出： 可以选择隐藏和滚动，当弹性容器中内容的尺寸超过弹性容器的尺寸时，选择隐藏只能展示弹性容器尺寸范围内的内容，选择滚动则可以通过滑动展示所有内容。
  

• 布局方式：布局方式，可选择块级布局和内联布局，与对齐方式复合使用。

• 块级布局指表格单独占一行。
  

• 内联方式指下一个组件与表格并排排列，此时可选择对齐方式，使两个组件按顶端对齐、居中对齐或底部对齐的方式并排。
  

• 定位方式：一对多组件的定位方式锁定为相对定位，且能够设置顶部、左侧、右侧、底部的距离。
  

• 定位位置：锁定为相对定位，通过设定至顶部、左侧、右侧、底部的距离控制其位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

3. 事件编排

• 一对多组件可设置点击事件，通过设置点击事件动作实现一对多组件的交互.
  

文档预览

1. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 文档地址：在本地电脑中选择需要上传的文档。
  

• 显示下载：设置在预览页面时该文档是否可以下载到本地。
  

  属性配置-扩展设置 文档预览暂无扩展设置。

2. 样式配置
   样式配置-布局样式
   

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 水平溢出和垂直溢出： 可以选择隐藏和滚动，当弹性容器中内容的尺寸超过弹性容器的尺寸时，选择隐藏只能展示弹性容器尺寸范围内的内容，选择滚动则可以通过滑动展示所有内容。
  

• 定位方式：文档预览的定位方式锁定为相对定位，且能够设置顶部、左侧、右侧、底部的距离。
  

• 定位位置：锁定为相对定位，通过设定至顶部、左侧、右侧、底部的距离控制其位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

3. 事件编排

• 文档预览暂无交互编排。

视频组件

1. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 视频地址：选择从本地电脑上传视频。
  

• 工具栏显隐：选择是否隐藏工具栏。
  

• 连续播放：决定是否连续播放视频
  

• 自动播放：决定是否自动播放视频
  

2. 样式配置
   样式配置-布局样式
   

• 宽度和高度：确定其在布局中的大小，可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据按钮内部文字的宽度和高宽确定按钮的大小。
  

• 定位方式：可选择相对定位和绝对定位，通过设定至顶部、左侧、右侧、底部的距离控制组件的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

  属性配置-扩展设置 视频组件暂无扩展设置。 3. 事件编排

• 视频组件暂无交互编排。

日历组件

1. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 日期高度：用于设置每个日期所占的高度。
  

• 日期颜色：用于设置日期字体显示的颜色。
  

• 日期字体：用于设置每个日期显示的字体大小。
  

  属性配置-扩展设置
  日历属性设置

• 日期配置：用于绑定日期数据模型。
  

• 标记配置：用于绑配置在日历上是否显示标记。
  

• 展示配置：用于进行设置图标样式。
  

  日历数据设置

• 日历数据设置：点击添加按钮可以往日历中添加数据，包括序号，日期，标记数值，扩展值以及操作。
  

2. 样式配置
   样式配置-布局样式
   

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 水平溢出和垂直溢出： 可以选择隐藏和滚动，当弹性容器中内容的尺寸超过弹性容器的尺寸时，选择隐藏只能展示弹性容器尺寸范围内的内容，选择滚动则可以通过滑动展示所有内容。
  

• 定位方式：锁定为相对定位，通过设定至顶部、左侧、右侧、底部的距离控制组件位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不受覆盖操作，数字越大优先级越高。
  

3. 事件编排

• 日历组件可设置加载、日期改变事件，通过设置加载、日期改变事件动作实现日历组件的交互.
  

页面设计APP端组件库

容器

  容器都是用来布局和管理页面元素的工具，其丰富的配置项、可重用性强的特点适应了不同的页面需求并减少了代码的冗余和维护成本。容器的配置包括属性配置和样式配置。

布局容器

  布局容器是包含和组织其他控件的容器，容器中的组件默认为纵向排列，正确的使用布局容器可以帮我们构建良好结构化的用户界面。

1. 属性配置:
   属性配置--原生属性:
   

• 组件名称，命名组件，便于页面管理。
• 拖拽提示，提示拖入其他控件。
• 是否隐藏，用于设置组件是否可见。
  

  属性配置--扩展设置:

• 布局容器暂无扩展设置。
  

1. 样式配置：
   样式配置--布局样式：
   

• 宽度和高度： 确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的高宽确定容器的大小。
  

• 水平溢出和垂直溢出： 可以选择隐藏和滚动，当布局容器中内容的尺寸超过弹性容器的尺寸时，选择隐藏只能展示布局容器尺寸范围内的内容，选择滚动则可以通过滑动展示所有内容。
  

• 定位方式： 可选择相对定位和绝对定位，通过设定至顶部、左侧、右侧、底部的距离控制其位置。可选择相对定位、绝对定位和固定定位，三者都可以根据填入的位边距来调整该组件定位。
  

• **展示层级：**可输入展示层级，输入数字越大，展示优先级越高。
  

• 内外边距： 内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

  样式配置--背景样式：

• 背景颜色： 通过手动拖动拾色器、输入颜色的rgba值或输入颜色的十六进制值的方式改变背景颜色。
  

• 背景图片： 点击上传标识从本地选择图片或输入图片地址作为容器的背景图片。
  

• 背景阴影： 可选择基础投影和浅色投影。
  

• 边框样式： 用于修改盒子边框的样式，可选择实线、点状、双线、虚线，与边框颜色、盒子边框配合使用。
  

• 边框颜色： 用于修改盒子边框的颜色，通过手动拖动拾色器、直接输入rgba值或输入十六进制值的方式改变颜色。
  

• 盒子边框： 用于围绕组件的内容和内外边距创建一个可见的边界。下方图例将盒子边框四角设置为20，使盒子四个角平滑化，将上下左右值设置为10，使盒子边框大小为10，并将边框样式设置为虚线，边框颜色设置为蓝色。
  

• 事件编排： 布局容器可设置点击事件，通过设置点击事件动作实现布局容器的交互.
  

弹性容器

  弹性容器是用于构建灵活的、自适应布局的模块，容器内的组件默认为横向排列，它提供了一种方便的方式，使容器内的元素按指定的规则排列并可以扩展和收缩。

1. 属性配置:
   属性配置--原生属性:
   

• 组件名称，命名组件，便于页面管理。
• 是否隐藏，用于设置组件是否可见。
  

  属性配置--扩展设置:

• 弹性容器暂无扩展设置。
  

2. 样式配置：
   样式配置--布局样式：
   

• 宽度和高度： 确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的高宽确定容器的大小。
  

• 水平溢出和垂直溢出： 可以选择隐藏和滚动，当弹性容器中内容的尺寸超过弹性容器的尺寸时，选择隐藏只能展示弹性容器尺寸范围内的内容，选择滚动则可以通过滑动展示所有内容。
  

• 布局方式： 锁定为弹性布局。弹性布局可以使容器在水平方向上排列其子元素，并可以将子元素进行伸缩和对齐调整。
  

• 横向对齐和纵向对齐： 确定其内部组件在容器中的对齐方式。
  

• 换行方式 可选择不换行和换行，不换行允许多个组件在同一行水平排列，换行只允许一行放置一个组件。
  

• 定位方式： 可选择相对定位和绝对定位，通过设定至顶部、左侧、右侧、底部的距离控制其位置。可选择相对定位、绝对定位和固定定位，三者都可以根据填入的位边距来调整该组件定位。
  

• 展示层级：可输入展示层级，输入数字越大，展示优先级越高。
  

• 内外边距： 内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

  样式配置--背景样式：

• 背景颜色： 通过手动拖动拾色器、输入颜色的rgba值或输入颜色的十六进制值的方式改变背景颜色。
  

• 背景图片： 点击上传标识从本地选择图片或输入图片地址作为容器的背景图片。
  

• 背景阴影： 可选择基础投影和浅色投影。
  

• 边框样式： 用于修改盒子边框的样式，可选择实线、点状、双线、虚线，与边框颜色、盒子边框配合使用。
  

• 边框颜色： 用于修改盒子边框的颜色，通过手动拖动拾色器、直接输入rgba值或输入十六进制值的方式改变颜色。
  

• 盒子边框： 用于围绕组件的内容和内外边距创建一个可见的边界。下方图例将盒子边框四角设置为20，使盒子四个角平滑化，将上下左右值设置为10，使盒子边框大小为10，并将边框样式设置为虚线，边框颜色设置为蓝色。
  

1. 交互编排
   

• 弹性容器可设置点击事件，通过设置点击事件动作实现弹性容器的交互.
  

栅格容器

  栅格容器页面划分为一个或多个栏数，通过设置分栏栏数、分栏间隔和分栏占比实现页面的布局。使用栅格容器就可以避免多个容器组建的嵌套，适用于布局复杂、内容的丰富的页面。

1. 属性配置
   属性配置-原生属性

• 组件别名：命名组件，便于页面管理。
  

• 分栏间隔：用于修改栅格容器中两插槽之间的间隔距离。
  

• 分栏栏数：下拉框选择不同数量，可修改栅格容器插槽容器的数量。
  

• 分栏占比：指栅格容器插槽的宽度比。
  

  属性配置--扩展设置:

• 栅格容器暂无扩展属性设置。
  

2. 样式配置
   

• 栅格容器暂无样式配置。
  

3. 事件编排
   

• 栅格容器暂无事件编排。
  

折叠面板

  折叠面板允许通过单击折叠面板标题栏来显示或隐藏相关内容，通常用于组织大量信息并提高页面的可用性，同时还能使界面更加整洁美观。

1. 属性配置
   属性配置-原生属性

• 组件别名：命名组件，便于页面管理。
  

• 标题颜色：通过手动拖动拾色器、直接输入rgba值或输入十六进制值的方式改变折叠面板所有的标题颜色。
  

• 字体大小：用于修改折叠面板标题的粗细。
  

• 字体粗细：可以调整按钮内的文字的字体粗细。
  

• 标题左距：标题至折叠面板容器左边边界的距离。
  

• 图标地址：点击上传标识从本地选择图片或输入图片地址作为标题前的图片。
  

  属性配置-扩展设置

• 默认状态：全展开指所有折叠面板的内容都展开，全收起指折叠面板所有内容都隐藏，自定义指自由选择展开和隐藏的面板。

• 面板设置：点击添加可新增一个面板，在面板设置内可修改每个面板的标题，对勾可控制每个面板的展开状态，操作栏可删除面板。

2. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 水平溢出和垂直溢出：可以选择隐藏和滚动，当折叠面板中内容的尺寸超过折叠面板的尺寸时，选择隐藏只能展示折叠面板尺寸范围内的内容，选择滚动则可以通过滑动展示所有内容。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

3. 事件编排
   

• 折叠面板暂无事件编排。
  

选项卡

  选项卡一般用于分隔内容上有关联但属于不同类别的数据集合，例如项目的不同类别，使用选项卡的前提是这些类别是有限的。标签页可以帮助开发者更好地组织页面内容,减少信息量,方便用户快速找到自己需要的信息，提高页面的易用性和用户体验。

1. 属性配置
   属性配置-原生属性

• 组件别名：命名组件，便于页面管理。
  

• 标签风格：可选择默认、选项卡、卡片三种风格，来修改标签样式。
  

• 标签颜色：可修改标签的字体大小（单位为px）和颜色。
  

• 标题省略：可选择是否省略标题。
  

  属性配置-扩展设置

• 标签设置：点击添加可新增一个选项，在选项设置内可修改每个标签的标题，操作栏可删除标签。

2. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 水平溢出和垂直溢出：可以选择隐藏和滚动，当折叠面板中内容的尺寸超过折叠面板的尺寸时，选择隐藏只能展示折叠面板尺寸范围内的内容，选择滚动则可以通过滑动展示所有内容。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

3. 事件编排
   

• 选项卡可设置点击事件，通过设置点击事件动作实现标签页的交互.
  

弹出层

  弹出层是出现在当前页面之上的一个浮动窗口，此类弹出层的功能主要是引导用户填写信息，与基础组件中的提示弹出层不同。它相当于一个容器，内部可以使用其他容器实现布局，并使用基础组件、表单组件适配弹出层内容。弹出层组件常见的应用场景有增、删、改、详情等等。

1. 属性配置
   属性配置-原生属性

• 组件别名：命名组件，便于页面管理。
  

• 拖拽提示：用于设置组件拖拽文字提示是否可见。
  

• 弹出位置：调整弹出层位置
  

• 弹窗显隐：用来设置弹出层的取消按钮和确定按钮在页面中是否可见。
  

• 弹窗圆角：用来设置弹出层是否为圆角。
  

  属性配置--扩展设置

• 弹出层暂无扩展设置。

2. 样式配置
   样式配置-布局样式

• 高度和宽度：确定组件的大小，可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 水平溢出和垂直溢出：可以选择隐藏和滚动，当弹出层容器中内容的尺寸超过表单的尺寸时，选择隐藏只能展示弹出层容器尺寸范围内的内容，选择滚动则可以通过滑动展示所有内容。
  

3. 事件编排
   

• 弹出层暂无事件编排。
  

基础组件

按钮

  按钮一般与事件编排配合使用，点击按钮触发某个事件。普通按钮用于提交表单、完成操作、打开链接、触发动作等等，是最常用的一种按钮类型；文字按钮常用于表格的操作列。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定其在布局中的大小，可选择px值、百分比和自适应，一般都为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据按钮内部文字的宽度和高宽确定按钮的大小。
  

• 定位方式：可选择相对定位、绝对定位和固定定位，通过设定至顶部、左侧、右侧、底部的距离控制组件的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

  样式配置-文字样式

• 字体大小：可以调整按钮内的文字的字体大小。
  

• 字体颜色：可以调整按钮内的文字的字体颜色。
  

• 字体粗细：可以调整按钮内的文字的字体粗细。

• 字体样式：可以调整按钮内的文字的字体样式，用以选择不同的字体。
  

1. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 按钮名称：用于设置按钮中显示的文字内容。
  

• 按钮尺寸：默认为小型按钮，可选默认按钮、中等按钮、小型按钮和超小按钮。
  

• 按钮类型：根据按钮的功能选择不同的按钮类型，可选文字按钮、默认按钮、主要按钮、成功按钮、警告按钮危险按钮和信息按钮，不同类型的按钮样式不同。
  

• 按钮模式：调整按钮的风格模式，可选择默认或者朴素。
  

• 按钮圆角：可选默认或者圆角，选择默认时按钮为矩形，选择圆角时按钮则为圆角矩形。
  

• 图标类名：可选择插入按钮图标在到文字前，注意需填写icon图标名。
  

• 按钮颜色：在颜色面板上点击、直接输入RGB值或十六进制值来选择按钮颜色。
  

• 是否禁用：选择禁用后按钮将无法点击。
  

属性配置-扩展属性：按钮暂无扩展设置。

3. 交互编排

• 按钮点击：按钮可设置点击事件，通过设置点击事件动作实现交互。
  

文字

  文字是页面最基本组件之一，合理的文字设计可以让文字更加清晰易读，增强设计的视觉冲击力和吸引力，提升用户体验。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定文字组件的大小，可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据文字内容的高宽确定组件的大小。水平溢出可选择隐藏或滚动，但当宽度设为自适应水平溢出可能失效。垂直溢出可选择隐藏或滚动，但当高度设为自适应垂直溢出可能失效。
  

• 定位方式：可选择相对定位和绝对定位，通过设定至顶部、左侧、右侧、底部的距离控制其位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

          样式配置-文字样式

• 字体大小：可以设置组件内的文字的字体大小。
  

• 字体颜色：可以调整组件内的文字的字体颜色。
  

• 字体粗细：可以调整组件内的文字的字体粗细。
  

• 字体样式：可以调整组件内的文字的字体样式，用以选择不同的字体。
  

1. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 文字内容：用以设置文字组件中的具体文字内容。
  

• 水平对齐：可选居左、居中和居右，灵活调整文字内容在组件中的水平位置。
  

• 垂直对齐：可选顶部、居中和底部，灵活调整文字内容在组件中的垂直位置。
  

• 首行缩进：可以调整文字内容的首行缩进距离，单位为px，直接输入数字即可。
  

• 文字间距：可以调整文字内容的间距，单位为px，直接输入数字即可。
  

属性配置-扩展属性：文字组件暂无扩展设置。

3. 交互编排：文字组件暂无交互编排。

标签

  标签在浮木云中是一个没有实际功能的元素，一般用作分类和标记，作用让用户可以快速找到感兴趣的内容，并建立相关主题的联系。

1. 样式配置样式配置-布局样式

• 宽度和高度：确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据标签内容的高宽确定组件的大小。水平溢出可选择隐藏或滚动，但当宽度设为自适应水平溢出可能失效。垂直溢出可选择隐藏或滚动，但当高度设为自适应垂直溢出可能失效。
  

• 定位方式：锁定为相对定位，通过设定至顶部、左侧、右侧、底部的距离控制其位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

          样式配置-文字样式

• 字体大小：可以设置组件内的文字的字体大小。
  

• 字体颜色：字体颜色通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式来改变。
  

• 字体粗细：有常规、较粗和加粗三种选项，根据实际情况选择。
  

• 字体样式：字体样式可调整黑体、楷体和幼圆三种字体。
  

2. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 标签名称：用于设置标签中显示的字体内容，默认提供为“标签”二字，用户可根据实际情况自行输入文字。
  

• 标签尺寸：可选择默认标签、中等标签、小型标签和超小标签，默认选择为小型标签。
  

• 标签类型：根据标签的功能，可以选择不同的标签类型，提供默认、信息、成功、警告、错误共6种标签的类型选择。
  

• 标签模式：调整标签的风格模式，可选择默认或者朴素。
  

• 标签圆角：可选默认或者圆角，选择默认时标签为矩形，选择圆角时标签则为圆角矩形。
  

• 可否关闭：当开启可关闭时，标签上会出现一个关闭的标志，点击此标志就可以关闭标签。
  

• 标签颜色：标签同样提供自定义颜色，输入rgba值或直接输入十六进制值的方式来改变标签颜色。
  

属性配置-扩展属性：标签组件暂无扩展设置。

3. 交互编排：标签组件暂无事件编排。

图片

  图片组件支持上传本地图片，调整图片填充方式。若需调整图片的布局方式，需要与容器配合使用。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据具体图片的宽度和高宽确定图片组件的大小。
  

• 定位方式：图片组件的定位方式锁定为相对定位，能够设置顶部、左侧、右侧、底部的距离。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。图片组件默认不提供内外边距。
  

2. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 图片链接：用户能够上传本地图片，或者直接输入图片链接来为图片组件添加具体的图片，增加图片组件后，页面设计将更加生动美观。
  

• 填充方式：图片在容器中是否进行拉伸或缩放，可以选择填充、适应、剪裁和保留原比例，可根据具体的需求选择填充方式。
  

• 可否预览：有可预览和不可预览两种选项，应该根据实际情况灵活选择具体的选项。
  

属性配置-扩展属性：图片组件暂无扩展设置。

3. 交互编排：图片可设置点击事件，通过设置点击事件动作实现交互。
   

幻灯片

  幻灯片可以自动播放一组图片，主要应用于需要展示多张图片的页面，具有广告宣传、特别产品促销、精彩瞬间展示等功能。常用于企业主页、活动页、新闻咨询页等页面。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内容的高宽确定组件的大小。水平溢出可选择隐藏或滚动，但当宽度设为自适应水平溢出可能失效。垂直溢出可选择隐藏或滚动，但当高度设为自适应垂直溢出可能失效。
  

• 定位方式：锁定为相对定位，通过设定至顶部、左侧、右侧、底部的距离控制其位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

2. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 排列方向：可以调整幻灯片组件的排列方向为水平或者竖直，当排列方向设置为水平时，幻灯片将会横向切换，当排列方向设置为竖直时，幻灯片将会纵向切换。
  

• 循环播放：有启用和禁用自动播放两种选择，当选择启用循环播放时，能够设置播放间隔，默认为3000毫秒。
  

• 指示器显隐：可以选择切换点控件是否显示，当设置为显示控件位置时，可以设置控件背景颜色和控件选中颜色。
  

属性配置-扩展属性

• 数据设置：可以为幻灯片添加数据或者删除数据，幻灯片的数据实际上就是图片，所以需要在添加数据的同时需要输入图片链接。
  

3. 交互编排：幻灯片组件暂无事件编排。

通知栏

  通知栏可以在有消息提示时将消息在页面广播通知。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内容的高宽确定组件的大小。水平溢出可选择隐藏或滚动，但当宽度设为自适应水平溢出可能失效。垂直溢出可选择隐藏或滚动，但当高度设为自适应垂直溢出可能失效。
  

• 定位方式：锁定为相对定位，通过设定至顶部、左侧、右侧、底部的距离控制其位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。

2. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 模式：可以调整通知栏组件的模式，可以选择可关闭、链接和默认，可关闭即通知栏可以关闭，链接模式时点击通知栏可以前往该消息页面。
  

• 通知滚动：开启后消息可在页面滚动通知，能够设置滚动速度，默认为3000毫秒。
  

• 内容：通知内容。
  

• 背景颜色：通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式来改变。
  

• 文案颜色：通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式选择文案颜色。
  

• 文案字体：文案字体大小。
  

属性配置-扩展属性：通知栏暂无扩展设置。

3. 事件编排：通知栏暂无事件编排。

搜索框

  搜索框提供了可查询信息的提示框。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内容的高宽确定组件的大小。水平溢出可选择隐藏或滚动，但当宽度设为自适应水平溢出可能失效。垂直溢出可选择隐藏或滚动，但当高度设为自适应垂直溢出可能失效。
  

• 定位方式：可选择相对定位或绝对定位，通过设定至顶部、左侧、右侧、底部的距离控制其位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

2. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 边框形状：设置搜索框四角的形状，可以选择圆形或方形。
  

• 背景颜色：通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式来改变。
  

• 内部颜色：通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式来改变。
  

• 文本对齐：选择文本的对齐方式。
  

• 前置文字：在搜索框前的提示文字。
  

• 提示文字：搜索框未输入内容时显示的文字，输入文字后会消失。
  

• 显示搜索：是否在搜索框后显示搜索按钮，设置其显示后可以自己设置搜索文字与文字颜色。
  

• 搜索文字：介绍搜索框的文字。
  

• 文字颜色：通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式来改变。
  

• 可否清除：是否在搜索框末尾开启一键清除按钮。
  

• 是否禁用：开启后该搜索框不能再使用。
  

属性配置-扩展属性：搜索框暂无扩展设置。

3. 事件编排：图片可设置点击事件，通过设置搜索事件动作实现交互。
   

分割线

  分割线是一条可以调整宽度的线，可以分隔开两部分的内容，增强页面的可读性。

1. 样式配置
   样式配置-布局样式

• 宽度：确定组件在布局中的大小。可选择px值、百分比。水平溢出可选择隐藏或滚动，但当宽度设为自适应水平溢出可能失效。垂直溢出可选择隐藏或滚动，但当高度设为自适应垂直溢出可能失效。
  

• 定位方式：锁定为相对定位，通过设定至顶部、左侧、右侧、底部的距离控制其位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。分割线默认不提供的内外边距。
  

          样式配置-文字样式

• 字体大小：可以设置组件内的文字的字体大小。
  

• 字体颜色：字体颜色通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式来改变。
  

• 字体粗细：有常规、较粗和加粗三种选项，根据实际情况选择。
  

• 字体样式：字体样式可调整黑体、楷体和幼圆三种字体。
  

1. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 线条模式：可以选择实线、虚线或点线，以实现不同的分割效果。
  

• 线条颜色：通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式来改变分割线的颜色。
  

• 文案类型：可选择文案或者图标，并能够在下方输入框输入文案值。
  

• 文案位置：可选择左边、中间和右边。
  

• 文案颜色：通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式来改变文案的颜色。
  

• 文案字体：在输入框输入字体大小即可。
  

属性配置-扩展属性：分割线暂无扩展设置。

3. 事件编排：分割线暂无事件编排。

导航栏

  导航栏是页面顶部显示该页面标题内容的栏目，有返回按钮，可以返回上页。

1. 样式配置
   样式配置-布局样式

• 宽度：确定组件在布局中的大小。可选择px值、百分比。水平溢出可选择隐藏或滚动，但当宽度设为自适应水平溢出可能失效。垂直溢出可选择隐藏或滚动，但当高度设为自适应垂直溢出可能失效。
  

• 定位方式：锁定为相对定位，通过设定至顶部、左侧、右侧、底部的距离控制其位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

2. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 标题内容：该页面的标题名称。
  

• 标题大小：标题文字的大小。
  

• 标题颜色：通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式来改变标题的颜色。
  

• 左侧文案：即左侧按钮的文案。
  

• 左侧文案大小：左侧文案文字的大小。
  

• 左侧文案颜色：通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式来改变文案的颜色。
  

• 右侧文案：即右侧按钮的文案。
  

• 右侧文案大小：右侧文案文字的大小。
  

• 右侧文案颜色：通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式来改变文案的颜色。
  

• 导航背景颜色：通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式来改变导航栏背景的颜色。
  

• 左侧箭头：左侧箭头图标是否要显示。
  

• 下边框：控制导航栏下边框是否要显示。
  

属性配置-扩展属性：导航栏暂无扩展设置。

3. 交互编排：导航栏可设置点击事件，通过设置点击事件动作实现交互。
   

二维码

  提供了一个展示二维码的框架。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件在布局中的大小。可选择px值、百分比和自适应。水平溢出可选择隐藏或滚动，但当宽度设为自适应水平溢出可能失效。垂直溢出可选择隐藏或滚动，但当高度设为自适应垂直溢出可能失效。
  

• 定位方式：可以选择相对定位与绝对定位，通过设定至顶部、左侧、右侧、底部的距离控制其位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

2. 属性配置
   属性配置-原生属性
   

• 组件别名：命名组件，便于页面管理。
  

• 组件尺寸：二维码的大小，可以在提供的五种尺寸中选择。
  

• 静态地址：静态二维码图片的地址，可以上传本地或输入网址。
  

• 可否预览：设置二维码图片是否可预览。
  

属性配置-扩展属性：二维码暂无扩展设置。

3. 交互编排：二维码暂无事件编排。

空状态

  空状态是可以设置文案的图片，一般用作图片提示。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据组件内容的高宽确定组件的大小。水平溢出可选择隐藏或滚动，但当宽度设为自适应水平溢出可能失效。垂直溢出可选择隐藏或滚动，但当高度设为自适应垂直溢出可能失效。
  

• 定位方式：可选相对定位或绝对定位，通过设定至顶部、左侧、右侧、底部的距离控制其位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

2. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 占位图片：可以输入图片链接或者上传本地图片来为组件添加图片。
  

• 图片大小：单位为px，直接在输入框输入数字即可调整图片大小。
  

• 描述文案：可以通过输入文字的方式为组件添加文字形式的描述文案。
  

属性配置-扩展属性：空状态暂无扩展设置。

3. 交互编排：空状态暂无事件编排。

二维地图

  二维地图组件是一种地图组件，通常用于以平面图的形式展示地理空间信息，如行政区划、道路、建筑物等，并支持缩放、图层树、定位、测量等操作。应用场景非产广泛，常用于出行、外业调查、地图审图等场景。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的高宽确定容器的大小。
  

• 定位方式：锁定为相对定位。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

1. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 底图显隐：可选择底图的显示或隐藏。可选择底图的来源：天地图、百度地图、高德地图。以及可输入底图密钥。
  

• 默认中心：二维地图中心的经纬度坐标。
  

• 默认缩放、最小缩放和最大缩放：地图缩放等级共有21个，默认缩放指打开页面时地图默认显示的缩放等级，最小缩放和最大缩放规定了地图在放大缩小时允许的缩放程度。
  

• 坐标系：下拉框选择地图坐标系，可选择WGS84和CGCS2000坐标系。
  

• 比例尺：可选择该组件在地图上显示或隐藏，也可修改组件到地图左上角的距离百分比。
  

• 操作按钮：具有开始绘制、结束绘制、修改绘制、切换图层、我的位置五个操作功能。点击文字后的方框可选择该组件在地图上显示或隐藏，也可修改其到地图右上角的距离百分比。
  

3. 交互编排：二维地图可设置绘制结束事件，通过设置绘制结束点击事件动作实现交互。
   

环形进度条

  环形进度条是一种显示进度的图形界面元素，它以圆环的形式展示进度的百分比

1. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 当前进度：当前进度占100的比例，最大值为100。
  

• 圆环直径：圆环的直径，决定了组件的大小。
  

• 进度条颜色：通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式来改变进度条的颜色。
  

• 轨道颜色：通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式来改变轨道的颜色。
  

• 填充颜色：通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式来改变环形内部填充的颜色。
  

• 环形宽度：进度条的宽度。
  

• 顺逆时针：选择进度条的方向。
  

• 字体大小：进度条中间文字的大小。
  

• 字体颜色：通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式来改变字体的颜色。
  

  属性配置-扩展属性：环形进度条暂无扩展设置。

2. 交互编排：环形进度条暂无事件编排。

横向进度条

  横向进度条是一种显示进度的图形界面元素，它以横轴的形式展示进度的百分比。

1. 样式配置
   样式配置-布局样式

• 定位方式：可选相对定位和绝对定位，能够设置顶部、左侧、右侧、底部的距离。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

2. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 进度百分比：当前进度占100的比例，最大值为100。
  

• 进度条宽度：整个进度条的宽度，决定了组件的大小，可选单位为百分比和px。
  

• 进度条粗细：整个进度条的粗度，单位为px。
  

• 进度条颜色：通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式来改变进度条的颜色。
  

• 轨道颜色：通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式来改变轨道的颜色。
  

• 文字颜色：通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式来改变字体的颜色。
  

• 文字背景色：通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式来改变字体背景的颜色。
  

• 显示文字：确定进度条是否要显示文字。
  

• 文字类型：进度条中文字的类型，可选百分比与自定义，选择自定义时需自己输入显示的内容。
  

  属性配置-扩展属性：横向进度条暂无扩展设置。

3. 事件编排：横向进度条暂无事件编排。

标记

  标记组件由一个按钮和按钮右上方的数字标记组成。可以修改标记以及按钮的样式。常用于需要展示数字的场景。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的高宽确定容器的大小。
  

• 定位方式：默认为绝对定位，可选相对定位或绝对定位。通过设定至顶部、左侧、右侧、底部的距离控制其位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

1. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 尺寸大小：标记的尺寸大小。
  

• 字体大小：标记中文字的大小。
  

• 标记值：标记中的值。
  

• 最大值：标记中数字的最大值。
  

• 背景颜色：通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式来改变标记的颜色。
  

• 标记样式：可在默认选项和圆点选项之间切换。
  

  属性配置-扩展属性：标记暂无扩展属性。

3. 事件编排：标记暂无事件编排。

下拉筛选框

  下拉筛选框由一个或多个筛选框组成，是常用的交互组件，便于用户选出一个或多个筛选条件。

1. 样式配置
   样式配置-布局样式

• 高度：确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的高宽确定容器的大小。
  

• 定位方式：默认为相对定位，可选相对定位或绝对定位。通过设定至顶部、左侧、右侧、底部的距离控制其位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

2. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 背景颜色：通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式来改变下拉筛选框的背景颜色。
  

• 有无阴影：可选择下拉筛选框是否有阴影。
  

• 图标颜色：通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式来改变图标颜色。
  

• 选中颜色：通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式来改变选中按钮的颜色。
  

• 层级：当多个组件放置距离过近时，可能会出现筛选框一半选项未被遮住的情况，此时可以调小层级，反之，则调大层级防止下拉框被覆盖。
  

• 动画时长：下拉框下拉与收回的动画时长。
  

• 是否遮罩：打开下拉框后对页面是否有遮罩效果。
  

  属性配置-扩展属性

• 下拉子项设置：设置下拉框的子项，可以新增或删减子项，也可设置子项的数据。
  

3. 事件编排：下拉筛选框暂无事件编排。

步骤条

  步骤条是描述阶段进度的组件，采用横轴的形式展示阶段完成情况。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件在布局中的大小。可选择px值、百分比和自适应，高度一般情况下为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据组件内容的高宽确定组件的大小。
  

• 定位方式：可选相对定位和绝对定位，通过设定至顶部、左侧、右侧、底部的距离控制其位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

2. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 激活图标：该步骤正在进行时显示的图标。
  

• 未激活图标：该步骤未完成时显示的图标。
  

• 已完成图标：该步骤完成后显示的图标。
  

• 已完成颜色：通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式来改变完成后节点的颜色。
  

• 未完成颜色：通过手动拖动拾色器、直接输入rgba值或直接输入十六进制值的方式来改变未完成节点的颜色。
  

  属性配置-扩展属性

• 步骤条项设置：可以添加或者删除步骤。
  

1. 事件编排：步骤条可设置点击事件，通过设置点击事件动作实现交互。
   

自定义组件

  自定义组件没有实际的功能，若有浮木云无法实现的功能，则需要自定义组件，充当一个占位符。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件在布局中的大小。可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据组件内容的高宽确定组件的大小。水平溢出可选择隐藏或滚动，但当宽度设为自适应水平溢出可能失效。垂直溢出可选择隐藏或滚动，但当高度设为自适应垂直溢出可能失效。
  

• 定位方式：默认为相对定位，也可选绝对定位。相对定位通过设定至顶部、左侧、右侧、底部的距离控制其位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

1. 属性配置：自定义组件暂无属性配置
   属性配置-扩展属性：自定义组件暂无扩展属性。
   
2. 事件编排：自定义组件暂无事件编排。
   

输入组件

  输入组件一般用于在表单中排版页面，也可单独使用。在表单中使用与单独使用的配置略有不同，即在表单中使用时属性配置会多出表单属性这一模块，且没有样式配置。表单属性已在表单容器中有过详细介绍，在此不过多赘述。以下将介绍输入组件在单独使用时的配置。

输入框

  输入框中可以输入信息展示或作为代输入信息的载体。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整输入框的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

2. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 标签名称：输入框前的标签文字。
  

• 标签对齐：标签文字的对齐方式，可选左边对齐、中间对齐与右边对齐。
  

• 标签宽度：标签的总宽度，单位为px。
  

• 内容对齐：输入内容的对齐方式，可选左边对齐、中间对齐与右边对齐。
  

• 输入类型：确定输入内容的类型，可选文本与数字，不符合类型的内容无法输入。
  

• 提示文字：是输入框未输入文字时展示的信息，在输入内容后会消失。
  

• 最大输入：决定最大输入字数。
  

• 输入提示：在输入框末尾给出输入字数/最大输入字数的提示。
  

• 清空按钮：在输入末端加入清空按钮，可一键清空所有输入内容。
  

• 是否禁用：禁用后该输入框不能再输入内容。
  

• 是否只读：开启后输入框内容不允许修改。
  

• 前置图标：在输入框前添加图标，需输入icon图标码。
  

• 后置图标：在输入框后添加图标，需输入icon图标码。
  

属性配置-扩展设置：输入框暂无扩展设置。

3. 交互编排
   输入框可设置数据改变事件，通过设置数据改变事件动作实现交互。
   

文本域

  文本域中可以输入较长信息展示或作为代输入信息的载体。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整文本域的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

2. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 标签名称：文本域前的标签文字。
  

• 标签对齐：标签文字的对齐方式，可选左边对齐、中间对齐与右边对齐。
  

• 标签宽度：标签的总宽度，单位为px。
  

• 内容对齐：文本域内容的对齐方式，可选左边对齐、中间对齐与右边对齐。
  

• 提示文字：文本域未输入文字时展示的信息，在输入内容后会消失。
  

• 可见行高：是文本域在布局时最高可见行高。
  

• 最大输入：决定最大输入字数。
  

• 输入提示：在文本域末尾给出输入字数/最大输入字数的提示。
  

• 清空按钮：在输入末端加入清空按钮，可一键清空所有输入内容。
  

• 是否禁用：禁用后该文本域不能再输入内容。
  

• 是否只读：开启后文本域内容不允许修改。
  

属性配置-扩展设置：文本域暂无扩展设置。

3. 交互编排
   文本域可设置数据改变事件，通过设置数据改变事件动作实现交互。
   

单选框

  单选框用于在多个互斥选项中，选出唯一项。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整单选框的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

2. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 形状：选中框的大小，可以选圆形或方形。
  

• 排列方式：选项的排列方向，可选水平或竖直。
  

• 文字大小：决定单选框选项的大小，最小为20px。
  

• 选中颜色：通过手动拖动拾色器、直接输入颜色的rgba值或输入十六进制值的方式改变选项被选中后的颜色。
  

• 是否禁用：禁用后该单选框不能再使用。
  

• 是否只读：开启后单选框选项不允许修改。
  

属性配置-扩展设置

• 单选框选项设置：点击后将打开单选框设置弹窗，可以在此修改单选框选项、为该单选框绑定数据字典或数据模型。修改选项时可以按需求添加或删除标签字段，绑定数据字典或数据模型时需在已有的模型中选择合适的字典或模型。
  

3. 交互编排
   单选框可设置数据改变事件，通过设置数据改变事件动作实现交互。
   

多选框

  多选框用于在多个选项中，选出多项。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整多选框的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

2. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 形状：选中框的大小，可以选圆形或方形。
  

• 排列方式：选项的排列方向，可选水平或竖直。
  

• 文字大小：决定多选框选项的大小，最小为20px。
  

• 选中颜色：通过手动拖动拾色器、直接输入颜色的rgba值或输入十六进制值的方式改变选项被选中后的颜色。
  

• 最大选中：最大选中数量。
  

• 是否禁用：禁用后该多选框不能再使用。
  

• 是否只读：开启后多选框选项不允许修改。
  

属性配置-扩展设置

• 多选框选项设置：点击后将打开多选框设置弹窗，可以在此修改多选框选项、为该多选框绑定数据字典或数据模型。修改选项时可以按需求添加或删除标签字段，绑定数据字典或数据模型时需在已有的模型中选择合适的字典或模型。
  

3. 交互编排：多选框可设置数据改变事件，通过设置数据改变事件动作实现交互。
   

选择框

  选择框用于在多个选项中选择单项，点击后会在页面下方打开一个覆盖层，可选择其中的选项。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，高度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整输入框的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

2. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 提示文字：是选择框未输入文字时展示的信息，在输入内容后会消失。
  

• 标题文字：弹出的选择页面的标题。
  

• 取消文字：选项页弹出后，取消按键的文字
  

• 确认文字：选项页弹出后，确认按键的文字。
  

• 是否禁用：禁用后该输入框不能再输入内容。
  

• 是否只读：开启后输入框内容不允许修改。
  

属性配置-扩展设置

• 下拉框选项设置：点击后将打开下拉框设置弹窗，可以在此修改下拉框选项、为该下拉框绑定数据字典或数据模型。修改选项时可以按需求添加或删除标签字段，绑定数据字典或数据模型时需在已有的模型中选择合适的字典或模型。
  

3. 交互编排：选择框可设置数据改变事件，通过设置数据改变事件动作实现交互。
   

级联选择

  级联选择是一种交互方式，通过用户对一个选项的选择会影响到后续选项的范围和内容，通常用于需要从复杂选项中快速筛选出目标选项的场景，如行政区划。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，高度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整级联选择的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

2. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 标签名称：标签文字的对齐方式，可选左边对齐、中间对齐与右边对齐。
  

• 标签对齐：标签文字的对齐方式，可选左边对齐、中间对齐与右边对齐。
  

• 标签宽度：标签的总宽度，单位为px。
  

• 内容对齐：级联选择框内容的对齐方式，可选左边对齐、中间对齐与右边对齐。
  

• 提示文字：级联选择未选择时展示的信息。
  

• 标题文字：弹出的级联选择页面的标题。
  

• 选中颜色：通过手动拖动拾色器、直接输入颜色的rgba值或输入十六进制值的方式改变选项被选中后的颜色。
  

• 是否禁用：禁用后该级联选择不能再使用。
  

• 是否只读：开启后级联选择内容不允许修改。
  

属性配置-扩展设置

• 级联选择选项设置：点击后可打开弹窗，可以修改级联选择的选项或为级联选项绑定数据模型。在设置级联选择选项时，可以按照需求新增一级数据，或为一个选项新增子集，或删除多余的选项。绑定数据模型时需选择对应的数据模型与字段。
  

3. 交互编排：级联选择可设置数据改变事件，通过设置数据改变事件动作实现交互。
   

日期选择

  日期时间由两个选择框组成，支持选择具体的日期与时间，即年、月、日。

1. 样式配置
   样式配置-布局样式

• 高度和宽度：确定组件的大小，可选择px值、百分比和自适应，高度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整日期选择的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

2. 属性配置
   属性配置-原生属性
   

• 组件名称：为组件命名，方便页面管理。
  

• 标签名称：标签文字的对齐方式，可选左边对齐、中间对齐与右边对齐。
  

• 标签对齐：标签文字的对齐方式，可选左边对齐、中间对齐与右边对齐。
  

• 标签宽度：标签的总宽度，单位为px。
  

• 内容对齐：级联选择框内容的对齐方式，可选左边对齐、中间对齐与右边对齐。
  

• 时间类型：可以选择该选择框的选择类型，包括年月日、年月、月日、年、月。
  

• 最小时间：可选择的最小日期。
  

• 最大时间：可选择的最大日期。
  

• 提示文字：日期时间未选择时展示的信息。
  

• 标题文字：弹出的日期选择页面的标题。
  

• 取消文字：选项页弹出后，取消按键的文字
  

• 确认文字：选项页弹出后，确认按键的文字。
  

• 是否禁用：禁用后该日期时间不能再使用。
  

• 是否只读：开启后日期时间内容不允许修改。
  

属性配置-扩展设置：日期选择暂无扩展设置。

3. 交互编排

• 日期选择可设置数据改变事件，通过设置数据改变事件动作实现日期选择的交互。
  

时间选择

  时间选择支持选择具体的时间，即时、分、秒。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，高度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整时间选择的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

2. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 标签名称：时间选择框前的标签文字。
  

• 标签对齐：标签文字的对齐方式，可选左边对齐、中间对齐与右边对齐。
  

• 标签宽度：标签的总宽度，单位为px。
  

• 内容对齐：时间选择框内容的对齐方式，可选左边对齐、中间对齐与右边对齐。
  

• 时间类型：所选时间的类型，可以选择时分秒、时分、分秒、时、分。
  

• 最小时间：可选择的最小时间。
  

• 最大时间：可选择的最大时间。
  

• 提示文字：时间选择未选择时展示的信息。
  

• 标题文字：弹出的时间选择页面的标题。
  

• 取消文字：选项页弹出后，取消按键的文字。
  

• 确认文字：选项页弹出后，确认按键的文字。
  

• 是否禁用：禁用后该时间选择不能再使用。
  

• 是否只读：开启后时间选择内容不允许修改。
  

属性配置-扩展设置：时间选择暂无扩展设置。

3. 交互编排：时间选择暂无事件编排。

文件上传

  文件上传是指将本地手机上的文件传输到远程服务器上，并储存在其中。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整时间选择的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

2. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 上传模式：确定上传的模式为默认还是按钮。当选模式为按钮时，还需对按钮的名称、形状等进行设置。
  

• 按钮名称：按钮的名称，可自主命名。
  

• 按钮尺寸：下拉框选择文件上传按钮的尺寸大小。
  

• 按钮类型：选择不同类型按钮，可修改按钮的颜色样式。
  

• 按钮模式：可选择朴素或者默认。
  

• 按钮圆角：可选择圆角或默认，来确定按钮的四个角是圆形还是直角。
  

• 图标类名：按钮中图标的类名。
  

• 图标位置：按钮中图标的位置，可设置在文字左或文字右。
  

• 按钮颜色：通过手动拖动拾色器、直接输入颜色的rgba值或输入十六进制值的方式改变按钮的颜色。
  

• 上传数量：上传文件个数的上限。
  

• 文件类型：允许用户上传的文件类型。
  

• 文件大小：允许每一个文件上传的最大大小。
  

• 是否禁用：禁用后该时间选择不能再使用。
  

• 是否只读：开启后时间选择内容不允许修改。
  

属性配置-扩展设置：文件上传暂无扩展设置。

3. 交互编排：文件上传暂无事件编排。
   

图片上传

  图片上传是指将本地手机上的图片传输到远程服务器上，并储存在其中。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，高度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整时间选择的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

2. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 上传模式：确定上传的模式为上传、拍照还是按钮。当选模式为按钮时，还需对按钮的名称、形状等进行设置。
  

• 按钮名称：按钮的名称，可自主命名。
  

• 按钮尺寸：下拉框选择文件上传按钮的尺寸大小。
  

• 按钮类型：选择不同类型按钮，可修改按钮的颜色样式。
  

• 按钮模式：可选择朴素或者默认。
  

• 按钮圆角：可选择圆角或默认，来确定按钮的四个角是圆形还是直角。
  

• 图标类名：按钮中图标的类名。
  

• 图标位置：按钮中图标的位置，可设置在文字左或文字右。
  

• 按钮颜色：通过手动拖动拾色器、直接输入颜色的rgba值或输入十六进制值的方式改变按钮的颜色。
  

• 上传数量：上传图片个数的上限。
  

• 图片类型：允许用户上传的图片类型。
  

• 图片大小：允许每一个图片上传的最大大小。
  

• 是否禁用：禁用后该图片上传不能再使用。
  

• 是否只读：开启后图片上传内容不允许修改。
  

属性配置-扩展设置：图片上传暂无扩展设置。

3. 交互编排：图片上传暂无事件编排。
   

步进器

  步进器是可以按照规律递增计数的组件。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整时间选择的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

2. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 输入类型：计数的类型，可以选择小数或整数。
  

• 步长：步进器技术的幅度。
  

最小数字：步进器计数的最小数字。

• 最大数字：步进器计数的最大数字。
  

• 内部宽度：计数部分的宽度，单位为px。
  

• 内部高度：计数部分的高度，单位为px。
  

• 样式风格：步进器按钮的样式，可选方形或圆形。
  

• 是否禁用：禁用后该步进器不能再使用。
  

• 是否只读：开启后该步进器内容不允许修改。
  

属性配置-扩展设置：步进器暂无扩展设置。

3. 交互编排：步进器可设置数据改变事件，通过设置数据改变事件动作实现交互。
   

开关

  开关是一种界面控件，通常表示一个二选一的状态，用户通过开关切换状态，常用于开启或关闭一个功能或选项。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整开关的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

2. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。

• 尺寸大小：组件的大小，单位为px。
  

• 打开颜色：通过手动拖动拾色器、直接输入颜色的rgba值或输入十六进制值的方式改变打开时组件的颜色。
  

• 关闭颜色：通过手动拖动拾色器、直接输入颜色的rgba值或输入十六进制值的方式改变关闭时组件的颜色。
  

• 是否禁用：禁用后该开关不能再使用。
  

• 是否只读：开启后开关内容不允许修改。
  

属性配置-扩展设置：开关暂无扩展设置。

3. 交互编排：开关可设置数据改变事件，通过设置数据改变事件动作实现交互。
   

滑块

  滑块是一种界面控件，通过拖动滑块可以实现对数值的快速调整，通常用于对数值大小的设定，如音量大小等。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整组件的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

2. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 步长：指滑块每滑动一步的数值大小。
  

• 最小值和最大值：分别指滑块左端的初始值和滑块右端的结束值。
  

• 线条粗细：滑块线条的粗细，单位为px。
  

• 按钮大小：滑块上按钮的大小，单位为px。
  

• 显示值：是否显示按钮所在处滑动条的值。
  

• 打开颜色：通过手动拖动拾色器、直接输入颜色的rgba值或输入十六进制值的方式改变打开处组件的颜色。
  

• 关闭颜色：通过手动拖动拾色器、直接输入颜色的rgba值或输入十六进制值的方式改变关闭处组件的颜色。
  

• 是否禁用：禁用后该组件不能再使用。
  

• 是否只读：开启后该组件内容不允许修改。
  

属性配置-扩展设置：滑块暂无扩展设置。

3. 交互编排：滑块可设置数据改变事件，通过设置数据改变事件动作实现交互。
   

评分

  评分是一种界面控件，通过点亮星星表示分值的大小，可以反应用户的满意度。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整组件的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。

2. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 尺寸大小：指组件的大小，单位为px。
  

• 允许半选：是否允许打出0.5分。
  

• 评分数量：用来评分的星星的数量。
  

• 图标颜色：通过手动拖动拾色器、直接输入颜色的rgba值或输入十六进制值的方式改变图标本身的颜色。
  

• 选中颜色：通过手动拖动拾色器、直接输入颜色的rgba值或输入十六进制值的方式改变选中后图标的颜色。
  

• 是否禁用：禁用后该组件不能再使用。
  

• 是否只读：开启后该组件内容不允许修改。
  

属性配置-扩展设置：评分暂无扩展设置。

3. 交互编排：评分暂无事件编排。
   

行政区选择

  行政区划选择可对地区进行级联选择，可以让用户的区域选择。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整组件的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

2. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 标签名称：设置标签的名称
  

• 标签对齐：设置标签对齐的方式市左边、中间或是右边。
  

• 标签宽度：设置标签的宽度。
  

• 内容对齐：设置内容对齐的方式市左边、中间或是右边。
  

• 选择类型：选择行政区的最低类型，可选择的有省、市、区。
  

• 提示文字：设置提示文字，提示文字会在用户输入文字后消失。
  

• 标题文字：设置标签颜色。
  

• 选中颜色：选择选择行政区后的颜色。
  

• 是否禁用：开启后该组件不允许使用。
  

• 是否只读：开启后该组件内容不允许修改。
  

属性配置-扩展设置：行政区划选择暂无扩展设置。

3. 交互编排：行政区划选择可设置数据改变事件，通过设置数据改变事件动作实现交互。
   

图表组件

  图表组件是一种可视化控件，帮助用户更好地理解和分析数据。常用于数据分析、商务报表等场景。浮木云为其每个图表组件都提供了丰富的配置项。

基础柱状

  基础柱状图是一种图表组件，通过竖直或水平方向上的矩形条表示不同类别的数值，可清晰展示数据之间的相对大小，适用于数据展示和对比等分析场景。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，高度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 布局方式：分为内联布局与块级布局，与对齐方式复合使用。联布局指下一个组件与输入框并排排列，此时可选择对齐方式，使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。块级布局指输入框单独占据一行。
  

• 定位方式：可选择相对定位或绝对定位，通过设置距顶部、左侧、右侧、底部的距离调整输入框的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

2. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 横轴标题和纵轴标题：在输入框中填写单位，柱状图的横轴和纵轴则会显示所填标题内容。
  

• 轴字字号和标题颜色：用于修改标题的字体大小以及标题字体颜色，字体颜色可通过点击调色板或手动输入颜色数值的方式修改。
  

• 图边距：可调整柱状图距离该组件上下左右边缘的百分比距离。
  

  属性配置-图表属性

• 图例控件：启用和禁用可调整图例是否可见。启用图例后可调整图例方向、对齐方式、图例位置、图例上距、图例左距、图例字体大小和字体颜色。
  

• 标题控件：显示和隐藏可调整标题是否可见。显示标题后可调整标题文字、大小、颜色、标题上距和标题左距。
  

• 提示控件：启用后，当点击柱状条时，会有小文本框显示该柱状条信息。
  

• 工具控件：启用后，图表上出现控件图标，点击展开全屏、下载PNG文件、下载PDF文件、下载JPEG文件四个功能。
  

  属性配置-扩展属性

• 横轴数据设置：点击后弹出弹窗，可修改横轴数据个数、排列方式以及横轴数据名称。
  

• 模拟数据设置：点击后弹出对话框，可添加、导入、导出和删除数据，还能够修改柱状图的数值和颜色。
  

3. 交互编排：基础柱状图暂无事件编排。

基础条状

  与基础柱状相同，只是图表是横向的。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，高度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 布局方式：分为内联布局与块级布局，与对齐方式复合使用。内联布局指下一个组件与输入框并排排列，此时可选择对齐方式，使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。块级布局指输入框单独占据一行。
  

• 定位方式：可选择相对定位或绝对定位，通过设置距顶部、左侧、右侧、底部的距离调整输入框的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

2. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 横轴标题和纵轴标题：在输入框中填写单位，条状图的横轴和纵轴则会显示所填标题内容。
  

• 轴字字号和标题颜色：用于修改标题的字体大小以及单位字体颜色，字体颜色可通过点击调色板或手动输入颜色数值的方式修改。
  

• 图边距：可调整条状图距离该组件上下左右边缘的百分比距离。
  

  属性配置-图表属性

• 图例控件：启用和禁用可调整图例是否可见。启用图例后可调整图例方向、对齐方式、图例位置、图例上距、图例左距、图例字体大小和图例字体颜色。
  

• 标题控件：显示和隐藏可调整标题是否可见。显示标题后可调整标题文字、大小、颜色、标题上距和标题左距。
  

• 提示控件：启用后，当点击柱状条时，会有小文本框显示该柱状条信息。
  

• 工具控件：启用后，图表上出现控件图标，点击展开全屏、下载PNG文件、下载PDF文件、下载JPEG文件四个功能。
  

  属性配置-扩展属性

• 横轴数据设置：点击后弹出弹窗，可修改纵轴数据个数、排列方式以及纵轴数据名称。
  

• 模拟数据设置：点击后弹出对话框，可添加、导入、导出和删除数据，还能够修改条状图的数值和颜色。
  

3. 交互编排：基础条状图暂无事件编排。

基础折线

  基础折线图是一种图表组件，通过将一系列点用线段连接而成，用于表示一段时间内数据的波动或趋势，常用于表示趋势、变化和周期等时间相关的数据，同时便于对比多个数据系列。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，高度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 布局方式：分为内联布局与块级布局，与对齐方式复合使用。内联布局指下一个组件与输入框并排排列，此时可选择对齐方式，使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。块级布局指输入框单独占据一行。
  

• 定位方式：可选择相对定位或绝对定位，通过设置距顶部、左侧、右侧、底部的距离调整输入框的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

2. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 平滑折线：选择是则将折线平滑成曲线。
  

• 横轴标题和纵轴标题：在输入框中填写单位，折线图的横轴和纵轴则会显示所填标题内容。
  

• 标题字号和标题颜色：用于修改标题的字体大小以及单位字体颜色，字体颜色可通过点击调色板或手动输入颜色数值的方式修改。
  

• 图边距：可调整折线图距离该组件上下左右边缘的百分比距离。
  

  属性配置-图表属性

• 图例控件：启用和禁用可调整图例是否可见。启用图例后可调整图例方向、对其方向、图例位置、图例上距、图例左距、图例字体大小和图例字体颜色。
  

• 标题控件：显示和隐藏可调整标题是否可见。显示标题后可调整标题文字、大小、颜色、标题上距和标题左距。
  

• 提示控件：启用后，当点击折线时，会有小文本框显示该折线点的信息。
  

• 工具控件：启用后图表上出现控件图标，点击展开全屏、下载PNG文件、下载PDF文件、下载JPEG文件四个功能。
  

  属性配置-扩展属性

• 横轴数据设置：点击后弹出弹窗，可修改横轴数据个数、排列方式以及横轴数据名称。
  

• 模拟数据设置：点击后弹出对话框，可添加、导入、导出和删除数据，还能够修改折线的数值和颜色。
  

3. 交互编排：基础折线暂无事件编排。

柱状折线

  柱状折线图是一种图表组件，将柱状图和折线图结合起来，同时呈现数据的数量和趋势。柱状图通常用来表示数据的数量，而折线图则用来展示数据的趋势。它可以直观地展示数据的数量和变化趋势，适用于对比不同数据系列的数量和趋势的分析和展示。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，高度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 布局方式：分为内联布局与块级布局，与对齐方式复合使用。内联布局指下一个组件与输入框并排排列，此时可选择对齐方式，使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。块级布局指输入框单独占据一行。
  

• 定位方式：可选择相对定位或绝对定位，通过设置距顶部、左侧、右侧、底部的距离调整输入框的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

2. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 横轴标题和纵轴标题：在输入框中填写单位，柱状折线图的横轴和纵轴则会显示所填标题内容。
  

• 标题字号和标题颜色：用于修改标题的字体大小以及单位字体颜色，字体颜色可通过点击调色板或手动输入颜色数值的方式修改。
  

• 图边距：可调整柱状折线图距离该组件上下左右边缘的百分比距离。
  

  属性配置-图表属性

• 图例控件：启用和禁用可调整图例是否可见。启用图例后可调整图例方向、对齐方式、图例位置、图例上距、图例左距、图例字体大小和图例字体颜色。
  

• 标题控件：显示和隐藏可调整标题是否可见。显示标题后可调整标题文字、大小、颜色、标题上距和标题左距。
  

• 提示控件：启用后，当点击柱状折线图时，会有小文本框显示此处的信息。
  

• 工具控件：启用后图表上出现控件图标，点击展开全屏、下载PNG文件、下载PDF文件、下载JPEG文件四个功能。
  

  属性配置-扩展属性

• 横轴数据设置：点击后弹出弹窗，可修改横轴数据个数、排列方式以及横轴数据名称。
  

• 模拟数据设置：点击后弹出对话框，可添加、导入、导出和删除数据，还能够修改柱条和折线的数值和颜色。
  

3. 交互编排：柱状折线图暂无事件编排。

基础面积

  基础面积图是一种图表组件，通过填充坐标轴与折线之间的区域来表示数据的数量，并用平滑的边缘线方便对比多个数据系列的趋势。它可以展示数据数量的变化趋势，也可以用于比较不同数据系列之间数量的差异。常用于展示数据随时间而变化的趋势。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，高度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 布局方式：分为内联布局与块级布局，与对齐方式复合使用。内联布局指下一个组件与输入框并排排列，此时可选择对齐方式，使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。块级布局指输入框单独占据一行。
  

• 定位方式：可选择相对定位或绝对定位，通过设置距顶部、左侧、右侧、底部的距离调整输入框的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

2. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 平滑折线：选择是则将折线平滑成曲线。
  

• 横轴标题和纵轴标题：在输入框中填写单位，基础面积图的横轴和纵轴则会显示所填标题内容。
  

• 标题字号和标题颜色：用于修改标题的字体大小以及单位字体颜色，字体颜色可通过点击调色板或手动输入颜色数值的方式修改。
  

• 图边距：可调整基础面积图距离该组件上下左右边缘的百分比距离。
  

  属性配置-图表属性

• 图例控件：启用和禁用可调整图例是否可见。启用图例后可调整图例方向、对齐方式、图例位置、图例上距、图例左距、图例字体大小和图例字体颜色。
  

• 标题控件：显示和隐藏可调整标题是否可见。显示标题后可调整标题文字、大小、颜色、标题上距和标题左距。
  

• 提示控件：启用后，当鼠标点击折线时，会有小文本框显示此处的信息。
  

• 工具控件：启用后图表上出现控件图标，点击展开全屏、下载PNG文件、下载PDF文件、下载JPEG文件四个功能。
  

  属性配置-扩展属性

• 横轴数据设置：点击后弹出弹窗，可修改横轴数据个数、排列方式以及横轴数据名称。
  

• 模拟数据设置：点击后弹出对话框，可添加、导入、导出和删除数据，还能够修改折线的数值和颜色。
  

3. 交互编排：基础面积暂无事件编排。

基础饼图

  基础饼图是一种图表组件，通过将数据按比例划分成一个个扇形，表示不同部分在总体中所占比例，而一个圆形的饼图总共有100%的数值。常用于显示数据中不同部分的数量比例，可对比不同类别数据的占比，也可以展示数据的相对大小。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，高度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 布局方式：分为内联布局与块级布局，与对齐方式复合使用。内联布局指下一个组件与输入框并排排列，此时可选择对齐方式，使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。块级布局指输入框单独占据一行。
  

• 定位方式：可选择相对定位或绝对定位，通过设置距顶部、左侧、右侧、底部的距离调整输入框的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

2. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 内环大小和外环大小：分别指环形的内边和外边到圆心的百分比距离。
  

• 有无圆角：指饼图不同板块连接处的样式是圆角还是普通邻接。
  

• 标签显隐：饼图每个板块的标签信息是否直接在图上显示。
  

• 标签位置：标签信息离饼图的距离大小，单位为px。
  

• 标签字号和标签颜色：用于修改标签的字体大小以及标签字体颜色，字体颜色可通过点击调色板或手动输入颜色数值的方式修改。
  

• 数据统计：可显示或隐藏环图所有数据量的总计，表示为汉字“总数”和总和数字两部分。
  

• 总数字号和总数颜色：可修改“总数”这一汉字的字体大小和字体颜色。
  

• 数据字号和数据颜色：可修改总和数字的大小和颜色。
  

• 水平对齐和垂直对齐：下拉框选择居左、居中或居右的对齐方式。
  

• 水平偏移和垂直偏移：在水平对齐和垂直对齐的基础上，移动给定px数值的距离。
  

• 图左边距和图上边距：可调整环形图距离该组件上边缘和左边缘的百分比距离。
  

  属性配置-图表属性

• 图例控件：启用和禁用可调整图例是否可见。启用图例后可调整图例方向、对齐方式、图例位置、图例上距、图例左距、图例字体大小和图例字体颜色。
  

• 标题控件：显示和隐藏可调整标题是否可见。显示标题后可调整标题文字、大小、颜色、标题上距和标题左距。
  

• 提示控件：启用后，当点击饼图上时，会有小文本框显示此处的信息。
  

• 工具控件：启用后图表上出现控件图标，点击展开全屏、下载PNG文件、下载PDF文件、下载JPEG文件四个功能。
  

  属性配置-扩展属性

• 模拟数据设置：点击后弹出对话框，可添加、导入、导出和删除数据，还可修改饼图的数值和颜色。
  

3. 交互编排:基础饼图暂无事件编排。

玫瑰图

  玫瑰图是一种基于极坐标系的饼图变体，通过将饼图的半径由等分改为非等分来表示不同的数值大小，常用于显示数据的走向和变化规律，尤其适用于周期性的数据分析。它呈现出圆心到边缘的扇形份额、中心点径向上颜色值的变化。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，高度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 布局方式：分为内联布局与块级布局，与对齐方式复合使用。内联布局指下一个组件与输入框并排排列，此时可选择对齐方式，使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。块级布局指输入框单独占据一行。
  

• 定位方式：可选择相对定位或绝对定位，通过设置距顶部、左侧、右侧、底部的距离调整输入框的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

2. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 内环大小和外环大小：分别指玫瑰图的内边和外边到圆心的百分比距离。
  

• 有无圆角：指不同板块连接处的样式是圆角还是普通邻接。
  

• 标签显隐：玫瑰图每个板块的标签信息是否直接在图上显示。
  

• 标签位置：标签信息离玫瑰图的距离大小，单位为px。
  

• 标签字号和标签颜色：用于修改标签的字体大小以及标签字体颜色，字体颜色可通过点击调色板或手动输入颜色数值的方式修改。
  

• 数据统计：可显示或隐藏玫瑰图所有数据量的总计，表示为汉字“总数”和总和数字两部分。
  

• 总数字号和总数颜色：可修改“总数”这一汉字的字体大小和字体颜色。
  

• 数据字号和数据颜色：可修改总和数字的大小和颜色。
  

• 水平对齐和垂直对齐：下拉框选择居左、居中或居右的对齐方式。
  

• 水平偏移和垂直偏移：在水平对齐和垂直对齐的基础上，移动给定px数值的距离。
  

• 图左边距和图上边距：可调整玫瑰图距离该组件上边缘和左边缘的百分比距离。
  

  属性配置-图表属性

• 图例控件：启用和禁用可调整图例是否可见。启用图例后可调整图例方向、对齐方式、图例位置、图例上距、图例左距、图例字体大小和图例字体颜色。
  

• 标题控件：显示和隐藏可调整标题是否可见。显示标题后可调整标题文字、大小、颜色、标题上距和标题左距。
  

• 提示控件：启用后，当点击玫瑰图时，会有小文本框显示此处的信息。
  

• 工具控件：启用后图表上出现控件图标，点击展开全屏、下载PNG文件、下载PDF文件、下载JPEG文件四个功能。
  

  属性配置-扩展属性

• 模拟数据设置：点击后弹出对话框，可添加、导入、导出和删除数据，还可修改玫瑰图的数值和颜色。
  

3. 交互编排：玫瑰图暂无事件编排。

雷达图

  雷达图是一种基于极坐标系的图表组件，通过将数据沿着不同方向绘制成多边形，以显示不同项的相对大小和比例，通常用于从多个方面对比不同指标、不同选项、不同评估对象的综合性指数或特征。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，高度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 布局方式：分为内联布局与块级布局，与对齐方式复合使用。内联布局指下一个组件与输入框并排排列，此时可选择对齐方式，使两个组件按照顶部对齐、居中对齐或底部对齐的方式并排。块级布局指输入框单独占据一行。
  

• 定位方式：可选择相对定位或绝对定位，通过设置距顶部、左侧、右侧、底部的距离调整输入框的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

2. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 图表大小：雷达图占整个组件的百分比大小。
  

• 图表类型：可选择多边形雷达图或圆形雷达图。
  

• 图左边距和图上边距：可调整雷达图距离该组件上边缘和左边缘的百分比距离。
  

  属性配置-图表属性

• 图例控件：启用和禁用可调整图例是否可见。启用图例后可调整图例方向、对齐方式、图例位置、图例上距、图例左距、图例字体大小和图例字体颜色。
  

• 标题控件：显示和隐藏可调整标题是否可见。显示标题后可调整标题文字、大小、颜色、标题上距和标题左距。
  

• 提示控件：启用后，当点击雷达图时，会有小文本框显示此处的信息。
  

• 工具控件：启用后图表上出现控件图标，点击展开全屏、下载PNG文件、下载PDF文件、下载JPEG文件四个功能。
  

  属性配置-扩展属性

• 分类数据设置：点击后弹出弹窗，可修改雷达数据个数、排列方式以及数据名称。
  

• 模拟数据设置：点击后弹出对话框，可添加、导入、导出和删除数据，还可修改雷达图的数值和颜色。
  

3. 事件编排：雷达图暂无事件编排。

高级组件

表单组件

  表单组件是开发中常用的用户交互组件之一，用于收集用户的输入数据。它是一个可以容纳输入组件的容器，在浮木云中的主要用法是用于回显和提交数据，配合输入组件使用，可调整输入组件的布局样式、背景样式等属性。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：控制表单的大小，可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的高宽确定容器的大小。
  

• 水平溢出和垂直溢出：可以选择隐藏和滚动，当表单组件中内容的尺寸超过表单的尺寸时，选择隐藏只能展示表单组件尺寸范围内的内容，选择滚动则可以通过滑动展示所有内容。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

  样式配置-背景样式

• 背景颜色：通过手动拖动拾色器或直接输入颜色的rgba值或十六进制值的方式改变背景颜色。
  

• 背景图片：支持上传图片链接或点击图标从本地选择图片作为容器的背景图片，可以调节图片的大小。
  

• 背景阴影：可选择基础投影和浅色投影。
  

• 边框样式：用于修改盒子边框的样式，可选择实线、点状、双线、虚线。 在设置边框时需与边框颜色、盒子边框搭配使用。
  

• 边框颜色：用于修改盒子边框的颜色，通过手动拖动拾色器或直接输入rgba值或十六进制值的方式改变颜色。
  

• 盒子边框：用于围绕组件的内容和内外边距创建一个可见的边界。盒子边框四角值可让盒子的四个角平滑化，上下左右值可确定盒子边框的粗细。
  

1. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 拖拽提示：显示拖拽左侧组件至表单中的提示。
  

• 标签对齐方式：用于调节表单内部表单组件的标签对齐方式，可选左边、中间、右边。
  

• 文本对齐方式：表单内表单组件文本的对齐方式，可选左边、中间、右边。
  

• 标签宽度：表单内部组件的标签宽度大小。
  

• 是否禁用：选择禁用后表单内部的组件无法继续使用。
  

• 是否只读：选择开启后表单内部的组件内容无法修改。
  

  属性配置-扩展属性

• 生成静态数据：
  

• 自动绑定字段：
  

1. 交互编排：表单组件无事件编排。

列表容器

列表容器中可以放基础组件、输入组件、图表组件等，容器内的组件需与字段进行数据绑定。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，高度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 水平溢出和垂直溢出：可以选择隐藏和滚动，当列表容器中内容的尺寸超过列表的尺寸时，选择隐藏只能展示列表容器尺寸范围内的内容，选择滚动则可以通过滑动展示所有内容。
  

• 定位方式：可选择相对定位或绝对定位，通过设置距顶部、左侧、右侧、底部的距离调整输入框的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

  样式配置-背景样式

• 背景颜色：通过手动拖动拾色器或直接输入颜色的rgba值或十六进制值的方式改变背景颜色。
  

• 背景图片：支持上传图片链接或点击图标从本地选择图片作为容器的背景图片，可以调节图片的大小。
  

• 背景阴影：可选择基础投影和浅色投影。
  

• 边框样式：用于修改盒子边框的样式，可选择实线、点状、双线、虚线。 在设置边框时需与边框颜色、盒子边框搭配使用。
  

• 边框颜色：用于修改盒子边框的颜色，通过手动拖动拾色器或直接输入rgba值或十六进制值的方式改变颜色。
  

• 盒子边框：用于围绕组件的内容和内外边距创建一个可见的边界。盒子边框四角值可让盒子的四个角平滑化，上下左右值可确定盒子边框的粗细。
  

  样式配置-文字样式

• 字体颜色：通过手动拖动拾色器、直接输入颜色的rgba值或输入十六进制值的方式改变提示字体的颜色。
  

1. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 显示数量：确定最大显示行数。
  

  属性配置-扩展属性

• 列表子项配置：当容器中有其他组件时，可以为其他组件的内容设置绑定字段。
  

1. 事件编排：列表容器无事件编排。

动态表单

  动态表单是一种灵活的表单设计方式，可以根据不同的需求和条件生成表单内容。使用动态表单可以自行添加、删除数据。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据动态表单内容的宽度和高宽确定按钮的大小。
  

• 水平溢出和垂直溢出：可以选择隐藏和滚动，当动态表单中内容的尺寸超过表单的尺寸时，选择隐藏只能展示表单组件尺寸范围内的内容，选择滚动则可以通过滑动展示所有内容。
  

• 布局方式：可选择块级布局和内联布局，与对齐方式复合使用。内联方式指下一个组件与动态表单并排排列，此时可选择对齐方式，使两个组件按顶端对齐、居中对齐或底部对齐的方式并排。块级布局指动态表单单独占一行。
  

• 定位方式：动态表单的定位方式锁定为相对定位，且能够设置顶部、左侧、右侧、底部的距离。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

1. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 标签对齐方式：用于调节动态表单内部输入组件的标签对齐方式，可选左边、中间、右边。
  

• 文本对齐方式：动态表单内输入组件文本的对齐方式，可选左边、中间、右边。
  

• 标签宽度：动态表单内部组件的标签宽度大小。
  

• 是否只读：可以控制动态表单的读写模式，当设置动态表单为只读时，动态表单中的数据将无法修改。
  

• 是否禁用：设置动态表单禁用后，该动态表单将无法使用。
  

• 是否必要：
  

  属性配置-扩展属性

• 动态表单单项设置：能够设置动态表单的列展示数据，可以自由地添加或者删除列数据，其中对每列的数据还能进行详细的设置，如列名称、列字段、列宽、组件、和必填选项。
  

• 动态表单按钮设置：
  

• 生成静态数据：
  

1. 交互编排：动态表单暂无事件编排。

一对多组件

1. 样式配置
   样式配置-布局样式

• 宽度和高度：可选择px值、百分比和自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据动态表单内容的宽度和高宽确定按钮的大小。
  

• 水平溢出和垂直溢出：可以选择隐藏和滚动，当一对多组件中内容的尺寸超过组件的尺寸时，选择隐藏只能展示一对多组件尺寸范围内的内容，选择滚动则可以通过滑动展示所有内容。
  

• 布局方式：可选择块级布局和内联布局，与对齐方式复合使用。 内联方式指下一个组件与一对多组件并排排列，此时可选择对齐方式，使两个组件按顶端对齐、居中对齐或底部对齐的方式并排。块级布局指组件单独占一行。
  

• 定位方式：锁定为相对定位，且能够设置顶部、左侧、右侧、底部的距离。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

• 内外边距：内边距是组件内容与组件边界之间的空间，在内容周围创建一个内部边缘，用于控制组件内容与边界之间的距离。外边距是组件边界与其他组件之间的空间，用于控制组件与其他组件之间的距离。
  

1. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 标签对齐方式：用于调节动态表单内部输入组件的标签对齐方式，可选左边、中间、右边。
  

• 文本对齐方式：动态表单内输入组件文本的对齐方式，可选左边、中间、右边。
  

• 标签宽度：动态表单内部组件的标签宽度大小。
  

• 是否只读：可以控制一对多组件的读写模式，当设置为只读时，一对多组件中的数据将无法修改。
  

• 是否禁用：设置禁用后，该一对多组件将无法使用。
  

• 是否必要：
  

  属性配置-扩展属性

• 一对多组件单项设置：能够设置一对多组件的列展示数据，可以自由地添加或者删除列数据，其中对每列的数据还能进行详细的设置，如列名称、列字段、列宽、组件、和必填选项。
  

• 一对多组件按钮设置：
  

• 生成静态数据：
  

1. 交互编排：一对多组件可设置加载事件，通过设置加载点击事件动作实现交互。
   

签名板

  签名板是在某些需要用户手写签名确认的场合时使用的签名组件。

1. 样式配置
   样式配置-布局样式

• 宽度和高度：确定组件的大小，可选择px值、百分比和自适应，高度一般设置为自适应。px值即像素值大小，百分比是相对于父容器的大小，自适应可根据内部组件的宽度确定容器的大小。
  

• 定位方式：锁定为相对定位，通过设置距顶部、左侧、右侧、底部的距离调整签字板的位置。
  

• 展示层级：当组件设置定位方式后，通过设置层级来对组件进行不收覆盖操作，数字越大优先级越高。
  

1. 属性配置
   属性配置-原生属性
   

• 组件名称：命名组件，便于页面管理。
  

• 线条宽度：写字线条的宽度。
  

• 最小线宽：线条宽度的下限。
  

• 最大线宽：线条宽度的上限。
  

• 签名颜色：通过手动拖动拾色器、直接输入颜色的rgba值或输入十六进制值的方式改变签名的颜色。
  

• 背景颜色：通过手动拖动拾色器、直接输入颜色的rgba值或输入十六进制值的方式改变签名板的背景颜色。
  

• 提示：
  

• 清空文字：
  

• 确认文字：通过手动拖动拾色器、直接输入颜色的rgba值或输入十六进制值的方式改变签名的颜色。
  

• 是否只读：开启后该签名板内容不允许修改。
  

• 是否禁用：禁用后该签名板不能再使用。
  

属性配置-扩展属性：签名板暂无扩展设置。

自定义样式

1. 自定义样式是一种界面设计技巧，通过编写自定义的CSS代码，可以实现修改浮木云组件中没有提供的属性，如列表、查询容器背景颜色等，能够让界面更符合需求。使用方法如下：

• 在画布或页面结构树种点击一个组件，进入“样式配置”，点击右上角按钮“自定义样式”即可进行自定义，如修改背景颜色为黑色，只需在".self{}"中输入"background:black;"
  

团队资源复用

 团队资源就是团队资源库将该团队所有在页面搭建过程中使用的文档、图片、视频等类型的文件上传到团队资源，以供团队中所有成员使用。

资源分组

 可以通过以下方式对资源进行分组：

1. 选择全部文件点击【设置】图标出现新增分组按钮；
   
2. 点击【新增分组】按钮出现新增分组弹窗填写，新增分组名称成功新增一个分组。
   

新增资源

1. 选择一个分组，点击【上传文件】按钮，出现上传文件弹窗；
2. 点击【需要上传文件】可以将本地的文件上传到团队资源中，输入文件名称点击【确定】按钮即可将文件上传到团队资源中。
   

预览资源

 可以通过以下方式对团队资源进行预览：

1. 选择需要预览团队资源分组，点击【预览】按钮即可预览该分组中的资源。
   

查询团队资源

 可以通过以下方式对团队资源进行查询：

1. 选择需要查询的团队资源分组，在输入框中输入关键字可搜索资源，也可以通过筛选文件类型来筛选该分组下的团队资源。
   

模版中心

标签筛选

 可以通过以下方式对模板进行标签筛选：

1. 可依次点击最新发布、热门推荐、最多浏览、最多使用等关键词查找对应类型的模板。
   

2. 依次点击全部、智慧政务、园区管理、企业管理、其他来筛选模板的行业。也可以将模板类型与行业分类组合使用筛选模板。
   

模板搜索

 可以通过以下方式对模板进行搜索：

1. 在搜索框输入关键字，就可完成对模板的搜索。
   

模板预览

 可以通过以下方式进行模板预览：

1. 在浮木云主页左侧导航栏菜单中选择【模板中心】。
   

2. 鼠标悬停在想要应用的模板上，应用封面上方出现应用相关标签，下方出现【预览】和【使用】按钮。
   

3. 点击【预览】按钮，页面出现模板预览弹窗。
   

4. 在模板预览弹窗左侧选择想要预览的页面，在弹窗右侧可以看到页面效果。
   

5. 通过右上角的缩放组件可以调整页面的缩放。
   

模板使用

1. 在浮木云主页左侧导航栏菜单中选择【模板中心】。
   

2. 鼠标悬停在想要应用的模板上，应用封面上方出现应用相关标签，下方出现【预览】和【使用】按钮。
   

3. 点击【使用】按钮，页面出现提示弹窗。
   

4. 点击提示弹窗右下角的【确定】按钮，即可完成模板的使用。
   

模板点赞

1. 可以为喜欢的模版点赞。