8
SAP 电商云 Spartacus UI 页面布局的设计原理
source link: https://segmentfault.com/a/1190000040767699
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
SAP 电商云 Spartacus UI 页面布局的设计原理
发布于 今天 01:26
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的原创文章，尽在："汪子熙":
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK