Popover 气泡卡片

点击/鼠标移入元素，弹出气泡式的卡片浮层。

import { Popover } from 'uiw';
// or
import Popover from '@uiw/react-popover';

基础用法

最简单的用法。

```jsx mdx:preview&bg=#fff import React from 'react'; import { Popover, Card, Icon,Row,Col, Button } from 'uiw';

class Demo extends React.Component { constructor() { super(); this.state = { isOpen: false, isOpen1: false, } } onClick(field) { this.setState({ [field]: false }); }

handleVisibleChange(field, isOpen) { this.setState({ [field]:isOpen }); } render() { return ( <Row style={{ alignItems: 'center' }}> <Popover trigger="click" placement="top" isOpen={this.state.isOpen} onVisibleChange={this.handleVisibleChange.bind(this, 'isOpen')} content={ <Card bordered={false} title="Card标题" extra={更多} style={{ width: 200 }}>

### 位置

位置有 `12` 个方向，根据 `placement` 参数来设置。

```jsx mdx:preview&bg=#fff
import React from 'react';
import { Popover, Card, Button } from 'uiw';

const btnStl = {position: 'relative', width: 70 }
const content = (
  <Card bordered={false} style={{ width: 120 }}>
    <div>Are you sure you want to delete these items? You won't be able to recover them.</div>
  </Card>
)
export default function Demo() {
  return (
    <div>
      <div style={{ position: 'relative' }}>

        <Popover trigger="click" placement="topLeft" content={content}>
          <Button style={{ ...btnStl, left: 70 }}>TL</Button>
        </Popover>
        <Popover trigger="click" placement="top" content={content}>
          <Button style={{ ...btnStl, left: 70}}>Top</Button>
        </Popover>
        <Popover trigger="click" placement="topRight" content={content}>
          <Button style={{ ...btnStl, left: 70 }}>TR</Button>
        </Popover>

      </div>
      <div style={{ position: 'relative', paddingTop: 10 }}>

        <Popover trigger="click" placement="leftTop" content={content}>
          <Button style={{ ...btnStl }}>LT</Button>
        </Popover>
        <Popover trigger="click" placement="rightTop" content={content}>
          <Button style={{ ...btnStl, left: 216 }}>RT</Button>
        </Popover>

      </div>
      <div style={{ position: 'relative', paddingTop: 10 }}>

        <Popover trigger="click" placement="left" content={content}>
          <Button style={{ ...btnStl }}>Left</Button>
        </Popover>
        <Popover trigger="click" placement="right" content={content}>
          <Button style={{ ...btnStl, left: 216 }}>Right</Button>
        </Popover>

      </div>
      <div style={{ position: 'relative', paddingTop: 10 }}>

        <Popover trigger="click" placement="leftBottom" content={content}>
          <Button style={{ ...btnStl }}>LB</Button>
        </Popover>
        <Popover trigger="click" placement="rightBottom" content={content}>
          <Button style={{ ...btnStl, left: 216 }}>RB</Button>
        </Popover>

      </div>
      <div style={{ position: 'relative', paddingTop: 10 }}>

        <Popover trigger="click" placement="bottomLeft" content={content}>
          <Button style={{ ...btnStl, left: 70 }}>BL</Button>
        </Popover>
        <Popover trigger="click" placement="bottom" content={content}>
          <Button style={{ ...btnStl, left: 70 }}>Bottom</Button>
        </Popover>
        <Popover trigger="click" placement="bottomRight" content={content}>
          <Button style={{ ...btnStl, left: 70 }}>BR</Button>
        </Popover>

      </div>
    </div>
  );
}

鼠标经过弹出目标

```jsx mdx:preview&bg=#fff import React from 'react'; import { Popover, Card, Button } from 'uiw';

const btnStl = {position: 'relative', width: 70 } const content = ( <Card style={{ width: 220 }} bordered={false} title="Card标题" footer={ 这里是页脚 } >

### 焦点展示

通过设置 `trigger="focus"` 让 `Input` 组件在获取焦点的时候展示 `Popover`

```jsx mdx:preview&bg=#fff
import React from 'react';
import { Popover, Card, Button, Input } from 'uiw';

const btnStl = {position: 'relative', width: 70 }
class Demo extends React.Component {
  constructor() {
    super();
    this.state = {
      isOpen: false,
      value: '',
    }
  }
  onClick(val) {
    const state = { isOpen: false }
    if (val) {
      state.value = val;
    }
    if (val === null) state.value = '';
    this.setState({ ...state });
  }
  handleVisibleChange(isOpen) {
    this.setState({ isOpen });
  }
  onChange(e) {
    this.setState({ value: e.target.value });
  }
  renderPopup() {
    return (
      <Card
        style={{ width: 220 }}
        bordered={false}
        footer={
          <div style={{ display: "flex", justifyContent: "flex-end" }}>
            <Button size="small" onClick={this.onClick.bind(this, undefined)}>
              取消
            </Button>
            <Button size="small" onClick={this.onClick.bind(this, null)}>
              清空
            </Button>
            <Button type="success" size="small" onClick={this.onClick.bind(this, '这是向 Input 输入框插入的内容')}>
              插入内容
            </Button>
          </div>
        }
      >
        <div>通过设置 `trigger="focus"` 让 `Input` 组件在获取焦点的时候展示 `Popover`</div>
      </Card>
    )
  }
  render() {
    return (
      <div>
        <div style={{ width: 200 }}>
          <Popover
            trigger="focus"
            placement="top"
            isOpen={this.state.isOpen}
            onVisibleChange={this.handleVisibleChange.bind(this)}
            content={this.renderPopup()}
          >
            <Input placeholder="请输入内容" value={this.state.value} onChange={this.onChange.bind(this)}/>
          </Popover>
        </div>
      </div>
    )
  }
}
export default Demo;

usePortal

设置 usePortal={false} 将模态对话框生成到根节点的里面，这样为了计算位置准确，你需要将父层样式设为 position: relative; 。

```jsx mdx:preview&bg=#fff import React from 'react'; import { Popover, Card, Button } from 'uiw';

class Demo extends React.Component { constructor() { super(); this.state = { isOpen: false, } } onClick() { this.setState({ isOpen: false }); } handleVisibleChange(isOpen) { this.setState({ isOpen }); } render() { return (

### Confirm 用法

```jsx mdx:preview&bg=#fff
import React from 'react';
import { Popover, Row } from 'uiw';

class Demo extends React.Component {
  render() {
    return (
      <Row style={{ alignItems: 'center' }}>
        <Popover.Confirm title="Are you sure delete this?">delete</Popover.Confirm>
      </Row>
    )
  }
}

export default Demo;

Props

Confirm Props

更多属性请参考 OverlayTrigger。