搭建第一个页面

本教程通过一个完整的页面交互，介绍 Zion 中页面、组件和弹窗的基础搭建方式。完成后，你将得到一个包含文本和按钮的页面；点击按钮时会打开自定义弹窗，点击弹窗内的按钮可以将其关闭。

如果你还不熟悉编辑器各区域，建议先阅读认识编辑器。页面、弹窗和组件之间的关系见 UI 组织方式。

选择客户端并新建页面

页面和组件属于当前客户端。开始搭建前，先在左边栏顶部选择目标客户端。

1. 在左边栏进入页面列表。
2. 点击页面列表右上角的 +。
3. 双击新页面的名称，将其重命名为“示例页面”。
4. 选中页面，进入页面画布。

不同客户端的页面和 UI 相互独立。如果项目中还没有目标客户端，需要先在客户端入口中新建。多端组织方式见 UI 组织方式。

添加和配置组件

先在页面中添加一段文本，作为页面的基础内容。

1. 选中页面画布。
2. 在左边栏进入组件标签。
3. 点击蓝色 + 打开组件库。
4. 在系统分类中找到文本，将其拖到画布中，或双击添加。
5. 选中文本组件，在右侧属性面板中修改文本内容、位置和样式。

从组件库拖动组件时，可以将其放入指定容器或组件树层级；双击组件时，组件会添加到当前选中的页面或容器中。右侧面板字段见设计面板，常用编辑操作见 UI 快捷键。

新建并设计自定义弹窗

接下来创建按钮需要打开的自定义弹窗。

1. 在左边栏切换到弹窗列表。
2. 点击弹窗列表右上角的 +。
3. 将新弹窗重命名为“示例弹窗”。
4. 选中弹窗，在弹窗画布中添加一个文本组件，并输入要展示的内容。
5. 在弹窗中添加一个按钮，将按钮文案改为“关闭”。
6. 选中“关闭”按钮，在行为面板中添加点击时触发器。
7. 在触发器下添加提示和弹窗 → 关闭弹窗。

弹窗可以配置输入和输出，用于接收页面数据或将用户填写的内容返回页面。本教程暂不配置数据传递；相关字段见页面与弹窗。

从页面打开弹窗

弹窗不会通过路由直接访问，需要由页面中的行为打开。

1. 回到“示例页面”。
2. 从组件库添加一个按钮，并将按钮文案改为“打开弹窗”。
3. 选中按钮，在行为面板中添加点击时触发器。
4. 在触发器下添加提示和弹窗 → 打开弹窗。
5. 将打开方式设为打开自定义弹窗。
6. 在弹窗中选择“示例弹窗”。

至此，页面按钮和自定义弹窗已经通过行为连接起来。打开弹窗的参数、分支和输出见提示和弹窗。

预览结果

1. 选中“示例页面”。
2. 点击画布右上角的播放图标，在新标签页打开实时预览。
3. 点击“打开弹窗”，确认“示例弹窗”正常显示。
4. 点击弹窗内的“关闭”，确认弹窗正常关闭。

下一步

• 在页面与弹窗中配置页面和弹窗的设计、数据、行为、输入与输出。
• 在设计面板中查看组件的位置、尺寸、布局和样式字段。
• 在布局系统中学习盒子模型、Flexbox、定位和网页端断点。
• 在提示和弹窗中查看提示、打开弹窗和关闭弹窗行为。