美文网首页
SAP 电商云 Spartacus UI 页面布局的设计原理

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

作者: _扫地僧_ | 来源:发表于2021-11-01 10:40 被阅读0次

    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的原创文章,尽在:"汪子熙":


    相关文章

      网友评论

          本文标题:SAP 电商云 Spartacus UI 页面布局的设计原理

          本文链接:https://www.haomeiwen.com/subject/tuqenltx.html