华为云首页用户手册

ASTRO轻应用 ASTROZERO-设置AstroZero高级页面路由导航和路由视图组件属性:自定义布局样式

ASTRO轻应用 ASTROZERO-设置AstroZero高级页面路由导航和路由视图组件属性:自定义布局样式

时间：2024-08-21 11:11:58

ASTRO轻应用 ASTROZERO 设置AstroZero高级页面预置组件属性

自定义布局样式

如果导航页面，想实现如下图所示布局效果，即整个页面不需要有滚动条，而其中导航组件区域和全局路由视图组件区域可随滚动条滚动时，可参考如下步骤实现。

图12 自定义布局样式页面效果

在头部组件的“.css”样式文件中，指定头部组件的高度。
样例代码如下：
```
#headerWidget {
              height: 90px;
}
```
参考基于预置组件进行自定义中操作，下载预置组件路由导航(示例)，解压global_NavigatorWidget_版本号.zip。

修改解压后的“Navigator_Widget.css”文件，该文件是Widget的样式文件，在该文件中编写Widget的css样式。

样例代码如下：

html[app=desktop] body {
              overflow: hidden;
}
 
#navigatorWidget, #global_RouterViewWidget {
              height: calc(100% - 90px);
              overflow: scroll;
}

将修改后的头部组件和组件路由导航组件文件，重新打成zip包。
参考基于预置组件进行自定义中操作，上传重新打包后的组件。
在高级页面设计器左上方，单击，拖出上传的头部组件、路由导航组件和预置的路由视图组件至设计页面。
单击页面上方的，保存页面。
保存成功后，单击，发布页面。
发布成功后，单击，可查看页面效果。

上一篇：ASTRO轻应用 ASTROZERO-创建AstroZero触发器:创建触发器

下一篇：ASTRO轻应用 ASTROZERO-创建空白AstroZero工作流:创建空白工作流

华为云11.11 2核1G 2M 云服务器

29元/年

立即注册领万元上云礼券

抽奖赢11111元免单

续费同价 L实例 2核2G 4M

98元/年

热门域名 1元随心购

1元/年

ASTRO轻应用 ASTROZERO-设置AstroZero高级页面路由导航和路由视图组件属性:自定义布局样式

意见反馈

0/200

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

推荐文章

解决方案
相关专题