系统组件-展示类

包含文本组件、按钮组件、图片组件、视频组件、富文本组件。

文本

一般用于展示文本、数字、时间、日期等文字类内容

配置说明

1. 通过点击内容输入框中的【+】号，可以引用其它的数据
2. Zion支持手写输入和数据绑定的拼接，如想在输入的文本中间位置引用其他数据，请按“/”键。

按钮

应用于需要用户在屏幕中点击，触发某个行为的各种场景。常见有添加数据、跳转页面等交互行为。

💡 Tips：

- 目前 Zion 的交互行为只能支持点击行为，暂时不能支持长按、双击等行为。
- 【按钮组件】只能调整背景颜色、文字颜色、字体及样式等简单设置，如果需要特殊按钮（如在按钮上放置一个🔍，按钮是无法实现的，你可以利用图片组件来实现）。
- 大部分的组件都可以设置点击行为，注意看每个组件的右边栏中“交互”中的提示，显示为“点击时行为”的都可以设置点击时的行为。

配置说明

日常使用时，按钮的样式常常都是有各种样式的效果，此时按钮组件并不能满足使用要求。这个时候可以使用【图片】组件来代替【按钮】，将图片切片上传到【图片】组件，并配置对应行为，可以实现和按钮完全相同的效果。

图片

一般用于显示头像、商品图片等众多需要显示图片的场景。

配置说明

1. 本地上传内容
   如下图所示，当将图片源设置为“本地上传”时，点击图片区域，选择电脑上的本地的图片进行上传，上传成功后能直接预览出来。

💡 Tips:

- 上传的图片宽或高不能超过 30,000 px，且总像素不能超过2.5亿 px（图片的宽x高），**大小不能超过 20 MB**​
- 动态图片（例如GIF图片）的像素计算方式为宽*高*图片帧数；非动态图片（例如PNG图片）的像素计算方式为宽*高
- 支持的图片文件格式有：jpg、png、svg、webp、gif

1. 数据绑定内容
   如 下图 ⬇️ 所示，当将图片源设置为“数据绑定”时，可点击【+】号，绑定图片类型的数据。

1. 裁剪方式介绍

2. 当图片裁剪模式设置为“完整图片”时，会按照比例缩放图片的宽高，在图片组件内显示完整的图片内容，图片内容之外的区域就会显示背景颜色

3. 当图片裁剪模式设置为“填充空间”时，图片会缩放充满整个图片组件，此时的图片超出的组件的部分会被裁剪

1. 图片的更多功能
   在手机点击图片，能够实现放大、下载、转发图片、识别二维码等功能，详情请看组件操作行为

视频

需要在应用中播放视频内容时，可以选择视频组件来实现。

配置说明

1. 本地上传视频
   上传成功后视频将显示在本地上传下方，点击已经上传的视频，可播放视频，查看确认视频内容，也可重新上传

1. 数据绑定视频内容
   当视频源为数据绑定时，点击 + 号，绑定从数据库中请求过来的视频数据即可。数据必须是“视频类型”才可以进行添加绑定，并且只能绑定单个视频

1. 一些特殊控制

   • 循环：默认关闭，指当视频开始播放后，会自动循环播放视频
   • 自动播放：默认关闭，指进入视频所在页面时，视频会自动播放
   • 播放控制、静音按钮：默认打开，指显示视频的播放开始/暂停、音量控制、播放速度控制、画中画、全屏的功能

2. 可在行为里配置开始播放时触发的行为

3. 可以在其他组件的点击时行为中添加对视频的控制行为，详情请看【组件操作】

富文本

需要以更加丰富的样式显示高度不确定的内容和图片，比如一篇包含了多种元素内容的文章，或者长图。如果要展示不确定的富文本内容时，一般建议将富文本组件的高度模式设置为「适应内容」

富文本（Rich Text）是指包含了除了纯文本以外的额外元素的文本格式。这些额外元素可能包括字体样式（如粗体、斜体）、文本颜色、超链接、图片、表格、列表等。简而言之，富文本允许在文本中加入各种格式化选项，使内容更加丰富和易于理解。 Zion 的小程序端没有富文本编辑器组件，但可以在富文本组件的内容中调用富文本编辑器来编辑富文本内容，若数据表中的某个字段类型为文本类型，那么在编辑数据库该字段内容时，也可以调起富文本编辑器进行内容编辑。Zion 的Web端提供了富文本编辑器组件，在需要编辑内容的页面，你可以直接拖入富文本编辑器组件来让用户进行富文本内容的编辑。

配置说明

1. 本地编辑
   在页面中拖入富文本组件之后，点击组件的中的内容，可以调起富文本编辑器进行本地富文本的编辑

1. 数据绑定
   Zion 数据库中文本类型的字段也支持调起富文本编辑器进行内容的编辑，编辑好的结果会直接以富文本的形式保存下来，在应用页面中你只需要使用富文本组件，在其内容中直接绑定这个字段的数据即可进行富文本内容的展示

2. 单个图片/视频等资源的引用
   在某些应用页面中，可能只有一张很长的长图内容或者高度未知的视频内容，此时 Zion 的图片或者视频组件时无法自适应高度的，所以你可以在页面中添加一个富文本组件，让富文本组件引用远程数据请求过来的图片/视频的URL来进行内容的展示. 但值得注意的是，你不能够直接引用URL，而是需要以HTML代码的形式对URL进行拼接.

   💡Tips： 如果你不会编写HTML代码，你可以尝试先在富文本编辑器中先进行内容的编辑，比如上传图片，确认后查看HTML的代码结果，复制代码后找出前缀与后缀，而后进行远程数据的引用以及拼接，如下图所示：

   

图片URL的拼接方式如下：

1. 复制拼接前缀粘贴到富文本组件内容中： <div><img style="width:100%" src="

2. 点击组件内容中+号绑定请求过来的url：远程数据/组件内数据读取过来的图片的url

3. 复制拼接后缀粘贴到富文本组件内容中： /></div>

Html

html组件支持以iframe形式展示一个网站和直接写入代码来渲染。两种情况都支持绑定项目内的数据。

配置说明

1. 代码：手写html代码进行渲染，可插入项目内数据
2. iframe：填入网页链接，支持拼接项目内数据