图中高亮区域即header部分:

从渲染后生成的原生HTML能看出,header标签页下面有两个cx-page-layout, section属性分别为header和navigation:

section navigation展开是空的,而section header展开如下:

我简单归纳了一下:

源代码里只定义了

包含两个cx-page-layout, section分别为header和navigation:

更多Jerry的原创文章,尽在:“汪子熙”:

SAP Spartacus header区域布局设计相关推荐

  1. SAP Spartacus Header 区域的默认配置

    该默认配置可以在文件: src\app\spartacus\spartacus-configuration.module.ts 里查看和修改. useValue.layoutSlots, 能看到每个屏 ...

  2. SAP Spartacus Header区域的渲染逻辑

    文件:projects\storefrontlib\src\cms-structure\page\page-layout\page-layout.service.ts 9个一模一样的response: ...

  3. SAP Spartacus 里的 icon 设计

    同 SAP Fiori 一样,SAP Spartacus 里也有大量的自定义 icon 设计,比如下图的 iconTypes.RESET: 需要调用 iconLoader 获取 RESET icon ...

  4. 如何定制化SAP Spartacus的页面布局

    新建一个Layout Module,源代码如下: import { NgModule } from '@angular/core'; import { ConfigModule } from '@sp ...

  5. SAP Spartacus 的页面布局

    官方文档 Spartacus 基于单页面应用程序设计模式,但仍有页面呈现在店面中. "页面"的概念是网络的关键并且无法避免:页面由 URL 标识.由搜索引擎索引.通过社交媒体共享. ...

  6. SAP Spartacus footer区域的一些常见错误

    问题:footer 根本没有显示 原因 The footer-related issue you are seeing is caused by a missing CMS layout config ...

  7. SAP Spartacus delivery mode页面设计

    HTML两个input字段分别对应渲染出页面的两个radio button: 模板设计: delivery mode模型的code字段: 这个formControlName="deliver ...

  8. SAP Commerce Cloud Spartacus UI footer 区域的设计模型

    本文研究如下图高亮所示的 SAP 电商云 Footer 区域的设计明细. 对应的 HTML markdup 入口:cx-footer-navigation: cx-footer-navigation ...

  9. SAP 电商云 Spartacus UI 页面布局的设计原理

    Spartacus 每个 UI 划分成不同的区域 section,每个区域由若干个 slots 组成.每个 slot 可以包含一个或多个 CMS Component. 我曾经写过一篇 文章 详细介绍过 ...

最新文章

  1. OpenCV中图像以Mat类型保存时各通道数据在内存中的组织形式及python代码访问各通道数据的简要方式...
  2. 精心推荐7款windows端实用软件,让人大开眼界!
  3. oracle数据库备份方法主要有哪几种,Oracle数据库备份方法有哪三种?
  4. 解决android模拟器不能访问网络的问题
  5. 微信创始人张小龙的创业故事
  6. java中常用的一些方法(一)
  7. 边缘检测robert原理_机器视觉边缘模式检测应用
  8. 薅羊毛 Colab使用外部数据的7种方法!
  9. Leetcode | Pow(x, n)
  10. 人生长途,感受着不断拼搏...
  11. php随机分配的方法,PHP生成指定随机字符串的简单实现方法
  12. 《Genesis-3D游戏引擎系列教程-进阶篇》10:动画融合
  13. 考研英语 词根词缀单词1-10
  14. 服务实例是否宕机的后台检查线程任务
  15. 网络配置问题Bringing up interface eth0: Device eth0 does not seem to be present, delaying initialization.
  16. 刘德华--5难忘长发飘飘
  17. Unity 制作数字图片字体
  18. 针对传感网的数据管理系统结构有_2010年自考管理信息系统模拟试题及答案(三)...
  19. 微信扫码---进入小程序指定页面(传参)
  20. 它来了,任务调度框架 Quartz保姆级教程奉上

热门文章

  1. 如何改造现有文件为 CMD 模块
  2. 2013 8.1   第五课网络设备对应ois
  3. 陶哲轩实分析定义8.5.5的一个注记
  4. Orion Network Performance Monitor 软件在网络管理中的应用
  5. 07年末围炉盛宴 - 信息工作者应用与管理系列Webcast
  6. How to show out three rows from the same databand On A4?
  7. HTML5 CSS3 Transform 笔记 (scale不起作用)
  8. 7、ABPZero系列教程之拼多多卖家工具 修改注册功能
  9. Wndows下Apache+php+Mysql环境的搭建及其涉及的知识
  10. EditPlus注册码在线生成,强大