SAP Spartacus Page Layout - 页面布局设计

简介: SAP Spartacus Page Layout - 页面布局设计

Page Structure - 页面结构image.pngCMS 页面由 slots 和 components 组成。 页面包含 slots,slots 包含 Components.image.png为了支持通用 slots 和 Components,Spartacus 支持 page template.image.png下面这张图展示了 id 为 homepage 的页面,其页面模板为 Landing Page 2 Template.image.pnghome 页面包含的 Content slots:image.png把 SiteLogo 拿出来单独看。

在 SiteLogo 这个 Slot 里查看,他放置了哪些 Component:

image.png这里能查看到一个 slot 里到底分配了哪些 Components:image.pngCMS 只定义了页面结构,但不负责提供页面布局定义。image.png页面结构只定义了一个 slots的有序列表,每个 slots 里又包含了一个 Components 的有序列表。Slots 本身并不包含布局信息。image.pngSpartacus 使用 LayoutConfig 配置对象,来按照顺序渲染页面 slots.image.pngSpartacus 不区分 Page template 和 page section.image.png对于每一个 page template,Spartacus 还提供了额外的配置自由度:可以再次调整 slots 的相对顺序。image.pngimage.png每个 outlet 都关联了一个 outlet.image.pngoutlet 可以被用来替换 Spartacus page template 的一部分。image.png当然,用 Component 替换方式更简单直接。


Outlet 上下文

前面说过,outlet reference 可以关联一个 page template,一个 page slot / section 或者一个 template.


根据关联元素类型的不同,其上下文(outlet context) 也不相同。image.png看个例子:image.png毫无疑问,Section1 是一个 Slot:

image.png注意,Backoffice 里搜索属性需要点击 + icon,添加成功后,才能在搜索中生效。

Section1 slot 里包含的是如下两个 Splash Banner Components:类型都为SimpleResponsiveBannerComponent.

image.pngimage.png第二个 Component:image.png按照 SAP 帮助文档的介绍,outlet context 包含的 components$ 包含的是 slot 里包含的 Component 列表。image.pngimage.pngimage.pngimage.pngimage.png效果:image.png


相关文章
|
4月前
|
JSON 开发者 数据格式
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
26 0
|
4月前
|
搜索推荐 开发者 UED
关于 SAP Spartacus 层的 UI 设计
关于 SAP Spartacus 层的 UI 设计
42 0
|
4月前
|
开发者 UED
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
25 0
|
2月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
33 0
|
2月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
18 0
|
2月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
22 0
|
2月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
35 0
|
2月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
35 0
|
2月前
|
搜索推荐
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
21 0
|
2月前
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
22 0