NG-ZORRO 文字提示样式解析

Photo by Luca Bravo on Unsplash

NG-ZORRO 中文字提示组件的样式非常酷,我很喜欢。因此我研究了源码的样

式部分,搞懂了实现原理。源码中主要涉及了元素定位、平移旋转变换等基本

样式属性。我会在文中结合源码一一道来。

在线例子

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

基本组件

组件样式主要由小箭头和文本容器两个组件构成。其中小箭头是由一个正方形

容器和一个旋转 45度的正方体交叠而成。

为何不直接将小箭头正方形和下面的文字框交叠?这是因为容器背景色带有透

明度(0.75),而 CSS 中具有透明度的元素交叠后会起会形成深浅不同的区

域,如下所示。

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

因此在小箭头的处理方面,我们需要将它放在一个容器中,容器的 overflow

属性设置成 hidden,这样就把小箭头的作用区域限制在容器中,小箭头的下半

部分不会在文字区域产生深色的交叠。

组件组合

各个组件是通过绝对定位的方式进行组合。我们只要在组件的容器中定位一个

锚点,将它 position 设置为 relative 属性,然后下面所有的组件——小箭头、

文本容器都采用绝对定位的方法调整自己的位置即可。

发表评论

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