UI设计师概述
用于构建 Web 应用程序的 AppMaster UI Designer 界面的详细说明。
成功创建应用程序后，您将进入 UI Designer 选项卡。
AppMaster 中的 UI 设计器旨在用户友好，让您轻松创建令人惊叹的 Web 应用程序页面。
通过其直观的拖放界面，您可以设计网页并无缝地填充内容，无需高级编码技能。
UI 设计器分为四个主要部分供用户交互：
- 左工具栏
- 顶部面板
- 底板
- 画布区
- 属性面板
左工具栏
左侧的工具栏提供了用于构建网站的工具。通过单击位于此侧边栏顶部的图标，将显示以下面板：
- 用户界面元素列表
- 元素树
- 页面树
- 布局树
- 资产经理
UI 元素列表（快捷键： 1 ）
UI 元素列表提供了可以通过从面板拖动来添加到画布区域的所有元素。
UI 元素根据其用途进行分类，从而更轻松地导航并找到适合您的应用程序的小部件。
为了快速转到该元素，您可以使用面板顶部的搜索栏。
元素树（快捷键： 2 ）
从元素树中，您可以管理和组织放置在 Web 应用程序的选定页面上的所有组件。
在这里，您可以与这些元素进行交互：
- 通过拖动在树之间移动项目，
- 重命名组件，
- 更改画布上元素的可见状态（隐藏/显示）。
使用面板顶部的搜索栏可在树中快速搜索元素。
页面树（快捷键： 3 ）
页面树允许您组织和管理您的网站页面。您可以在此处创建新页面或文件夹。
在页面树中，您可以复制或删除页面或文件夹。
使用面板顶部的搜索栏可以快速搜索树中的页面或文件夹。
布局列表（快捷键： 4 ）
布局树有助于管理页面布局。与在页面树中一样，您可以复制或删除布局。
使用面板顶部的搜索栏在树中进行快速搜索布局。
资产管理器（快捷键： 5 ）
资产管理器有助于上传和组织资产（例如文档、图像和动画）以供您的网站使用。
您在开发过程中上传的所有资源都将保留在资源管理器中，并且可以重复使用而无需重新上传。
您还可以删除不再需要的任何资产。
顶栏
顶部栏提供了一组附加的视图设置。从左侧菜单按钮旁边开始，向右延伸，您将拥有以下一组工具：
- 当前文档：显示您当前正在处理的页面或布局。
- 断点：断点图标使您能够在不同的断点之间切换，以预览和修改您的网站在各种设备尺寸上的显示方式。
- 撤消和重做：撤消和重做按钮可让您撤消或重新应用在设计器中所做的操作，例如应用样式或删除元素。还可以使用快捷键：用于撤消操作 -
CRTL/⌘+Z和用于重做操作 -CTRL/⌘+SHIFT+Z。
底栏
底部面板允许您缩放或调整页面视图的大小。
在面板的左侧，您可以通过设置画布的高度和宽度来设置自定义页面分辨率。
在右侧，您可以控制比例：
- 放大或缩小
- 设置百分比比例
- 设置实际尺寸
- 使当前窗口适合可见区域
帆布
画布是您的交互式工作区。您可以在此处使用页面组件。您可以选择元素、重新定位它们以及直接在页面上编辑内容。
此外，您还可以在页面和应用程序之间复制 ( CRTL/⌘+C ) 和粘贴 ( CRTL/⌘+V ) 元素，或在当前页面内复制元素 ( CRTL/⌘+D )。
属性面板
设计器右侧的“属性”面板允许您自定义所选元素、布局或页面的视觉外观和行为。
属性面板包含 4 个主要面板：
- 外观面板
- 附加选项面板（可选）
- 媒体查询面板
- 业务逻辑面板
在面板的标题上，您可以通过单击项目名称来重命名所选项目、阅读说明，或者通过单击垃圾桶图标来删除项目。
外观面板
外观面板允许您访问所选元素的显示静态内容和属性。您可以在相应的字段中输入或选择这些值，样式将立即应用于画布上的元素。
如果画布上未选择任何元素，此面板将显示当前页面或布局的设置。
附加选项面板
附加选项面板适用于需要额外设置数据或选项的元素。
您可以根据所选组件设置数据源或手动输入选项。
媒体查询面板
媒体查询面板使您能够覆盖每个定义的断点的项目属性。
业务逻辑面板
业务逻辑面板提供元素的所有触发器，并允许您在触发器触发时建立元素交互。