SAP Spartacus org unit页面的三种focus border及细节讨论

简介: SAP Spartacus org unit页面的三种focus border及细节讨论

最外面的矩形框,是table row里任意一个元素被focus之后,触发整个cx-table :focus-within的选择器后生成的效果:


image.png


中间的一条竖线,是a标签 focus后的效果;

button标签focus之后,产生一个小的矩形框;


注意cx-table:focus-within的outline-offset -2px是必须的:


image.png


否则最后整个table row的focus-within的border,就是下图上下两根线,会超出table border灰线,看起来很ugly.


image.png


如果直接在Chrome开发者工具里选中标签页,然后在Styles里手动勾上:focus-within,此时效果如下:


image.png


关于a标签页的focus border,我还有一些有趣的发现。


下列这两个property去掉后,又能看到a的focus border了:


width: 100%;

min-height: 74px;

image.png


加上之后,又变成只有最左边有focus border了:


image.png


SAP Spartacus这个自适应的table,如果屏幕尺寸过窄,则只会显示name这一列:


image.png


在这种窄屏的显示风格下,此时a标签的focus border就正常了:

image.png


相关文章
|
4月前
|
缓存 前端开发 JavaScript
Spartacus SSR 使用场景里,CDN 应该 cache 哪些类型的页面
Spartacus SSR 使用场景里,CDN 应该 cache 哪些类型的页面
72 0
|
4月前
|
JSON 开发者 数据格式
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
26 0
|
4月前
|
搜索推荐 开发者 UED
关于 SAP Spartacus 层的 UI 设计
关于 SAP Spartacus 层的 UI 设计
42 0
|
4月前
|
开发者 UED
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
25 0
|
7月前
|
数据库
什么是 SAP ABAP 系统的 LUW (Logical Unit of Work)概念
什么是 SAP ABAP 系统的 LUW (Logical Unit of Work)概念
43 0
|
7月前
|
前端开发 搜索推荐 JavaScript
什么是 SAP Spartacus 的 CMS Page Connector
什么是 SAP Spartacus 的 CMS Page Connector
47 0
|
7月前
|
JavaScript 容器
关于 SAP Spartacus generic-link component 的模板代码
关于 SAP Spartacus generic-link component 的模板代码
42 2
|
7月前
|
存储 API 数据库
SAP BTP 平台 ABAP 编程环境如何维护自定义 Unit Of Measure 数据库表 T006
SAP BTP 平台 ABAP 编程环境如何维护自定义 Unit Of Measure 数据库表 T006
60 0
|
7月前
|
缓存 负载均衡 前端开发
SAP Spartacus 和 Sticky session 相关的话题
SAP Spartacus 和 Sticky session 相关的话题
39 0
|
7月前
|
存储
SAP Emarsys 和 SAP Spartacus 的集成
SAP Emarsys 和 SAP Spartacus 的集成
52 0