# 低代码组件清单

# 1. 页面

页面容器，可放不同组件，通过路由跳转来切换不同页面

属性

字段	描述
页面名称	用于修改当前页面的名称
添加到底部导航栏	用于修改是否在底部导航栏中展示
导航栏图标	用于设置底部导航栏对应的图标，只在添加到底部导航栏选中状态下有效

# 2. HTMl

属性

字段	描述
html 内容	html 代码内容的编写及修改，格式要符合 html 规范

# 3. 列表

属性

字段	描述
数据	获取一个对象，用于生成一个列表
内容类型	可选择列表呈现的内容类型，包含价格、控件等内容
图片字段	数据对象中获取图片地址的字段名
标题字段	数据对象中获取标题的字段名
描述字段	数据对象中获取描述文案的字段名
显示复选框	控制列表内容是否展示为复选框的形式
滑动删除	向左滑动列表，展示删除功能，可在动作模块中配置点击删除执行的动作

样式

字段	描述
数据加载时显示加载动画	用于修改数据正在加载时，是否展示加载动画
圆角风格	对列表边框样式进行修改
图片宽度	修改列表中图片的宽度
图片高度	修改列表中图片的高度
标题颜色	修改列表中标题的颜色
描述颜色	修改列表中描述文案的颜色

空数据格式

字段	描述
空数据图片	当数据为空时，将显示该图像。
空数据文案	当数据为空时，将显示该文案。
显示空数据按钮	当数据为空时，是否显示按钮
按钮文本	当数据为空时，按钮内的文案
按钮动作	当数据为空时，按钮执行的动作

动作

字段	描述
onItemClicked	点击列表时触发的动作
onDeleteClicked	向左滑动item 时，点击删除时触发的动作

加载遮罩

加载图标，用于表示加载中的过渡状态。

属性

字段	描述
加载文案	可以修改加载文案。
显示加载中	用于绑定动作的运行状态

# 5. 动作栏

内容

字段	描述
动作单元	可新增或删除动作单元，点击配置可对其进行配置

动作单元配置

字段	描述
类型	修改动作单元的展示类型，可为按钮和图标
图标	如果动作单元为图标，则展示为该图标，用于修改图标
小红点提示	是否有右上角的小红点提示
颜色	图标的颜色
动作	点击动作单元触发的动作

# 6. 单元格

内容

字段	描述
单元格列表	单元格列表中的条目添加及单元格的配置，可通过点击右侧设置图标进行单元格配置

属性

字段	描述
圆角卡片风格	对单元格边框样式进行修改
显示外边框	控制是否显示外边框样式
标题	修改标题内文案，如果有文案则展示标题，如果没有内容，则不展示标题
是否可见	控制组件在页面上的可见性。关闭时：当应用程序发布时，组件将不可见。在编辑模式下它看起来是半透明的

# 7. 商品规格

用于展示商品信息，包括价格、库存、商品展示等相关信息，同时可进行加入购物车和立即购买的操作

数据

字段	描述
商品ID	商品的ID
价格	展示默认商品的价格
图片	展示默认商品的图片
库存	展示默认商品的库存
商品规格	商品的规格，数据格式为数组，每个规格必须包含字段：name(名称), key(键值), values(可选值)
商品库存	商品的库存，数据格式为数组，对应的是商品规格中每件商品必须包含字段：id，paice(价格), stock(库存), category(规格值)

样式

字段	描述
主题色	修改主题颜色

动作

字段	描述
点击加入购物车	点击加入购物车按钮时，触发的动作
点击立即购买	点击立即购买按钮时，触发的动作

# 8. 图片

图片组件可以显示应用程序中的图像。图片格式必须是 URL 或有效的 base64。

属性

字段	描述
图片地址	设置图像的来源。支持图像 URL、数据 URI 或 base64 编码图像数据
图片填充方式	设置图片填充父容器方式，支持“包含”、“封面”、“自动”三种形式，如有其他形式的疑惑，可以参阅 CSSobject-fit文档
是否可见	控制组件在页面上的可见性。关闭时：当应用程序发布时，组件将不可见。在编辑模式下它看起来是半透明的
圆角大小	对图片组件的圆角边框进行修改

动作

字段	描述
onClick	点击图片组件时候触发的动作

例子说明

几乎所有主要图像格式都支持，包括：

图片
PNG
SVG
WebP
GIF

你可以将下列地址输入到图片组件中体验查看

//png:
 https://assets.appsmith.com/widgets/default.png

//jpg:
https://jpeg.org/images/jpegsystems-home.jpg

//gif:
https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/5eeea355389655.59822ff824b72.gif

//webp:
https://www.gstatic.com/webp/gallery/4.sm.webp

//svg:
https://assets.codepen.io/3/kiwi.svg

内嵌说明

内联 SVG 是指包含在网页标记中的 SVG 标记。要显示内联 SVG，可以试下以下步骤操作：

将图像小部件拖放到画布中
现在在图像部分，将下面提到的 URL 与您的 SVG 代码粘贴在一起：

data:image/svg+xml;charset=UTF-8,{{encodeURI('<svg..<your-svg>.. ></svg>')}}

您甚至可以使用这样的编码 URL：

example 1:
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='tomato'/%3E%3Ccircle r='41' cx='47' cy='50' fill='orange'/%3E%3Ccircle r='33' cx='48' cy='53' fill='gold'/%3E%3Ccircle r='25' cx='49' cy='51' fill='yellowgreen'/%3E%3Ccircle r='17' cx='52' cy='50' fill='lightseagreen'/%3E%3Ccircle r='9' cx='55' cy='48' fill='teal'/%3E%3C/svg%3E

example 2:
data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='50' cy='50' r='40' stroke='green' stroke-width='4' fill='yellow' /%3E%3C/svg%3E

# 9. 复选框

属性

字段	描述
文本	复选框对应的文案内容
默认选中	修改默认选中状态
是否可见	控制组件在页面上的可见性。关闭时：当应用程序发布时，组件将不可见。在编辑模式下它看起来是半透明的
是否禁用	使该组件不可点击或不可用。该组件对用户保持可见，但不允许用户交互。
数据加载时显示加载动画	用于修改数据正在加载时，是否展示加载动画

动作

字段	描述
onCheckChange	当复选框的选中状态改变时，触发的动作

可进行 JS 交互

# 10. 底部弹窗

从页面底部弹起的一个浮层

属性

字段	描述
弹窗高度	修改弹窗的高度，只能填写不带单位的数字
点击背景关闭
圆角风格	修改弹窗圆角边框样式

动作

字段	描述
onClose	当点击关闭弹窗时，触发的动作

# 11. 底部面板

固定在页面底部的面板，不会随着页面滑动而滚动

属性

字段	描述
面板高度	修改面板的高度，只能填写不带单位的数字
是否可见	控制组件在页面上的可见性。关闭时：当应用程序发布时，组件将不可见。在编辑模式下它看起来是半透明的

# 12. 按钮组件

按钮组件是一个可点击的实体，可以触发附加到它的任何事件。

属性

字段	描述
按钮文字	可设置按钮内的文案
背景颜色	对按钮背景颜色进行修改
文本颜色	修改按钮文案的字体颜色
字体大小	修改按钮文案的字体大小
字体加粗	修改按钮文案加粗样式
是否圆角	对按钮边框样式进行修改
是否可见	控制组件在页面上的可见性。关闭时：当应用程序发布时，组件将不可见。在编辑模式下它看起来是半透明的
禁用	使该组件不可点击或不可用。该组件对用户保持可见，但不允许用户交互。
显示加载动画	您可以使用拨动开关将其打开/关闭。您还可以使用 JavaScript 关闭/打开它

动作

字段	描述
onClick	设置单击此组件时触发的动作，可进行跳转，提示，以及 JS 函数的执行

举例

动作中选择打开弹窗，直接可以通过下拉选择需要打开的弹框名称即可

动作中选择跳转到，直接可以通过下拉选择需要打开的页面名称即可

# 13. 搜索框

字段	描述
占位提示	当搜索框内文本为空时的占位文案展示
圆角风格	控制搜索框是否使用圆角边框样式
显示搜索按钮	是否展示右侧搜索按钮
只读模式	用于修改搜索框只读模式，当为只读模式时，不可编辑
文本对齐	用于修改搜索框内文案的对其方式

动作

字段	描述
onTextChanged	当搜索框的输入内容发生变化时触发的动作
onSearch	当点击搜索按钮时触发的动作
onClick	点击搜索框时触发的动作

# 14. 文本

一个不可编辑的文本内容块

属性

字段	描述
文本	文本块内展示的文案内容
允许滚动	当文本超出文本块是，是否可以进行滚动
是否可见	控制组件在页面上的可见性。关闭时：当应用程序发布时，组件将不可见。在编辑模式下它看起来是半透明的

样式

字段	描述
背景颜色	用于修改文本块的背景颜色
文本颜色	用于修改文本内文案的颜色
字体大小	用于修改字体的大小
字体风格	用于修改字体样式，包括加粗，斜体等
文字对齐	用于修改文本对齐方式

# 15. 标签导航

垂直展示的导航栏，用于在不同的内容区域之间进行切换。

属性

字段	描述
数据	格式为数组
标题字段	标签中的文案，用于修改从数据中的哪个字段中获取数据
默认选中索引	修改默认高亮选中的标签
是否可见	控制组件在页面上的可见性。关闭时：当应用程序发布时，组件将不可见。在编辑模式下它看起来是半透明的
数据加载时显示加载动画	用于修改数据正在加载时，是否展示加载动画

动作

字段	描述
onTabSelected	当点击标签时，触发的动作

# 16. 网格

以网格形式展示的图文区域，默认为4列展示

属性

字段	描述
数据	网格内展示的数据，为数组格式，可通过 {{}} 进行数据绑定
内容类型	控制单个网格的内容类型，可包含标题，描述以及按钮
图片字段	用于展示图片的字段，在数据中获取
红点字段
标题字段	用于展示标题的字段，在数据中获取

样式

字段	描述
图片高度	用于修改图片的高度
图片宽度	用于修改图片的宽度
列数	用于修改网格展示的列数，最小展示两列
网格间距	两个网格之间的横向间距，默认单位为 px，可填写带单位的值
是否显示边框	控制是否展示网格边框
标题颜色	用于修改标题的文本颜色

空数据格式

字段	描述
空数据图片	当数据为空时展示的图片内容
空数据文案	当数据为空时展示的文案

动作

字段	描述
onItemCliked	当点击网格时触发的动作

# 17. 表单组件

表单组件可以满足您捕获输入的数据并将其连接到数据库查询或 API 的所有需求。

表单组件可以用作父组件，可以存储不同的组件，例如用于显示要捕获的信息的文本、用于捕获用户所需输入的输入框、允许选择的下拉列表等等。

内容

字段	描述
表单字段	表单字段，可以新增和修改，也可以修改对应的配置

字段配置

字段	描述
字段名称	提交时该字段的名称
必填	是否为必填，如果必填，失去焦点会有警告提示
字段控件	控件类型，例如单选框、复选框、省市区选择
输入类型	控制输入内容的类型，会有相应的校验，如数字、身份证号
是否可见	控制该项是否展示，如果为false，相应的必填校验会忽略
缺省提示	表单为空时的默认展示内容

属性

字段	描述
表单默认值	表单默认取值
提交按钮文本	用于提交操作的按钮文本内容
圆角卡片风格	对表单组件的边框样式进行修改
主题颜色	对表单组件的主题样式进行修改，控制提交按钮的颜色

# 18. 轮播

用于循环播放一组图片内容。

属性

字段	描述
数据	组件中需要用到的图片数据地址
图片字段	表示图片的字段，可在数据中获取

# 19. 键值对

属性

字段	描述
数据	用于展示的数据，格式为数组
键字段	键内的文案，在数据中获取
值字段	值内的文案，在数据中获取

样式

字段	描述
圆角风格背景	用于修改边框样式
布局	用于修改键值的布局样式
数据加载时显示加载动画	用于修改数据正在加载时，是否展示加载动画

键样式和值样式

字段	描述
颜色	用于修改文案的颜色
字体大小	用于修改字体的大小
粗体	控制字体的样式是否为加粗显示
文字对齐	设置文字的对齐方式

# 20. 分割线

用于将内容分隔为多个区域。

属性

字段	描述
是否可见	控制组件在页面上的可见性。关闭时：当应用程序发布时，组件将不可见。在编辑模式下它看起来是半透明的
方向	控制分割线的方向，垂直或水平

样式

字段	描述
分割线颜色	用于修改分割线的颜色
风格	控制分割线样式，可选（点线，虚线，实线）
粗细	控制线条的粗细，单位 px

# 21. 图片上传

用于上传图片类型的文件，可限制最大上传数量

属性

字段	描述
显示标签	是否显示该字段标签文本
限制个数	控制上传文件个数
必填	是否为必填，有必填为空校验
缺省提示	修改为空提示文本，仅在必填为 true 时生效
是否可见	控制组件在页面上的可见性
文本对齐方式	标签文本的对齐方式

# 22. 多行文本

用户可以在文本框内输入或编辑多行文字。

属性

字段	描述
显示字段名称	是否显示该字段标签文本
字段名称	标签显示的文本内容
文字位置	修改文本对齐方式
必填	是否为必填，如果必填，失去焦点会有校验
缺省提示	如为必填，修改为空提示文本，仅在必填为 true 时生效
限制长度	可限制文本内容的输入长度
禁用	使该组件不可点击或不可用。

# 23. 单行文本

用户可以在文本框内输入或编辑文字。

属性

字段	描述
显示字段名称	是否显示该字段标签文本
字段名称	标签显示的文本内容
输入类型	可选择文本类型，失去焦点会有相应的校验
文字位置	修改文本对齐方式
必填	是否为必填，如果必填，失去焦点会有校验
缺省提示	如为必填，修改为空提示文本，仅在必填为 true 时生效
限制长度	可限制文本内容的输入长度
禁用	使该组件不可点击或不可用。

# 24. 数字滑动条

滑动输入条，用于在给定的范围内选择一个值。

属性

字段	描述
文本	修改字段名称
默认值	默认滑动条的初始值
最小值	最小值
最大值	最大值
进度条高度	控制进度条高度
是否禁用	使该组件不可滑动或不可用。

# 25. Dialog 弹出框

弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作。

属性

字段	描述
显示加载中	控制是否展示
标题文案	用于修改标题文本
内容文案	用于修改内容文本
取消按钮文案	取消按钮文本
确认按钮文案	确认按钮文本
内容文本对齐方式	控制内容文本的对齐方式

动作

字段	描述
onClick(cancel)	点击取消按钮触发的动作
onClick(confirm)	点击确认按钮触发的动作

# 26. 下拉单选

向下弹出的菜单列表。

属性

字段	描述
数据	用于展示列表内容，
下拉展示内容	以文本形式，或图片展示
文本	标签文本内容
禁用	是否禁用

样式

字段	描述
选中文本颜色	选中文本高亮状态颜色
标签对齐方式	标签的对齐方式

# 27. 下拉多选

向下弹出的菜单列表，可选择多个。

数据

数据格式请按照默认数据格式进行编写

属性

字段	描述
显示字段名称	标签文本内容
组件主题颜色	修改选中时高亮颜色
选中高亮背景颜色	修改选中时高亮的背景颜色

# 28. 单选

在一组备选项中进行单选。

数据

字段	描述
数据	配置单选项内容
默认选中值	默认选中的选项值

样式

字段	描述
图标大小	控制图标的大小
选项是否水平排列	选项以竖直还是水平排列
勾选框形状是否圆形	修改勾选框的形状

属性

字段	描述
禁用	是否禁用选项

事件

字段	描述
onSelectionChange	选中项改变时触发的事件

# 29. 图片上传

用于将本地的图片或文件上传至服务器，并在上传过程中展示预览图和上传进度。目前 Uploader 组件不包含将文件上传至服务器的接口逻辑，该步骤需要自行实现。

属性

字段	描述
显示标签	是否显示标签
字段名称	标签名称的文本
限制个数	限制上传图片的数量
必填	是否必填，为空有校验提醒
缺省提示	缺省时的提示文案
文本对齐方式	标签对齐方式

# 30. 多行输入框

用户可以在文本框内输入或编辑文字。

属性

字段	描述
显示字段名称	是否显示标签
字段名称	标签名称的文本
必填	是否必填，为空有校验提醒
缺省提示	缺省时的提示文案
限制长度	文本框内输入文案长度控制
禁用	是否禁用输入框

# 31. 容器

可拖拽组件到容器中

属性

字段	描述
是否显示	控制组件在页面上的可见性。关闭时：当应用程序发布时，组件将不可见。在编辑模式下它看起来是半透明的
加载时显示动画	关闭时，该组件加载时不会有任何动画。您可以使用拨动开关将其打开/关闭。您还可以通过启用旁边的 JS 标签使用 javascript 将其关闭/打开。
高度	当容器内组建大于容器尺寸时，设置是否允许在容器组件内滚动

样式

字段	描述
背景颜色	对容器组件内的背景颜色进行设置调整
背景图片	对容器组件的背景图片设置调整
边框颜色	对容器组件的边框颜色设置调整
边框宽度	设置容器组件内画布与容器边框的宽度
边框圆角	对容器组件的边框样式进行修改
阴影	调整容器组件整体阴影大小

# 32. 开关

用于在打开和关闭状态之间进行切换。

属性

字段	描述
禁用状态	设置禁用状态
默认开关选中状态	开关的默认开启状态
自定义大小	设置开关大小
背景颜色	修改关闭时的背景颜色
选中颜色	修改选中的背景颜色

事件

字段	描述
onChange	开关切换状态时触发的事件

# 33. 数字滑动条