APP Studio可视化搭建系统自带80多个组件,可以满足您搭建基本页面的需求。本文将为您介绍可视化搭建系统默认自带的组件。

布局组件

布局组件为您提供一个24栅格系统组件。
栅格
  • 栅格比例

    系统默认将24栅格切割成一个12:12的栅格系统,您可以切换至其他常见的栅格比例,也可以自定义栅格比例。只需要保证所有栅格比例加起来是24的总数,布局组件将会根据各个栅格的比例进行布局切割。

  • 水平排列方式
    水平排列方式定义了栅格在父节点中的排版方式。
    排版方式
  • 垂直排列方式
    垂直排列方式定义了子元素垂直方向的对齐方式。
    对齐方式
  • 栅格间隔宽度
    栅格常常需要和间隔进行配合,您可以使用该配置来定义栅格间隔。
    间隔宽度
  • 区块容器

    区块容器是一个块状的容器组件,区块容器组件可以作为一系列组件的父组件,类似于HTML中的div容器。

基础组件

基础组件均支持组件相关的常用属性设置。

  • 文字
    • 文字
      文字
    • 段落
      段落
      • 组件大小

        定义了段落文字大小。

      • 什么方式展示段落

        用于区分短文本和长文本,短文本的行间距会更小(通常三行以内)。

  • 媒体
    • 视频
      视频
      • 视频链接:需要播放的视频地址。
      • 封面地址:视频封面图片地址。
      • 是否自动播放:是否在组件加载完之后自动播放视频。
    • 图片
      图片

      链接地址:显示的图片地址,可以上传图片。

  • 图标
    图标
    • 指定图标大小

      指定图标的显示大小。

    • 指定显示哪种图标

      指定图标的类型。

  • 按钮
    按钮

    按钮属性的详情请参见按钮文档

  • 链接
    链接
    • 链接文字:显示的链接文字。
    • 链接地址:单击链接的跳转地址。
    • 链接属性:在本窗口打开和在新窗口打开。

表单组件


表单组件

表单包括行内、水平和垂直三种布局方式。

上传图片和附件详情请参见上传附件

筛选详情请参见搜索

输入框详情请参见输入框

图表

  • 数据表格
    数据表格
    配置 说明
    数据源 请求接口地址。
    请求方法 请求方法:Get/Post/Put/Delete。
    搜索参数 接口请求参数。
    返回数据处理函数 接口数据返回后的数据处理函数。
    表格列配置项 定义表格需要显示的表格列。
    尺寸 设置表格尺寸。
    是否显示表格边框 设置是否显示表格边框。
    是否显示表格头 设置是否显示表格头。

    带分页的数据表格多了一项每页显示数量的配置项,定义分页中每一页的显示数量。

  • Excel
    excel
    配置 说明
    数据源 请求接口地址。
    请求方法 请求方法:Get/Post/Put/Delete。
    搜索参数 接口请求参数。
    返回数据处理函数 接口数据返回后的数据处理函数。
    数据 直接配置Excel需要显示的数据。
  • 折线图
    折线图
    配置 说明
    数据源 请求接口地址。
    请求方法 请求方法:Get/Post/Put/Delete。
    搜索参数 接口请求参数。
    返回数据处理函数 接口数据返回后的数据处理函数。
    图表配置 通过代码对图表进行配置。
    是否显示图表标题 设置是否显示图表标题。
    图表标题 显示图表标题。
    图表数据 直接配置图表需要显示的数据。
    X轴字段 定义返回数据中显示到X轴的数据字段名。
    Y轴字段 定义返回数据中显示到Y轴的数据字段名。
    说明 柱状图、条形图、面积图、饼图、地图、词云和散点图等图表组件的配置,请参见折线图。

高级组件

高级组件均支持组件相关的常用属性设置。

  • 选择组件包括选择器复选按钮级联选择单选框区段选择器开关组件评分
  • 交互:您可以通过Tab选项卡,在不同子任务、视图、模式之间切换,它具有全局导航的作用, 是全局功能的主要展示和切换区域。详情请参见Tab选项卡
  • 轮播图:轮播组件以幻灯片的方式,在页面中横向展示诸多内容的组件。详情请参见图片轮播
  • 步骤条:默认情况下,Step定义为展示型组件。上层组件可以通过修改传入的current属性值来修改当前的步骤,同时可以设置每个节点的click事件,来自定义回调。详情请参见步骤
  • 进度条:进度指示器可以为您展示操作的当前进度。详情请参见进度指示器
  • 菜单:您可根据自身需求选择相应的菜单,详情请参见菜单
  • 导航:导航包括顶部导航和侧边导航。顶部导航提供全局性的类目和功能,侧边导航提供多级结构来收纳和排列网站架构。详情请参见导航