SAP Spartacus pagefold学习笔记-阿里云开发者社区

开发者社区> jerrywangsap> 正文

SAP Spartacus pagefold学习笔记

简介: SAP Spartacus pagefold学习笔记
+关注继续查看

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


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


image.png


source.operator: DistinctUntilChangedOperator


image.png


这个this.breakpointService.breakpoint$的赋值位置:果然有map和distinctUntilChanged,通过pipe链接:


image.png


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.


image.png


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:


image.png


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来标注。


Additionally, the page fold slot has a page-fold class. With these two classes, Spartacus can apply various CSS rules to control deferred loading of below-the-fold content.


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
(4) Spring中定时任务Quartz集群配置学习
原 来配置的Quartz是通过spring配置文件生效的,发现在非集群式的服务器上运行良好,但是将工程部署到水平集群服务器上去后改定时功能不能正常运 行,没有任何错误日志,于是从jar包、JDK版本、cronExpression到服务器类型,甚至查到了服务器操作系统的类型,都没能找到解决的办 法,后来才知道是集群惹的祸! 详细步骤如下: 1、 按照Quartz集群工作原理 图:表示了每个节点直接与数据库通信,若离开数据库将对其他节点一无所知 在数据库中建表。
1335 0
(5)Quartz学习
原文:http://blog.csdn.net/zxl315/article/details/10879927 介绍Quartz Quartz是一个开源的任务调度系统,它能用来调度很多任务的执行。
1155 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10083 0
Angular property binding的学习笔记
https://angular.io/guide/property-binding
10 0
Part2__机器学习实战学习笔记__决策树
本文首先对决策树算法原理进行简要的介绍,然后在iris数据集上面测试算法的效果。
19 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
2962 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10883 0
强化学习:Policy-based方法Part2
在本文中,将首先从数学角度对相关理论知识给出解答,并给出基于TensorFlow的实现过程。
1753 0
+关注
2628
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载