气泡卡片 Popover - Ant Design
Enable JavaScript to run this app.
Ant Design⌘ K设计研发组件博客资源5.4.6更多中En组件总览通用Button按钮Icon图标Typography排版布局Divider分割线Grid栅格Layout布局Space间距导航Anchor锚点Breadcrumb面包屑Dropdown下拉菜单Menu导航菜单Pagination分页Steps步骤条数据录入AutoComplete自动完成Cascader级联选择Checkbox多选框DatePicker日期选择框Form表单Input输入框InputNumber数字输入框Mentions提及Radio单选框Rate评分Select选择器Slider滑动输入条Switch开关TimePicker时间选择框Transfer穿梭框TreeSelect树选择Upload上传数据展示Avatar头像Badge徽标数Calendar日历Card卡片Carousel走马灯Collapse折叠面板Descriptions描述列表Empty空状态Image图片List列表Popover气泡卡片QRCode二维码Segmented分段控制器Statistic统计数值Table表格Tabs标签页Tag标签Timeline时间轴Tooltip文字提示Tour漫游式引导Tree树形控件反馈Alert警告提示Drawer抽屉Message全局提示Modal对话框Notification通知提醒框Popconfirm气泡确认框Progress进度条Result结果Skeleton骨架屏Spin加载中其他Affix固钉App包裹组件ConfigProvider全局化配置FloatButton悬浮按钮Watermark水印何时使用代码演示基本三种触发方式位置箭头展示从浮层内关闭悬停点击弹出窗口API注意Design TokenPopover气泡卡片List列表QRCode二维码相关资源Ant Design ChartsAnt Design ProAnt Design Pro ComponentsAnt Design MobileAnt Design MiniAnt Design Landing-首页模板集Scaffolds-脚手架市场Umi-React 应用开发框架dumi-组件/文档研发工具qiankun-微前端框架ahooks-React Hooks 库Ant Motion-设计动效国内镜像站点 🇨🇳社区Awesome Ant DesignMediumTwitterAnt Design 语雀专栏Ant Design 知乎专栏体验科技专栏SEE Conf-蚂蚁体验科技大会加入我们帮助GitHub更新日志常见问题报告 Bug议题讨论区StackOverflowSegmentFault更多产品语雀-构建你的数字花园AntV-数据可视化解决方案Egg-企业级 Node.js 框架Kitchen-Sketch 工具集蚂蚁体验科技主题编辑器Made with ❤ by蚂蚁集团和 Ant Design 开源社区点击/鼠标移入元素，弹出气泡式的卡片浮层。何时使用当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。和 Tooltip 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。代码演示Hover me基本最简单的用法，浮层的大小由内容区域决定。TypeScriptJavaScriptimport React from 'react';
import { Button, Popover } from 'antd';
const content = (
<div>
<p>Content</p>
<p>Content</p>
</div>
);
const App: React.FC = () => (
<Popover content={content} title="Title">
<Button type="primary">Hover me</Button>
</Popover>
);
export default App;
.ant-popover-content p {
margin: 0;
}TLTopTRLTLeftLBRTRightRBBLBottomBR位置位置有十二个方向。TypeScriptJavaScriptimport { Button, Popover } from 'antd';
import React from 'react';
const text = <span>Title</span>;
const content = (
<div>
<p>Content</p>
<p>Content</p>
</div>
);
const buttonWidth = 70;
const App: React.FC = () => (
<div>
<div style={{ marginLeft: buttonWidth, whiteSpace: 'nowrap' }}>
<Popover placement="topLeft" title={text} content={content} trigger="click">
<Button>TL</Button>
</Popover>
<Popover placement="top" title={text} content={content} trigger="click">
<Button>Top</Button>
</Popover>
<Popover placement="topRight" title={text} content={content} trigger="click">
<Button>TR</Button>
</Popover>
</div>
<div style={{ width: buttonWidth, float: 'left' }}>
<Popover placement="leftTop" title={text} content={content} trigger="click">
<Button>LT</Button>
</Popover>
<Popover placement="left" title={text} content={content} trigger="click">
<Button>Left</Button>
</Popover>
<Popover placement="leftBottom" title={text} content={content} trigger="click">
<Button>LB</Button>
</Popover>
</div>
<div style={{ width: buttonWidth, marginLeft: buttonWidth * 4 + 24 }}>
<Popover placement="rightTop" title={text} content={content} trigger="click">
<Button>RT</Button>
</Popover>
<Popover placement="right" title={text} content={content} trigger="click">
<Button>Right</Button>
</Popover>
<Popover placement="rightBottom" title={text} content={content} trigger="click">
<Button>RB</Button>
</Popover>
</div>
<div style={{ marginLeft: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
<Popover placement="bottomLeft" title={text} content={content} trigger="click">
<Button>BL</Button>
</Popover>
<Popover placement="bottom" title={text} content={content} trigger="click">
<Button>Bottom</Button>
</Popover>
<Popover placement="bottomRight" title={text} content={content} trigger="click">
<Button>BR</Button>
</Popover>
</div>
</div>
);
export default App;
#components-popover-demo-placement .ant-btn {
margin-left: 0;
margin-right: 8px;
margin-bottom: 8px;
width: 70px;
text-align: center;
padding: 0;
#components-popover-demo-placement .ant-btn {
margin-left: 8px;
margin-right: 0;
}Click me从浮层内关闭使用 open 属性控制浮层显示。TypeScriptJavaScriptimport React, { useState } from 'react';
import { Button, Popover } from 'antd';
const App: React.FC = () => {
const [open, setOpen] = useState(false);
const hide = () => {
setOpen(false);
};
const handleOpenChange = (newOpen: boolean) => {
setOpen(newOpen);
};
return (
<Popover
content={<a onClick={hide}>Close</a>}
title="Title"
trigger="click"
open={open}
onOpenChange={handleOpenChange}
<Button type="primary">Click me</Button>
</Popover>
);
};
export default App;
Hover meFocus meClick me三种触发方式鼠标移入、聚集、点击。TypeScriptJavaScriptimport { Button, Popover, Space } from 'antd';
import React from 'react';
const content = (
<div>
<p>Content</p>
<p>Content</p>
</div>
);
const App: React.FC = () => (
<Space wrap>
<Popover content={content} title="Title" trigger="hover">
<Button>Hover me</Button>
</Popover>
<Popover content={content} title="Title" trigger="focus">
<Button>Focus me</Button>
</Popover>
<Popover content={content} title="Title" trigger="click">
<Button>Click me</Button>
</Popover>
</Space>
);
export default App;
ShowHideCenterContentTLTopTRLTLeftLBRTRightRBBLBottomBR箭头展示通过 arrow 属性隐藏箭头。TypeScriptJavaScriptimport React, { useMemo, useState } from 'react';
import { Button, Divider, Popover, Segmented } from 'antd';
const text = <span>Title</span>;
const content = (
<div>
<p>Content</p>
<p>Content</p>
</div>
);
const buttonWidth = 70;
const App: React.FC = () => {
const [showArrow, setShowArrow] = useState(true);
const [arrowAtCenter, setArrowAtCenter] = useState(false);
const mergedArrow = useMemo(() => {
if (arrowAtCenter) return { pointAtCenter: true };
return showArrow;
}, [showArrow, arrowAtCenter]);
return (
<div className="demo">
<Segmented
options={['Show', 'Hide', 'Center']}
onChange={(val) => {
setShowArrow(val !== 'Hide');
setArrowAtCenter(val === 'Center');
}}
/>
<Divider orientation="center">Content</Divider>
<div style={{ marginLeft: buttonWidth, whiteSpace: 'nowrap' }}>
<Popover placement="topLeft" title={text} content={content} arrow={mergedArrow}>
<Button>TL</Button>
</Popover>
<Popover placement="top" title={text} content={content} arrow={mergedArrow}>
<Button>Top</Button>
</Popover>
<Popover placement="topRight" title={text} content={content} arrow={mergedArrow}>
<Button>TR</Button>
</Popover>
</div>
<div style={{ width: buttonWidth, float: 'left' }}>
<Popover placement="leftTop" title={text} content={content} arrow={mergedArrow}>
<Button>LT</Button>
</Popover>
<Popover placement="left" title={text} content={content} arrow={mergedArrow}>
<Button>Left</Button>
</Popover>
<Popover placement="leftBottom" title={text} content={content} arrow={mergedArrow}>
<Button>LB</Button>
</Popover>
</div>
<div style={{ width: buttonWidth, marginLeft: buttonWidth * 4 + 24 }}>
<Popover placement="rightTop" title={text} content={content} arrow={mergedArrow}>
<Button>RT</Button>
</Popover>
<Popover placement="right" title={text} content={content} arrow={mergedArrow}>
<Button>Right</Button>
</Popover>
<Popover placement="rightBottom" title={text} content={content} arrow={mergedArrow}>
<Button>RB</Button>
</Popover>
</div>
<div style={{ marginLeft: buttonWidth, clear: 'both', whiteSpace: 'nowrap' }}>
<Popover placement="bottomLeft" title={text} content={content} arrow={mergedArrow}>
<Button>BL</Button>
</Popover>
<Popover placement="bottom" title={text} content={content} arrow={mergedArrow}>
<Button>Bottom</Button>
</Popover>
<Popover placement="bottomRight" title={text} content={content} arrow={mergedArrow}>
<Button>BR</Button>
</Popover>
</div>
</div>
);
};
export default App;
.code-box-demo .demo {
overflow: auto;
.code-box-demo .ant-btn {
margin-right: 8px;
margin-bottom: 8px;
.code-box-demo .ant-btn-rtl {
margin-right: 0;
margin-left: 8px;
margin-bottom: 8px;
#components-popover-demo-arrow .ant-btn {
width: 70px;
text-align: center;
padding: 0;
}Hover and click / 悬停并单击悬停点击弹出窗口以下示例显示如何创建可悬停和单击的弹出窗口。TypeScriptJavaScriptimport React, { useState } from 'react';
import { Button, Popover } from 'antd';
const App: React.FC = () => {
const [clicked, setClicked] = useState(false);
const [hovered, setHovered] = useState(false);
const hide = () => {
setClicked(false);
setHovered(false);
};
const handleHoverChange = (open: boolean) => {
setHovered(open);
setClicked(false);
};
const handleClickChange = (open: boolean) => {
setHovered(false);
setClicked(open);
};
const hoverContent = <div>This is hover content.</div>;
const clickContent = <div>This is click content.</div>;
return (
<Popover
style={{ width: 500 }}
content={hoverContent}
title="Hover title"
trigger="hover"
open={hovered}
onOpenChange={handleHoverChange}
<Popover
content={
<div>
{clickContent}
<a onClick={hide}>Close</a>
</div>
title="Click title"
trigger="click"
open={clicked}
onOpenChange={handleClickChange}
<Button>Hover and click / 悬停并单击</Button>
</Popover>
</Popover>
);
};
export default App;
API参数说明类型默认值版本content卡片内容ReactNode | () => ReactNode-title卡片标题ReactNode | () => ReactNode-更多属性请参考 Tooltip。注意请确保 Popover 的子元素能接受 onMouseEnter、onMouseLeave、onFocus、onClick 事件。Design TokenGlobal TokenToken 名称描述类型默认值colorBgElevated浮层容器背景色，在暗色模式下该 token 的色值会比 `colorBgContainer` 要亮一些。例如：模态框、弹出框、菜单等。string#ffffffcolorSplit用于作为分割线的颜色，此颜色和 colorBorderSecondary 的颜色一致，但是用的是透明色。stringrgba(5, 5, 5, 0.06)colorText最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。stringrgba(0, 0, 0, 0.88)colorTextHeading控制标题字体颜色。stringrgba(0, 0, 0, 0.88)borderRadiusLGLG号圆角，用于组件中的一些大圆角，如 Card、Modal 等一些组件样式。number8borderRadiusOuter外部圆角number4borderRadiusXSXS号圆角，用于组件中的一些小圆角，如 Segmented 、Arrow 等一些内部圆角的组件样式中。number2boxShadowSecondary控制元素二级阴影样式。string
0 6px 16px 0 rgba(0, 0, 0, 0.08),
0 3px 6px -4px rgba(0, 0, 0, 0.12),
0 9px 28px 8px rgba(0, 0, 0, 0.05)
controlHeightAnt Design 中按钮和输入框等基础控件的高度number32fontFamilyAnt Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。string-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
'Noto Color Emoji'fontSize设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。number14fontWeightStrong控制标题类组件（如 h1、h2、h3）或选中项的字体粗细。number600lineHeight文本行高number1.5714285714285714lineType用于控制组件边框、分割线等的样式，默认是实线stringsolidlineWidth用于控制组件边框、分割线等的宽度number1marginXS控制元素外边距，小尺寸。number8motionDurationMid动效播放速度，中速。用于中型元素动画交互string0.2smotionEaseInOutCirc预设动效曲率stringcubic-bezier(0.78, 0.14, 0.15, 0.86)motionEaseOutCirc预设动效曲率stringcubic-bezier(0.08, 0.82, 0.17, 1)padding控制元素的内间距。number16paddingSM控制元素的小内间距。number12sizePopupArrow组件箭头的尺寸number16wireframe用于将组件的视觉效果变为线框化，如果需要使用 V4 的效果，需要开启配置项booleanfalsezIndexPopupBase浮层类组件的基础 Z 轴值，用于一些悬浮类的组件的可以基于该值 Z 轴控制层级，例如 FloatButton、 Affix、Modal 等number1000