Popover 气泡卡片
点击/鼠标移入元素,弹出气泡式的卡片浮层。
何时使用#
当目标元素有进一步的描述和相关操作时,可以收纳到卡片中,根据用户的操作行为进行展现。
和 Tooltip
的区别是,用户可以对浮层上的元素进行操作,因此它可以承载更复杂的内容,比如链接或按钮等。
API#
参数 |
说明 |
类型 |
默认值 |
trigger |
触发行为,可选 hover/focus/click |
string |
hover |
placement |
气泡框位置,可选 top/left/right/bottom/topLeft/topRight/bottomLeft/bottomRight/leftTop/leftBottom/rightTop/rightBottom |
string |
top |
title |
卡片标题 |
React.Element |
无 |
overlay |
卡片内容 |
React.Element |
无 |
prefixCls |
浮层的类名 |
string |
ant-popover |
visible |
用于手动控制浮层显隐 |
boolean |
false |
onVisibleChange |
显示隐藏改变的回调 |
function |
无 |
代码演示
import { Popover, Button } from 'antd';
const content = <div>
<p>内容</p>
<p>内容</p>
</div>;
ReactDOM.render(
<Popover overlay={content} title="标题">
<Button type="primary">弹出卡片</Button>
</Popover>
, document.getElementById('components-popover-demo-basic'));
import { Popover, Button } from 'antd';
const content = <div>
<p>内容</p>
<p>内容</p>
</div>;
ReactDOM.render(<div>
<Popover overlay={content} title="标题" trigger="hover">
<Button>移入</Button>
</Popover>
<Popover overlay={content} title="标题" trigger="focus">
<Button>聚焦</Button>
</Popover>
<Popover overlay={content} title="标题" trigger="click">
<Button>点击</Button>
</Popover>
</div>, document.getElementById('components-popover-demo-triggertype'));
import { Popover, Button } from 'antd';
const text = <span>标题</span>;
const content = <div>
<p>内容</p>
<p>内容</p>
</div>;
ReactDOM.render(<div>
<div style={{marginLeft: 60}}>
<Popover placement="topLeft" title={text} overlay={content} trigger="click">
<Button>上左</Button>
</Popover>
<Popover placement="top" title={text} overlay={content} trigger="click">
<Button>上边</Button>
</Popover>
<Popover placement="topRight" title={text} overlay={content} trigger="click">
<Button>上右</Button>
</Popover>
</div>
<div style={{width: 60, float: 'left'}}>
<Popover placement="leftTop" title={text} overlay={content} trigger="click">
<Button>左上</Button>
</Popover>
<Popover placement="left" title={text} overlay={content} trigger="click">
<Button>左边</Button>
</Popover>
<Popover placement="leftBottom" title={text} overlay={content} trigger="click">
<Button>左下</Button>
</Popover>
</div>
<div style={{width: 60, marginLeft: 270}}>
<Popover placement="rightTop" title={text} overlay={content} trigger="click">
<Button>右上</Button>
</Popover>
<Popover placement="right" title={text} overlay={content} trigger="click">
<Button>右边</Button>
</Popover>
<Popover placement="rightBottom" title={text} overlay={content} trigger="click">
<Button>右下</Button>
</Popover>
</div>
<div style={{marginLeft: 60, clear: 'both'}}>
<Popover placement="bottomLeft" title={text} overlay={content} trigger="click">
<Button>下左</Button>
</Popover>
<Popover placement="bottom" title={text} overlay={content} trigger="click">
<Button>下边</Button>
</Popover>
<Popover placement="bottomRight" title={text} overlay={content} trigger="click">
<Button>下右</Button>
</Popover>
</div>
</div>, document.getElementById('components-popover-demo-placement'));
import { Popover, Button } from 'antd';
const App = React.createClass({
getInitialState() {
return {
visible: false
};
},
hide() {
this.setState({
visible: false
});
},
handleVisibleChange(visible) {
this.setState({ visible });
},
render() {
const content = <div>
<a onClick={this.hide}>关闭卡片</a>
</div>;
return <Popover overlay={content} title="标题" trigger="click"
visible={this.state.visible} onVisibleChange={this.handleVisibleChange}>
<Button type="primary">点击弹出卡片</Button>
</Popover>;
}
});
ReactDOM.render(<App />, document.getElementById('components-popover-demo-control'));