Popover

气泡组件

  • 通过getTarget返回当前点击元素，必需。
  • 可通过placement设置气泡的显示位置, 可选top、bottom、left、right。
  • 当设置的位置不足够放置气泡，以下顺序顺延(top->bottom->left->right, bottom->top->left->right, left->right->top->bottom, right->left->top->bottom)。
  • 可通过distance设置气泡到点击对象的位置。
  • 可通过clickCallback定义气泡显隐时额外的回调函数。
  • 可通过hideCallback手动调用隐藏popover。

示例:

 <Button phSize='lg' ref={(button)=>{this.button = button}}>按钮</Button>
 <Popover getTarget={()=>{return this.button}} placement='top'>
     <div className='ph-popover-text'>
         一条很长的很长的气泡提示语，为了占位存在的气泡提示语。一条很长的很长的气泡提示语，为了占位存在的气泡提示语。
     </div>
 </Popover>
 <Button phSize='lg' ref={(button)=>{this.button1 = button}}>按钮</Button>
 <Popover getTarget={()=>{return this.button1}} placement='right'>
     <ul className='ph-popover-list'>
         <li className='ph-popover-item'>未上线单店</li>
         <li className='ph-popover-item'>未上线连锁店</li>
     </ul>
 </Popover>
Extends Component
Defined in: src/popover/index.js:14
Module: 提示组件

Available since 1.0.0

Constructor

Popover

Popover ()

Defined in src/popover/index.js:14

Available since 1.0.0

Example:

import React, { Component } from "react"

import Button from "phoenix-ui/lib/button"
import Popover from "phoenix-ui/lib/popover"
import Code from "./code/code"

export default class popover extends Component{

    constructor(props,context){
        super(props,context); 
    }

    hidePopover(){
        this.popover.hideCallback();
    }

    render(){
        return(
            <div>
                <h2 className="comp-title">Popover</h2>
                <h3 className="comp-type">getTarget(必需) 返回当前点击元素</h3>
                <div className="content">
                    <Button phSize="lg" ref={(button)=>{this.button = button}}>纯文字气泡</Button>
                    <Popover getTarget={()=>{return this.button}}>
                        <div className="ph-popover-text">
                            一条很长的很长的气泡提示语，为了占位存在的气泡提示语。一条很长的很长的气泡提示语，为了占位存在的气泡提示语。一条很长的很长的气泡提示语，为了占位存在的气泡提示语。一条很长的很长的气泡提示语，为了占位存在的气泡提示语。
                        </div>
                    </Popover>
                    <Button phSize="lg" ref={(button)=>{this.button1 = button}}>列表气泡</Button>
                    <Popover getTarget={()=>{return this.button1}} placement="right" ref={(popover)=>{this.popover=popover}}>
                        <ul className="ph-popover-list">
                            <li className="ph-popover-item" onClick={this.hidePopover.bind(this)}>未上线单店</li>
                            <li className="ph-popover-item">未上线连锁店</li>
                        </ul>
                    </Popover>
                </div>
                <Code target="popover-gettarget" />

                <h3 className="comp-type">placement(默认bottom) 气泡位置 <br/> 可选top、bottom、left、right</h3>
                <div className="content">
                    <Button phSize="lg" ref={(button)=>{this.button2 = button}}>按钮</Button>
                    <Popover getTarget={()=>{return this.button2}} placement="top">
                        <div className="ph-popover-text">
                            为了占位存在的气泡提示语
                        </div>
                    </Popover>
                </div>
                <Code target="popover-placement" />

                <h3 className="comp-type">distance(默认5) 气泡和点击元素的距离</h3>
                <div className="content">
                    <Button phSize="lg" ref={(button)=>{this.button3 = button}}>按钮</Button>
                    <Popover getTarget={()=>{return this.button3}} distance={20}>
                        <div className="ph-popover-text">
                            为了占位存在的气泡提示语
                        </div>
                    </Popover>
                </div>
                <Code target="popover-distance" />  

                <h3 className="comp-type">clickCallback 点击的回调函数</h3>
                <div className="content">
                    <Button phSize="lg" ref={(button)=>{this.button4 = button}}>按钮</Button>
                    <Popover getTarget={()=>{return this.button4}} clickCallback={(bool)=>{alert(bool)}}>
                        <div className="ph-popover-text">
                            为了占位存在的气泡提示语
                        </div>
                    </Popover>
                </div>
                <Code target="popover-clickcallback" />  

                <h3 className="comp-type">顺延的情况 placement为bottom</h3>
                <div className="content">
                    <Button phSize="lg" ref={(button)=>{this.button5 = button}}>bottom顺延到top</Button>
                    <Popover getTarget={()=>{return this.button5}}>
                        <div className="ph-popover-text">
                            为了占位存在的气泡提示语<br/>
                            为了占位存在的气泡提示语<br/>
                            为了占位存在的气泡提示语<br/>
                            为了占位存在的气泡提示语
                        </div>
                    </Popover>
                </div>             
            </div>
        );
    }
}

方法

clickCallback

clickCallback
(
  • visible
)

Defined in src/popover/index.js:86

气泡显隐时可执行的额外函数,自定义

参数:

visible Boolean

当前显隐的状态
参数名类型标识描述
visible Boolean

当前显隐的状态

getTarget

getTarget () Object

Defined in src/popover/index.js:67

返回气泡的目标元素

Returns:

[Object]

目标元素的ref

hideCallback

hideCallback ()

Defined in src/popover/index.js:93

手动隐藏popover

属性

classPrefix

String

Defined in src/popover/index.js:54

样式前缀

Default:

'popover'

componentTag

String

Defined in src/popover/index.js:61

标签tagName

distance

Number

Defined in src/popover/index.js:80

气泡距离点击物的位置,默认5

placement

String

Defined in src/popover/index.js:74

气泡的位置,默认bottom