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

### 方法

- onClose

### 属性

- align
- classPrefix
- componentTag
- visible

### 事件

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`

是否可见标识