Mobile first 设计思路在 SAP 电商云 Spartacus UI 中的设计体现一例
2023-09-14 09:02:56 时间
关于 Mobile First 的概念，请查看我这篇文章：什么是前端开发中的 mobile first 策略.
下图是 SAP 电商云 Spartacus UI 的搜索结果页面：
其布局设计：template: SearchResultListPageTemplate
Section2 就是上图这块黑色的条幅。
ProductLeftRefinements：左边这块区域。
facet：
template 的定义：
对应的 css：
在 Chrome 开发者工具里将当前设备模拟成 mobile 之后，左边的 ProductLeftRefinements 就消失了：
在手机上，我们需要显式点 filter by，才能打开 facet：
更多Jerry的原创文章，尽在：“汪子熙”:
相关文章
- 深入学习SAP UI5框架代码系列之四：SAP UI5控件的元数据实现
- sap.ushell.Container.getService.done的设计思路
- SAP S/4HANA里的订单状态管理机制介绍
- 使用中间件从ERP下载SAP sales BOM到CRM
- SAP Spartacus 自定义 theme 实现思路
- SAP 电商云 Spartacus UI feature level directive 的工作原理
- 为什么 SAP 电商云 Spartacus 产品明细页面的自定义 matcher 会重复被调用
- SAP Spartacus Accessibility E2E 端到端测试
- SAP C4C business object的UUID和可读性更好的ID
- 为加快SAP Commerce Cloud在windows服务器上的启动速度，而禁用的一些服务
- SAP CRM service contract和individual object
- 使用 Babel 将基于 ES6 的 SAP UI5 的代码转译成传统 JavaScript 代码
- SAP Spartacus CMS Component的lazy loading懒加载方式