Mobile first 设计思路在 SAP 电商云 Spartacus UI 中的设计体现一例

简介: Mobile first 设计思路在 SAP 电商云 Spartacus UI 中的设计体现一例

关于 Mobile First 的概念,请查看我这篇文章:什么是前端开发中的 mobile first 策略.

下图是 SAP 电商云 Spartacus UI 的搜索结果页面:



其布局设计:template: SearchResultListPageTemplate

Section2 就是上图这块黑色的条幅。

ProductLeftRefinements:左边这块区域。

facet:

template 的定义:

对应的 css:

在 Chrome 开发者工具里将当前设备模拟成 mobile 之后,左边的 ProductLeftRefinements 就消失了:

在手机上,我们需要显式点 filter by,才能打开 facet:

相关文章
|
6月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
6月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
6月前
|
监控 测试技术
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
SAP 电商云修改 Product Catalog Staged 版本数据后,同步到 online 版本的 UI 操作
|
6月前
|
存储 监控 数据库
SAP 电商云 product catalog 从 staged 到 online 两个版本之间的同步
SAP 电商云 product catalog 从 staged 到 online 两个版本之间的同步
|
6月前
|
监控 安全 数据管理
SAP 电商云 Product catalog 的 staged 和 online 两种版本的设计理念
SAP 电商云 Product catalog 的 staged 和 online 两种版本的设计理念
什么是 SAP ABAP 里的 Subscreen
什么是 SAP ABAP 里的 Subscreen
什么是 SAP ABAP 里的 Subscreen
|
6月前
|
网络架构 开发者 UED
Spartacus 2211 的 provideOutlet 方法扩展 UI
Spartacus 2211 的 provideOutlet 方法扩展 UI
Spartacus 2211 的 provideOutlet 方法扩展 UI
|
6月前
|
开发者 UED
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
|
6月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
|
6月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍