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