展示类组件

展示类组件是 Zion 平台中最基础的页面渲染单元，主要用于在页面上展示和呈现各类静态或动态数据、媒体素材和排版文档。本篇手册按组件结构化列出：定义（含基础使用场景）、个性化配置、数据源配置、行为触发器及特殊限制说明（各组件按需呈现相应章节）。

本篇只列出各组件的专属配置、数据源配置和行为配置。位置、尺寸、布局、样式、文本等通用设计字段见设计面板参考。

包含组件与核心属性

组件名称	支持的客户端	数据源配置	行为配置
文本	网页端、微信小程序、移动端 App	—	✓
按钮	网页端、微信小程序、移动端 App	—	✓
图片	网页端、微信小程序、移动端 App	—	✓
视频	网页端、微信小程序、移动端 App	—	✓
富文本	网页端、微信小程序、移动端 App	—	✓
HTML	网页端	—	—

文本组件

组件定义

用于在页面中展示单行或多行文本内容。支持展示普通文本及 Markdown 文档。

⌨️ 快捷创建：T

个性化配置项

属性名称	预期数据类型	默认值 / 可选项	适用平台与条件	类型及说明
显示模式	`枚举`	`纯文本` / `Markdown`	仅网页端	控制文本以纯文本还是 Markdown 渲染。
内容	`文本`	空	全平台	文本呈现的具体数据，支持手动写入或动态数据绑定。
自动换行	`布尔值`	`false`	全平台	控制文本超出组件宽度时是否自动换行。关闭时单行超出截断，并在末尾显示省略号。
限制行数	`长整数`	无限（需大于等于 1）	全平台（需开启自动换行）	限制文本最多显示的行数。超出设定行数后将自动截断并显示省略号。
SEO 标签	`枚举`	`None` / `h1` 至 `h6`	仅网页端	设置网页中的标题层级（h1 至 h6）。有助于搜索引擎（如谷歌、百度）抓取并解析网页的标题大纲与结构，提升网站的 SEO 排名。

行为配置

支持的触发器包括：点击时、悬停时、进入可视区时、在可视区内滚动时。详细触发规则请参考：触发器参考。

按钮组件

组件定义

纯文本 + 背景构成的点击交互组件。不支持内嵌图标或其他复杂组件。如果需要设计复杂按钮，请使用“容器”组件进行组合搭建。

⌨️ 快捷创建：B

个性化配置项

属性名称	预期数据类型	默认值 / 可选项	适用平台与条件	说明
按钮文本	`文本`	空	全平台	按钮上呈现的指示性文字，支持数据绑定。
自动换行	`布尔值`	`false`	全平台	文案内容长度超出按钮宽度时，是否自动换行。
编辑状态	`枚举`	`常规` / `悬停`	仅网页端支持悬停配置	可分别配置按钮在「常规」和「悬停」两种状态下的样式。视频演示

行为配置

支持的触发器包括：点击时、悬停时、进入可视区时、在可视区滚动时。详细触发规则请参考：触发器参考。

图片组件

组件定义

用于在页面上展示各类主流格式的图片。

⌨️ 快捷创建：I

个性化配置项

属性名称	预期数据类型	默认值 / 可选项	适用平台与条件	说明
来源	`文本 (链接 / Base64) / 图片`	空	全平台	设置图片的来源。支持本地上传，或直接输入 HTTPS 网页图片链接或 Base64 编码。
填充方式	`枚举`	`完整显示` / `裁剪填充` / `拉伸填充`	全平台	设置图片在容器中的填充缩放模式：‘完整显示’（图片等比缩放且完全展示，可能留白）、‘裁剪填充’（图片等比缩放并填满容器，超出部分被裁剪）、‘拉伸填充’（图片拉伸填满容器，可能变形）。
自动压缩	`布尔值`	`true`	非外部「链接」来源时可用	开启后，系统会自动将上传的图片压缩并转换为高效的 WebP 格式，大幅节省页面加载流量，提升首屏打开速度。
Alt 文本	`文本`	空	仅网页端且需开启 SEO	配置图片的替代文本，主要用于 SEO 网页抓取与屏幕阅读器无障碍阅读辅助。

行为配置

支持的触发器包括：点击时、悬停时、进入可视区时、在可视区滚动时。详细触发规则请参考：触发器参考。

此外，图片组件默认集成了全屏预览动作：

在运行时点击图片时，自动打开全屏图片预览界面，支持手势双指放大、长按保存、分享好友。
在微信小程序端，若图片内包含合法的二维码，长按可直接调用系统原生识别接口进行扫码跳转。

特殊限制

本地上传时，支持 jpg/png/webp/gif 格式，文件限 20MB 以内，宽高限 30,000 像素内，总像素限 2.5 亿内
Base64 编码大小限制在 256KB 以内
在微信小程序中，由于安全域名限制，建议优先使用上传到平台的本地图片，避免直接绑定未在微信后台备案的外部图片链接

视频组件

组件定义

用于在页面中播放本地上传的视频文件、外链视频地址或网络流媒体直播。

个性化配置项

属性名称	预期数据类型	默认值 / 可选项	适用平台与条件	说明
来源	`文本 (视频链接) / 视频`	空	全平台	设置视频源。支持本地上传 MP4 格式视频文件（推荐使用 H.264 视频编码与 AAC 音频编码）、动态绑定视频类型字段，或直接输入网络视频播放链接（支持 mp4 链接或 m3u8 格式的 HLS 流媒体直播）。
原生模式	`布尔值`	`false`	仅网页端	强制使用浏览器（或系统）自带的原生播放器渲染。加载速度最快，但开启时会禁用下方所有自定义个性化选项（如自动播放、循环播放等）。
循环播放	`布尔值`	`false`	需处于非原生模式	控制视频播放到终点后是否自动返回起点重新循环播放。
自动播放	`布尔值`	`false`	需处于非原生模式	开启后，页面加载完成时视频将自动播放。注意：受现代浏览器和手机系统安全策略限制，带声音的视频通常会被拦截自动播放，如需自动播放，建议同时开启静音。
播放控件	`布尔值`	`true`	需处于非原生模式，微信小程序不支持	决定是否显示播放、暂停、音量、进度条、全屏模式等操作控制条。
静音按钮	`布尔值`	`true`	需处于非原生模式，微信小程序不支持	决定是否在底部配置栏显示静音切换图标，常配合自动播放配置以避开浏览器的自动播放限制。
填充方式	`枚举`	`完整显示` / `裁剪填充` / `拉伸填充`	全平台	设置视频渲染画面在组件容器中的裁剪与缩放填充模式。

行为配置

支持的触发器包括：开始播放时、悬停时、进入可视区时、在可视区滚动时。

开始播放时：视频开始播放时触发，常用于播放统计或联动其他组件。

详细触发规则请参考：触发器参考。

富文本组件

组件定义

用于在页面中展示带格式的排版文本（如包含各种标题、粗体、超链接或图片的 HTML 图文排版）。

个性化配置项

属性名称	预期数据类型	默认值 / 可选项	适用平台与条件	说明
内容	`文本 (HTML)`	空	全平台	绑定或输入要展示的 HTML 格式代码内容。系统会自动过滤不支持的危险脚本（如 `<script>`）以确保页面显示安全。

行为配置

支持的触发器包括：点击时、悬停时、进入可视区时、在可视区滚动时。详细触发规则请参考：触发器参考。

HTML 组件

组件定义

用于在页面中嵌入自定义的 HTML/CSS 代码，或通过 Iframe 嵌入第三方外部网页。仅网页端支持。

个性化配置项

属性名称	预期数据类型	默认值 / 可选项	适用平台与条件	说明
模式	`枚举`	`代码` / `iFrame`	仅网页端	选择运行模式。‘代码’模式用于编写局部自定义 HTML 页面结构或样式，‘Iframe’模式用于嵌套外部网址。
代码	`文本 (HTML/CSS)`	空	仅在「代码」模式下显示	编写 HTML 和内联 CSS，支持插入数据绑定。注意：出于安全考虑，不支持 `<script>` 脚本。只需填写片段，无需完整 HTML 页面。
源地址	`文本 (链接)`	空	仅在「iFrame」模式下显示	在 iFrame 模式下，设置要嵌套显示的第三方网页 HTTPS 链接。注意：若目标网站设置了禁止跨域嵌入的安全策略（如 X-Frame-Options 限制），该网站将无法在页面中正常加载显示。

行为配置

HTML 组件不支持行为配置。