SAP Spartacus header区域布局设计

图中高亮区域即header部分：

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

section navigation展开是空的，而section header展开如下：

我简单归纳了一下：

源代码里只定义了

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

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

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

SAP Spartacus Header 区域的默认配置
该默认配置可以在文件: src\app\spartacus\spartacus-configuration.module.ts 里查看和修改. useValue.layoutSlots, 能看到每个屏 ...
SAP Spartacus Header区域的渲染逻辑
文件:projects\storefrontlib\src\cms-structure\page\page-layout\page-layout.service.ts 9个一模一样的response: ...
SAP Spartacus 里的 icon 设计
同 SAP Fiori 一样,SAP Spartacus 里也有大量的自定义 icon 设计,比如下图的 iconTypes.RESET: 需要调用 iconLoader 获取 RESET icon ...
如何定制化SAP Spartacus的页面布局
新建一个Layout Module,源代码如下: import { NgModule } from '@angular/core'; import { ConfigModule } from '@sp ...
SAP Spartacus 的页面布局
官方文档 Spartacus 基于单页面应用程序设计模式,但仍有页面呈现在店面中. "页面"的概念是网络的关键并且无法避免:页面由 URL 标识.由搜索引擎索引.通过社交媒体共享. ...
SAP Spartacus footer区域的一些常见错误
问题:footer 根本没有显示原因 The footer-related issue you are seeing is caused by a missing CMS layout config ...
SAP Spartacus delivery mode页面设计
HTML两个input字段分别对应渲染出页面的两个radio button: 模板设计: delivery mode模型的code字段: 这个formControlName="deliver ...
SAP Commerce Cloud Spartacus UI footer 区域的设计模型
本文研究如下图高亮所示的 SAP 电商云 Footer 区域的设计明细. 对应的 HTML markdup 入口:cx-footer-navigation: cx-footer-navigation ...
SAP 电商云 Spartacus UI 页面布局的设计原理
Spartacus 每个 UI 划分成不同的区域 section,每个区域由若干个 slots 组成.每个 slot 可以包含一个或多个 CMS Component. 我曾经写过一篇文章详细介绍过 ...

SAP Spartacus header区域布局设计

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

最新文章

热门文章