关于SAP Spartacus focus视觉效果的实现原理分析

原创
2021/02/12 18:35
阅读数 129

When we press tab key on Spartacus page, there will be a focus state border displaying which wraps the control being focused. The border is drawn as light blue color. See my screenshot1.My question: is this behavior implemented by some coding inside Spartacus, or provided by Angular out of the box? My assumption is, at least, it’s not the browser’s default behavior.I created a simple HTML page:

<html>
<head>
	<style>
	button {
    
    
    
		padding: 1px;
		margin: 5px;
	}
	</style>
</head>
<body>
<div>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
</div>
</body>
</html>

And the focus border color is black. See my screenshot 2.
在这里插入图片描述
在这里插入图片描述

答案:
Its a bit of a mix between Spartacus and default html. Usually, that border box will appear over any focused html element by default. But as we build more complex apps with angular for example, we can end up losing this default border box due to some way we’ve styled an element or have veered from default browser behaviour. In Spartacus’s instance, we have implemented a border box in css to make sure we can see this focused element that is a little more robust and themed so it works with more of our custom elements

I successfully find the implementation where our custom focus border is styled: projects\storefrontstyles\scss\cxbase\mixins_visible-focus.scss

本文同步分享在 博客“汪子熙”(CSDN)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部
返回顶部
顶部