乐趣区

关于sap:SAP-电商云-Spartacus-UI-页面布局的设计原理

Spartacus 每个 UI 划分成不同的区域 section,每个区域由若干个 slots 组成。每个 slot 能够蕴含一个或多个 CMS Component.

我已经写过一篇 文章 具体介绍过。

以 homepage 为例,其实现的 HTML 地位:projects\storefrontlib\src\layout\main\storefront.component.html

看这个 header 区域:

这个 header 区域调配的 slots,定义在文件 layout-config.ts 里:

这些 slots 里蕴含的 CMS Components,运行时渲染好之后,显示的内容如下图高亮区域所示:

客户能够通过配置的形式,决定这些 slots 哪些显示,哪些不显示,以及调换 slots 间的绝对地位。

比方我让 header 区域只显示一个 Sitelogo:

最初的成果如下图:

我已经出于调试目标,把 UI 上每个区域的 slot id 和 Component id 都打印进去,如下图所示:

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

退出移动版