华为云首页 用户手册

APPCUBE-路由导航和路由视图:自定义布局样式

APPCUBE-路由导航和路由视图:自定义布局样式

时间：2023-11-01 16:19:14
APPCUBE

自定义布局样式

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

图13 自定义布局样式页面效果
  1. 在头部组件的“.css”样式文件中，指定头部组件的高度。

    样例代码如下：

    #headerWidget {              height: 90px;}

  2. 参考基于预置组件进行自定义中操作，下载预置组件路由导航(示例)，解压global_NavigatorWidget.zip。
  3. 修改解压后的“Navigator_Widget.css”文件，该文件是Widget的样式文件，在该文件中编写Widget的css样式。

    样例代码如下： 
    html[app=desktop] body {              overflow: hidden;} #navigatorWidget, #global_RouterViewWidget {              height: calc(100% - 90px);              overflow: scroll;}

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

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

29元/年

立即注册 领万元上云礼券

抽奖赢11111元免单

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

98元/年

热门域名 1元 随心购

1元/年

看了此文的人还看了
CDN加速 GaussDB 文字转换成语音 免费的服务器 如何创建网站 域名网站购买 私有云桌面 云主机哪个好 域名怎么备案 手机云电脑 SSL证书申请 云点播服务器 免费OCR是什么 电脑云桌面 域名备案怎么弄 语音转文字 文字图片识别 云桌面是什么 网址安全检测 网站建设搭建 国外CDN加速 SSL免费证书申请 短信批量发送 图片OCR识别 云数据库MySQL 个人域名购买 录音转文字 扫描图片识别文字 OCR图片识别 行驶证识别 虚拟电话号码 电话呼叫中心软件 怎么制作一个网站 Email注册网站 华为VNC 图像文字识别 企业网站制作 个人网站搭建 华为云计算 免费租用云托管 云桌面云服务器 ocr文字识别免费版 HTTPS证书申请 图片文字识别转换 国外域名注册商 使用免费虚拟主机 云电脑主机多少钱 鲲鹏云手机 短信验证码平台 OCR图片文字识别 SSL证书是什么 申请企业邮箱步骤 免费的企业用邮箱 云免流搭建教程 域名价格
热门活动
APPCUBE-路由导航和路由视图:自定义布局样式

搜索反馈

您搜索到想要的结果了吗?

是的 没有

意见反馈

0/200

提交 取消

提交成功！非常感谢您的反馈，我们会继续努力做到更好 反馈提交失败！请稍后重试！
产品专区
推荐文章
更多内容
云硬盘存储EVS Web应用防火墙 人机语音识别 云计算入门 云数据库选择 HDC大会 华为云计算 响应式建站是什么 智慧班牌系统