NG-ZORRO 文字提示样式解析

Photo by Luca Bravo on Unsplash

NG-ZORRO 中文字提示组件的样式非常酷,我很喜欢。因此我研究了源码的样式部分,搞懂了实现原理。源码中主要涉及了元素定位、平移旋转变换等基本样式属性。我会在文中结合源码一一道来。

在线例子

这边我用 CodePen 写了仿 NG-ZORRO Tooltip 的例子。

基本组件

组件样式主要由小箭头和文本容器两个组件构成。其中小箭头是由一个正方形容器和一个旋转 45度的正方体交叠而成。

为何不直接将小箭头正方形和下面的文字框交叠?这是因为容器背景色带有透明度(0.75),而 CSS 中具有透明度的元素交叠后会起会形成深浅不同的区域,如下所示。

这样就会让用户能够直接看到这个小箭头所处正方形的下半三角。

因此在小箭头的处理方面,我们需要将它放在一个容器中,容器的 overflow 属性设置成 hidden,这样就把小箭头的作用区域限制在容器中,小箭头的下半部分不会在文字区域产生深色的交叠。

组件组合

各个组件是通过绝对定位的方式进行组合。我们只要在组件的容器中定位一个锚点,将它 position 设置为 relative 属性,然后下面所有的组件——小箭头、文本容器都采用绝对定位的方法调整自己的位置即可。

发表评论

电子邮件地址不会被公开。 必填项已用*标注