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 无
overlayClassName 卡片类名 string 无
overlayStyle 卡片样式 object 无
visible 用于手动控制浮层显隐 boolean false
onVisibleChange 显示隐藏改变的回调 function 无
getTooltipContainer 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。示例 Function(triggerNode) () => document.body

代码演示 

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 属性控制浮层显示。