SAP Spartacus visible-focus是如何施加到HTML element上的

下图展示了元素padding的效果，padding-inline-end改成140px后, 甩尾效果非常突出：

变量–cx-color-visual-focus:

根据关键字搜索：发现被赋给outline-color:

可以把visible-focus看成一个place holder，scss被编译成css时会被展开：

这个visible-focus是如何施加到HTML element上的？
使用include导入：

答案在这里，施加到cx-table:focus-within上面：

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

SAP Spartacus visible-focus是如何施加到HTML element上的相关推荐

SAP Spartacus Visible Focus
https://sap.github.io/spartacus-docs/visible-focus/ In Spartacus, focusable elements are styled with ...
SAP Spartacus auto focus Directive响应模型变化的一些触发时机例子
tabDirective: disableMouseFocus: trapDirective: 这就是我正在工作的auto focus Directive: 更多Jerry的原创文章,尽在:" ...
SAP Spartacus lock focus Directive的工作原理示意图
源代码: import {AfterViewInit,Directive,ElementRef,EventEmitter,HostBinding,HostListener,OnInit,Output, ...
SAP Spartacus lock focus directive如何判断有没有focusable children
hasFocusableChildren:返回boolean focusable:返回HTMLElement数组 service的原本类型是LockFocusService 没有任何实现: 再往上看T ...
SAP Spartacus 如何借助env-cmd 实现 B2B 和 B2C 功能启动的无缝切换
在之前的 SAP Spartacus 标准开发中,每次我从 Github 上 clone 了最新的代码后,必须手动修改 environment.ts 里的配置值,将 CX_BASE_URL 和 b2b ...
SAP Spartacus org unit页面的三种focus border及细节讨论
最外面的矩形框,是table row里任意一个元素被focus之后,触发整个cx-table :focus-within的选择器后生成的效果: 中间的一条竖线,是a标签 focus后的效果: butt ...
SAP Spartacus Popover Directive 构造函数的用途分析
该构造函数位于文件 popover.directive.ts 里: 第 11 行 cxPopOver Directive 施加到 button 元素上之后,运行时,cxPopOver Directiv ...
SAP Spartacus checkout 流程使用 url 粘贴直接跳转到 delivery mode不能打开页面的原因
http://localhost:4200/electronics-spa/en/USD/checkout/delivery-mode 没有任何错误消息,白屏: 能看到向 checkoutDelive ...
SAP Spartacus 服务器端渲染文件 server.js 和构建后的 main.js 对比
构建之前: 构建之后: 其中 express__WEBPACK_IMPORTED_MODULE_3__ 来自 module uX2x: uX2x 来自 node_modules/express/ind ...

SAP Spartacus visible-focus是如何施加到HTML element上的

SAP Spartacus visible-focus是如何施加到HTML element上的相关推荐

最新文章

热门文章