关于SAP Spartacus focus视觉效果的实现原理分析
关于SAP Spartacus focus视觉效果的实现原理分析
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