Element React 中文文档 Element-React Popover 弹出框

2024-02-25 开发教程 Element React 中文文档匿名 3℃

基础用法

Popover 的属性与 Tooltip 很类似，它们都是基于Popper.js开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。

trigger属性用于设置何时触发 Popover ，提供三种触发方式：hover, click和 focus。

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

嵌套信息

可以在 Popover 中嵌套多种类型信息，以下为嵌套表格的例子。

利用分发取代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: '上海市普陀区金沙江路 1518 弄'
    }, {
      date: '2016-05-04',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1517 弄'
    }, {
      date: '2016-05-01',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1519 弄'
    }, {
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1516 弄'
    }]
  }
}
render() {
  return (
    <Popover placement="right" title="标题" width="400" trigger="click" content={(
      <Table
       style={{width: '100%'}}
       stripe={true}
       columns={this.table.columns}
       data={this.table.data} />
    )}>
      <Button>click 激活</Button>
    </Popover>
  )
}

嵌套操作

当然，你还可以嵌套操作，这相比 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>这是一段内容这是一段内容确定删除吗？</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

参数	说明	类型	可选值	默认值
trigger	触发方式	String	click/focus/hover	click
title	标题	String	—	—
content	显示的内容，也可以通过 `slot`传入 DOM	String	—	—
width	宽度	String, Number	—	最小宽度 150px
placement	出现位置	String	top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end	bottom
visible	状态是否可见	Boolean	—	false
transition	定义渐变动画	String	—	fade-in-linear
visibleArrow	是否显示 Tooltip 箭头	Boolean	—	true
popperClass	为 popper 添加类名	String	-	-

上一节： Element-React Tooltip 文字提示

下一节： Element-React Card 卡片

"Element React 中文文档"的目录

Element React 中文文档 Element-React Popover 弹出框

基础用法

嵌套信息

嵌套操作

Attributes