Popover气泡卡片(antd-design组件库)简单使用

1.Popover气泡卡片

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

2.何时使用

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

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

组件代码来自: 气泡卡片 Popover - Ant Design

3.本地验证前的准备

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

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

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

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

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

6.查看设置气泡 12 个方向的方法:placement

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

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

具体用法参考下述源代码,或: 文字提示 Tooltip - Ant Design

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

猜你喜欢

转载自blog.csdn.net/xijinno1/article/details/132137167