开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

社区首页 >专栏 >Mobile first 设计思路在 SAP 电商云 Spartacus UI 中的设计体现一例

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

作者头像

Jerry Wang

发布于 2022-01-11 11:58:36

2230

发布于 2022-01-11 11:58:36

举报

文章被收录于专栏：Jerry的SAP技术分享Jerry的SAP技术分享

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

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

其布局设计：template: SearchResultListPageTemplate

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

ProductLeftRefinements：左边这块区域。

facet：

template 的定义：

对应的 css：

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

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022-01-06 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

0 条评论

热度

最新

LV.

相关产品与服务

云开发 CLI 工具

云开发 CLI 工具（Cloudbase CLI Devtools，CCLID）是云开发官方指定的 CLI 工具，可以帮助开发者快速构建 Serverless 应用。CLI 工具提供能力包括文件储存的管理、云函数的部署、模板项目的创建、HTTP Service、静态网站托管等，您可以专注于编码，无需在平台中切换各类配置。

精选特惠用云无忧