Popover气泡卡片（antd-design组件库）简单使用

快来打我* 2023-10-14 14:42 3阅读 0赞

## **1.Popover气泡卡片** ##

点击/鼠标移入元素，弹出气泡式的卡片浮层。

## **2.****何时使用** ##

当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。

和 Tooltip 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。

组件代码来自： [气泡卡片 Popover - Ant Design][Popover - Ant Design]

## **3.****本地验证前的准备** ##

参考文章【react项目+antd组件-demo:hello-world [react项目+antd组件-demo:hello-world\_西晋的no1的博客-CSDN博客][react_antd_-demo_hello-world_no1_-CSDN]】，将 [气泡卡片 Popover - Ant Design][Popover - Ant Design] 中需要在本地使用的代码复制覆盖**App2.js**中的全部代码，启动代码，可在本地查看现象和更改代码。

## **4.****本地验证****Popover****的简单用法。** ##

复制下图所示代码，了解Popover的简单用法。注意将途中部分代码进行删除。

![bd43e0d580ab4e769a21f5f334983c8c.png][]

## **5.****查看****3****种触发方式的使用方式** ##

复制下图所示代码，了解Popover的3种触发方式。具体方式可参考： [文字提示 Tooltip - Ant Design][Tooltip - Ant Design]

![1bb34dd64a4646da9a06b7d55311acf1.png][]

##  ##

## **6.****查看设置气泡 12 个方向的方法：****p****lacement** ##

复制下图所示代码，了解如何设置气泡 12 个方向：placement。

气泡框位置，可选 top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom。

具体用法参考下述源代码，或： [文字提示 Tooltip - Ant Design][Tooltip - Ant Design]

![2f16e3301e8049acadfa3c97cb1b8aee.png][]

本文仅介绍了组件Popover的部分内容，更多内容请参阅官方文档： [气泡卡片 Popover - Ant Design][Popover - Ant Design]

[Popover - Ant Design]: https://ant.design/components/popover-cn
[react_antd_-demo_hello-world_no1_-CSDN]: https://blog.csdn.net/xijinno1/article/details/130979732
[bd43e0d580ab4e769a21f5f334983c8c.png]: https://img-blog.csdnimg.cn/bd43e0d580ab4e769a21f5f334983c8c.png
[Tooltip - Ant Design]: https://ant.design/components/tooltip-cn
[1bb34dd64a4646da9a06b7d55311acf1.png]: https://img-blog.csdnimg.cn/1bb34dd64a4646da9a06b7d55311acf1.png
[2f16e3301e8049acadfa3c97cb1b8aee.png]: https://img-blog.csdnimg.cn/2f16e3301e8049acadfa3c97cb1b8aee.png