- HTML 按钮(button)的 disable 属性和 dis
- SAP 电商云 Spartacus UI 产品搜索结果的设计明细
- SAP 电商云 Spartacus UI 的 Product C
- SAP 电商云 Spartacus UI 页面布局的设计原理
- SAP 电商云 Spartacus UI 从 CMS 取回 sl
- 网站上的 breadcrumb 使用场景浅析
- SAP UI5 sap.ui.vk 命名空间内的控件介绍
- SAP 电商云 Spartacus UI Proxy Facad
- SAP 电商云 Spartacus UI 产品明细页面路由路径的
- Angular @Injectable 注解的工作原理浅析
Spartacus 每个 UI 划分成不同的区域 section,每个区域由若干个 slots 组成。每个 slot 可以包含一个或多个 CMS Component.
我曾经写过一篇 文章 详细介绍过。
以 homepage为例,其实现的 HTML 位置:projects\storefrontlib\src\layout\main\storefront.component.html
看这个 header 区域:
![](https://img.haomeiwen.com/i2085791/571072eec76511ce.png)
这个 header 区域分配的 slots,定义在文件 layout-config.ts 里:
![](https://img.haomeiwen.com/i2085791/516800bdbad61ce0.png)
这些 slots 里包含的 CMS Components,运行时渲染好之后,显示的内容如下图高亮区域所示:
![](https://img.haomeiwen.com/i2085791/c7fa6a59a9906431.png)
客户可以通过配置的方式,决定这些 slots 哪些显示,哪些不显示,以及调换slots 间的相对位置。
比如我让 header 区域只显示一个 Sitelogo:
![](https://img.haomeiwen.com/i2085791/b8a1836924ac9992.png)
最后的效果如下图:
![](https://img.haomeiwen.com/i2085791/c81b9ccb594f683e.png)
我曾经出于调试目的,把 UI 上每个区域的 slot id 和 Component id 都打印出来,如下图所示:
![](https://img.haomeiwen.com/i2085791/55fa57ff13d6d0dc.png)
更多Jerry的原创文章,尽在:"汪子熙":
![](https://img.haomeiwen.com/i2085791/97c4752c0e619c44.png)
网友评论