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>
, mountNode);

基本

最简单的用法。

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>, mountNode);

三种触发方式

鼠标移入、聚集、点击。

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>, mountNode);

位置

位置有十二个方向。

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 />, mountNode);

从浮层内关闭

使用 visible 属性控制浮层显示。