Element-React Popover 彈出框

基礎(chǔ)用法

Popover 的屬性與 Tooltip 很類(lèi)似，它們都是基于Popper.js開(kāi)發(fā)的，因此對(duì)于重復(fù)屬性，請(qǐng)參考 Tooltip 的文檔，在此文檔中不做詳盡解釋。

trigger屬性用于設(shè)置何時(shí)觸發(fā) Popover ，提供三種觸發(fā)方式：hover, click 和 focus。

render() {
  return (
    <div>
      <Popover placement="top-start" title="標(biāo)題" width="200" trigger="hover" content="這是一段容,這是一段容,這是一段容,這是一段容。">
        <Button>hover 激活</Button>
      </Popover>
      <Popover placement="bottom" title="標(biāo)題" width="200" trigger="click" content="這是一段容,這是一段容,這是一段容,這是一段容。">
        <Button>click 激活</Button>
      </Popover>
      <Popover placement="right" title="標(biāo)題" width="200" trigger="focus" content="這是一段容,這是一段容,這是一段容,這是一段容。">
        <Button>focus 激活</Button>
      </Popover>
    </div>
  )
}

嵌套信息

可以在 Popover 中嵌套多種類(lèi)型信息，以下為嵌套表格的例子。

利用分發(fā)取代content屬性

constructor(props){
  super(props);


  this.table = {
    columns: [
      {
        label: "日期",
        prop: "date",
        width: 150
      },
      {
        label: "姓名",
        prop: "name",
        width: 100
      },
      {
        label: "地址",
        prop: "address",
        width: 300
      }
    ],
    data: [{
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀區(qū)金沙江路 1518 弄'
    }, {
      date: '2016-05-04',
      name: '王小虎',
      address: '上海市普陀區(qū)金沙江路 1517 弄'
    }, {
      date: '2016-05-01',
      name: '王小虎',
      address: '上海市普陀區(qū)金沙江路 1519 弄'
    }, {
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀區(qū)金沙江路 1516 弄'
    }]
  }
}


render() {
  return (
    <Popover placement="right" title="標(biāo)題" width="400" trigger="click" content={(
      <Table
       style={{width: '100%'}}
       stripe={true}
       columns={this.table.columns}
       data={this.table.data} />
    )}>
      <Button>click 激活</Button>
    </Popover>
  )
}

嵌套操作

當(dāng)然，你還可以嵌套操作，這相比 Dialog 更為輕量：

constructor(props){
  super(props);


  this.state = {};
}


onDismiss() {
  this.setState({
    visible: false
  });
}


render() {
  return (
    <Popover placement="top" width="160" trigger="click" visible={this.state.visible} content={(
      <div>
        <p>這是一段內(nèi)容這是一段內(nèi)容確定刪除嗎？</p>
        <div style={{textAlign: 'right', margin: 0}}>
          <Button size="mini" type="text" onClick={this.onDismiss.bind(this)}>取消</Button>
          <Button type="primary" size="mini" onClick={this.onDismiss.bind(this)}>確定</Button>
        </div>
      </div>
    )}>
      <Button>刪除</Button>
    </Popover>
  )
}

Attributes