Whisper

倾听者组件

  • 配合提示组件使用, 通过target设置显示的目标。
  • 可通过placement设置目标物的显示位置, 可选top、bottom、left、right、top left、top right、bottom left、bottom right。
  • 可通过distance设置目标物到点击对象(倾听者)的位置。
  • 可通过onTargetChange定义目标物显隐时额外的回调函数。

主要属性和接口：

  • target:目标物。
  • placement:目标物的显示位置, 默认bottom。
  • distance:目标物到点击对象(倾听者)的位置, 默认15。
  • onTargetChange:目标物显隐时额外的回调函数。

示例:

    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/Whisper.js:17
Module: 提示组件

Available since 1.0.0

Constructor

Whisper

Whisper ()

Defined in src/Whisper.js:17

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>
        );
    }
}

方法

onTargetChange

onTargetChange ()

Defined in src/Whisper.js:87

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

属性

classPrefix

String

Defined in src/Whisper.js:56

样式前缀

Default:

'whisper'

componentTag

String

Defined in src/Whisper.js:63

标签tagName

distance

Number

Defined in src/Whisper.js:81

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

placement

String

Defined in src/Whisper.js:75

气泡的位置,默认bottom

target

Object

Defined in src/Whisper.js:69

显示的目标气泡