Popover

气泡组件

  • 配合倾听者组件Whisper使用, 作为Whisper的target。

示例:

    const popover = ( // 可以通过style自定义位置
        <Popover>
            <ul className="ph-popover-list">
                <li className="ph-popover-item">未上线单店</li>
                <li className="ph-popover-item">未上线连锁店</li>
            </ul>
        </Popover>
    );
    <Whisper placement="top" onTargetChange={()=>{console.log('气泡出现消失时额外的执行函数');}} target={popover} distance={10} >Top</Whisper>

方法

属性

事件

Extends Component
Defined in: src/Popover.js:6
Module: 提示组件

Available since 1.0.0

Constructor

Popover

Popover ()

Defined in src/Popover.js:6

Available since 1.0.0

Example:

import React, { Component } from "react";
import {Whisper, Popover} from "phoenix-ui";
import Code from "./code/code";

export default class popover extends Component{

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

    onTargetChange(){
        alert("气泡出现消失时额外的执行函数"); 
    }

    render(){
        const popover = ( // 可以通过style自定义位置
            <Popover>
                <ul className="ph-popover-list">
                    <li className="ph-popover-item">未上线单店</li>
                    <li className="ph-popover-item">未上线连锁店</li>
                </ul>
            </Popover>
        );

        return(
            <div>
                <h2 className="comp-title">Whisper/Popover</h2>
                <h3 className="comp-type">
                    target 显示的目标物<br/>
                    placement(默认bottom) 气泡出现时相对点击对象的位置
                </h3>
                <div className="content">
                    <Whisper target={popover}>Bottom</Whisper>
                    <Whisper placement="top" target={popover}>Top</Whisper>
                    <Whisper placement="right" target={popover}>Right</Whisper>
                    <Whisper placement="left" target={popover}>Left</Whisper>
                    <Whisper placement="top right" target={popover}>Top Right</Whisper>
                    <Whisper placement="top left" target={popover}>Top Left</Whisper>
                    <Whisper placement="bottom right" target={popover}>Bottom Right</Whisper>
                    <Whisper placement="bottom left" target={popover}>Bottom Left</Whisper>
                </div>
                <Code target="popover-placement" />

                <h3 className="comp-type">distance(默认15) 气泡想对点击对象的距离</h3>
                <div className="content">
                    <Whisper target={popover} distance={10}>10</Whisper>
                    <Whisper target={popover} distance={20}>20</Whisper>
                </div>
                <Code target="popover-distance" />

                <h3 className="comp-type">onTargetChange 气泡显隐时额外的回调函数</h3>
                <div className="content">
                    <Whisper onTargetChange={this.onTargetChange} target={popover}>popover</Whisper>
                </div>
                <Code target="popover-ontargetchange" />
            </div>
        );
    }
}

属性

classPrefix

String

Defined in src/Popover.js:36

样式前缀

Default:

'popover'

componentTag

String

Defined in src/Popover.js:43

标签tagName