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