天天看点

SAP Spartacus pagefold学习笔记

Chrome开发者工具里展开Observable对象,从其operator能观察到施加在该Observable对象上的操作:

Map操作:(event) => this.getBreakpoint(event.target.innerWidth)

SAP Spartacus pagefold学习笔记
source.operator: DistinctUntilChangedOperator
SAP Spartacus pagefold学习笔记
这个this.breakpointService.breakpoint$的赋值位置:果然有map和distinctUntilChanged,通过pipe链接:
SAP Spartacus pagefold学习笔记
link:https://sap.github.io/spartacus-docs/above-the-fold/#page-fold-configuration

The page fold is configurable for each page template and breakpoint.

page fold针对每个page template和breakpoint进行配置。

The page fold configuration is only an indication to speed up the initial creation of page slots that are above the fold.
You designate the page fold by assigning a page slot to the pageFold parameter.

将pageSlot赋值给pageFold.

SAP Spartacus pagefold学习笔记
This page slot, and all previous, sibling page slots, are “above the fold”.

位于pageFold属性指定的slot以及其之前的兄弟page slot,称之为above the fold.

These page slots are prioritized ahead of page slots that are “below the fold”.

All page slots are eventually rendered if they happen to be above the fold.
The page fold indicates the last page slot that should be rendered above the fold.

Page fold代表应该以above the fold方式渲染的page slots中的最后一个。

If you need a configuration for specific breakpoints, you can configure the page fold for every breakpoint, as shown in the following example:
SAP Spartacus pagefold学习笔记
The page slots adjust their height automatically when components are loaded.

Page slot的高度是自适应的。

Given that content can be added at runtime, it is not possible to implement a (hard-coded) minimum height for page slots or components – it all depends on what the business will add at runtime.

不可能为page slot或者Component设置一个默认的最小高度。

To make it possible to defer the loading of below-the-fold content, Spartacus marks page slots that are below the page fold while page slots above the fold are being loaded. All page slots are marked with an is-pending class as long as all the inner components are not loaded.

当above the fold的page slot被加载时,below the fold中的slots被打上标记:如果其inner Components尚未被加载,则使用is-pending class来标注。