SAP Spartacus unit detail 页面显示后自动 focus 设置的原理

这个自动 focus 设置的效果是：我们从 Spartacus Unit list 页面，随便选择一行，进入明细页面之后：

键盘 focus 会自动停留在 detail 页面(下图右边红色矩形框内)第一个 focusable 的元素上：

敲回车试试：

发现 (i) icon 是 unit 明细页面第一个 focusable 的元素。

这个功能的实现原理：在 unit 明细页面，即 unit-details.component.html 里，将 cx-org-card 元素里施加 cxFocus, 自动刷新(refreshFocus)的条件为：当 model 发生变化时。

cxFocus 的实现是很 clean 的，因为自动 focus，从语义上来说，还是应该让 auto focus Directive 来负责实现。

和增强之前的 autofocus 相比，refresh autofocus 的增强主要在于 ngOnChanges hook 的实现：

页面第一个 fosuable 的元素，打印在控制台如下：

更多Jerry的原创文章，尽在：“汪子熙”:

SAP Spartacus unit detail 页面显示后自动 focus 设置的原理相关推荐

如何从 SAP Spartacus Product Detail 页面，找到其 Angular 实现 Component 的位置
如图:假设我们通过下列 url,打开 SAP Spartacus 一个产品的明细页面,我们想找出是哪个 Angular Component,实现了该明细页面. http://localhost:420 ...
SAP Spartacus shipping address页面请求2 - Put Address
注意,这是一个HTTP PUT请求: /occ/v2/electronics-spa/users/current/carts/00008679/addresses/delivery?addressId ...
Axure实现提示文本单击显示后自动消失的效果
Axure实现提示文本单击显示后自动消失的效果方法/步骤如图所示,框出的部分为提示文本(已经命名为tooltip),希望达到的效果是默认加载时不显示,点击帮助图标后显示,且2秒后自动消失. 首先在 ...
SAP MM模块-MIGO收货后自动打印收货单
正文部分以下内容还需确认,是否能实现这一功能现记录如下 1. Maintain the Printer Name in SPRO->Matl Mgmt->Inv Mgmt and Ph ...
SAP笔记-物料移动类型和后勤自动科目设置
SAP笔记-物料移动类型和后勤自动科目设置 http://blog.csdn.net/fangkailove/article/details/3889891 物料移动类型和后勤自动科目设置(2009/ ...
Win11 中【使用我的登录信息在更新后自动完成设置】以｢登录前自启｣
前情提要我们知道, 在 Windows 的｢设置｣中, 可以允许部分软件在用户登录后自动运行, 即｢开机自启｣. Windows 是这样解释的: 由于是｢登录时启动｣, 如果你的账户设置了密 ...
SAP Spartacus的登录页面的用户名显示逻辑
SAP Spartacus登录页面如下图所示: 通过login form用户输入的用户名和密码去换取token,拿到token后,调用另一个API,将token作为Authorization字段输入: ...
SAP Spartacus not found页面的显示触发机制 - ErrorPageTemplate
在什么情况下,SAP Spartacus会显示404 not found页面? 请求id为not-found的content page: not-found.handler.ts: semantic路 ...
一种简单地实现 SAP UI5 Master detail 页面的方法
实现效果如下图所示: app view 的实现代码: // @ts-nocheck sap.ui.jsview("jerrylist.view.App", {getControll ...

SAP Spartacus unit detail 页面显示后自动 focus 设置的原理

SAP Spartacus unit detail 页面显示后自动 focus 设置的原理相关推荐

最新文章

热门文章