- 组件总览
- 通用
- 布局
- 导航
- 数据录入
- 数据展示
- 反馈
- 其他
点击/鼠标移入元素,弹出气泡式的卡片浮层。
当目标元素有进一步的描述和相关操作时,可以收纳到卡片中,根据用户的操作行为进行展现。
和 Tooltip
的区别是,用户可以对浮层上的元素进行操作,因此它可以承载更复杂的内容,比如链接或按钮等。
import 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;
}
import { 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;
}
import 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;
import { 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;
import 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;
}
import 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;
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
content | 卡片内容 | ReactNode | () => ReactNode | - | |
title | 卡片标题 | ReactNode | () => ReactNode | - |
更多属性请参考 Tooltip。
请确保 Popover
的子元素能接受 onMouseEnter
、onMouseLeave
、onFocus
、onClick
事件。