Popup

弹层组件

  • 由于弹层的显示操作在组件以外, 所以需要在使用时自定义visible、onShow、onClose函数。
  • 通过align设置碳层弹出的位置, 可选top/bottom。
  • 可通过onClose配置点击弹层阴影部分来关闭弹层。

主要属性和接口：

  • visible:弹层是否显示标识, 默认false不可见
  • onClose:关闭弹层的功能函数
  • align:弹层的位置, 默认top

示例:

    <Popup align="top" visible={this.state.visible} onClose={::this.onClose}>
        <ul className="ph-popup-list">
            <li className="ph-popup-item" onClick={::this.onClose}>未上线单店</li>
            <li className="ph-popup-item" onClick={::this.onClose}>未上线连锁店</li>
        </ul>
    </Popup>
    onShow(){
        this.setState({
            visible: true
        });
    }
    onClose(){
        this.setState({
            visible: false
        });
    }
Extends Component
Defined in: src/Popup.js:7
Module: 操作类组件

Available since 0.4.0

Constructor

Popup

Popup ()

Defined in src/Popup.js:7

Available since 0.4.0

Example:

import React, { Component } from 'react';
import {Button, Popup} from 'phoenix-ui';
import Code from "./code/code";

export default class popup extends Component{

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

        this.state = {
            topVisible: false,
            bottomVisible: false
        }
    }

    onShowTopPopup(){
        this.setState({
          topVisible: true
        });
    }

    onCloseTopPopup(){
        this.setState({
          topVisible: false
        });
    }

    onShowBottomPopup(){
        this.setState({
          bottomVisible: true
        });
    }

    onCloseBottomPopup(){
        this.setState({
          bottomVisible: false
        });
    }

    render(){
        return(
            <div>
                <h2 className="comp-title">Popup</h2>
                <h3 className="comp-type">visible(默认false) 弹层是否可见，必需<br/>onClose 关闭弹层的执行函数<br/>align(默认top) 弹层弹出位置</h3>
                <div className="content">
                    <Button phSize="lg" onClick={::this.onShowTopPopup}>Top</Button>
                </div>
                <Popup visible={this.state.topVisible} onClose={::this.onCloseTopPopup}>
                    <ul className="ph-popup-list">
                        <li className="ph-popup-item" onClick={::this.onCloseTopPopup}>未上线单店</li>
                        <li className="ph-popup-item" onClick={::this.onCloseTopPopup}>未上线连锁店</li>
                        <li className="ph-popup-item" onClick={::this.onCloseTopPopup}>在线单店</li>
                        <li className="ph-popup-item" onClick={::this.onCloseTopPopup}>在线连锁店</li>
                    </ul>
                </Popup>
                <Code target="popup-top" />

                <div className="content">
                    <Button phSize="lg" onClick={::this.onShowBottomPopup}>Bottom</Button>
                </div>
                <Popup align="bottom" visible={this.state.bottomVisible} onClose={::this.onCloseBottomPopup}>
                    <div className="ph-action-sheet">
                        <ul>
                            <li className="ph-popup-item ph-popup-tip">确认 删除此作品？</li>
                            <li className="ph-popup-item ph-popup-delete" onClick={::this.onCloseBottomPopup}>删除作品</li>
                        </ul>
                        <div className="ph-popup-operate" onClick={::this.onCloseBottomPopup}>取消</div>
                    </div>
                </Popup>
                <Code target="popup-bottom" />
            </div>
        );
    }
}

方法

onClose

onClose ()

Defined in src/Popup.js:77

关闭的执行函数

属性

align

String

Defined in src/Popup.js:71

弹层的位置,默认top

classPrefix

String

Defined in src/Popup.js:52

样式前缀

Default:

'popup'

componentTag

String

Defined in src/Popup.js:59

标签tagName

visible

Boolean

Defined in src/Popup.js:65

是否可见标识