华为云首页用户手册

ASTRO轻应用 ASTROZERO-标准页面:设计视图

ASTRO轻应用 ASTROZERO-标准页面:设计视图

时间：2024-10-24 17:30:37

ASTRO轻应用 ASTROZERO 背景和原理

设计视图

标准页面中预置了多种组件，在开发页面时，可以直接从左侧组件区域，将这些组件拖拽到右侧“页面内容”中。

图1 标准页面编辑界面（UI Builder）

配置组件属性

了解组件使用场景及配置方法
 在配置使用组件前，可以将光标放在每个组件上后，组件右上角将显示帮助信息的问号图标。单击问号图标，即可进入该组件介绍页面，了解并学习AstroZero预置前端组件的使用场景及参数配置方法。

图2 组件帮助信息入口
选中组件，查看组件属性
 在“设计视图”中，选中一个页面组件，可以在右侧“属性”页签，设置该组件的绑定数据、样式等属性，如图3所示。在设计视图中选中一个文本框，可以在右侧修改这个文本框的标签名、样式、绑定的数据模型等。
图3 设置组件的属性
页面及组件的事件代码
 在“设计视图”中，选中任意组件，可以在右侧“事件”页签，设置组件的关联事件。例如，可以选择一个“按钮”，然后在按钮的“点击”事件中，添加相应的事件代码，实现在单击按钮后将界面输入保存到数据库中。
图4 编辑组件的关联事件
利用组件导航，快速选中组件
 当选中某个组件时，页面上方会在组件导航上显示它的html标签层级。因此，在组件数量比较多，位置较为紧密时，可以直接单击标签层级，快速选择组件，也可以快速切换组件。例如，在上图的组件导航中单击“页面”，可以直接选中页面上的最外层页面组件。
利用组件树，快速选中组件
 在组件数量比较多，位置较为紧密时，也可以单击页面右下角的“组件树”，展开组件树，在组件树中，直接单击标签层级，快速选择组件，也可以快速切换组件。

图5 利用组件树快速选中组件

上一篇：ASTRO轻应用 ASTROZERO-标准页面:模型视图

下一篇：ASTRO轻应用 ASTROZERO-标准页面:模型视图

新客秒杀 2核2G 3M L实例

68元/年

普惠上云领千元上云礼券

立即前往

企业专享 X实例 4核8G 5M

888元/年

热门域名 1元随心购

1元/年起

ASTRO轻应用 ASTROZERO-标准页面:设计视图

意见反馈

0/200

提交成功！非常感谢您的反馈，我们会继续努力做到更好反馈提交失败！请稍后重试！

推荐文章

解决方案
相关专题