# Dialog

弹框组件

- 由于弹框的显示操作在组件以外, 所以需要在使用时自定义`visible`、`onClose`函数。
- 通过visible设置弹框是否显示, 可选true/false, 必需。
- 可通过onClose配置点击弹框阴影部分以及弹框右上角X按钮来关闭弹框。
- 可通过closeButton来配置弹框右上角X按钮是否显示, 默认不显示。
- 默认传了onClose之后阴影部分就具备点击关闭弹框的按钮, 如果需要去掉该功能需要额外传shadowDisabled作为标识。

主要属性和接口：

- visible:弹框是否显示标识, 默认false不可见
- onClose:关闭弹框的功能函数
- closeButton:右上角关闭按钮是否显示的标识, 默认不显示
- shadowDisabled:阴影部分是否可点击关闭按钮, 默认传了onClose函数就可以关闭

示例:

        <Dialog visible={this.state.visible} onClose={::this.onClose} closeButton shadowDisabled>
            <Dialog.Title>标题标题</Dialog.Title>
            <Dialog.Body>
                <p>可自定义表格内容</p>
            </Dialog.Body>
            <Dialog.Footer>
                <Button hollow phSize="lg" phStyle="gray" onClick={::this.onClose}>取消</Button>
            </Dialog.Footer>
        </Dialog>

        onShow(){
            this.setState({
                visible: true
            });
        }
        onClose(){
            this.setState({
                visible: false
            });
        }

### 方法

- onClose

### 属性

- classPrefix
- closeButton
- componentTag
- shadowDisabled
- visible

### 事件

Extends Component
Defined in: `src/modal/Dialog.js:18`
Module: 弹出框组件

Available since 0.4.0

## Constructor

### Dialog

`Dialog ()`

Defined in `src/modal/Dialog.js:18`

Available since 0.4.0

#### Example:

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

    export default class dialog extends Component{

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

            this.state = {
                visible1: false,
                visible2: false,
                visible3: false
            }
        }

        onShow(key){
            let o = {};
            o[key] = true;
            this.setState(o);
        }

        onClose(key){
            let o = {};
            o[key] = false;
            this.setState(o);
        }

        render(){
            return(
                <div>
                    <h2 className="comp-title">Dialog</h2>
                    <h3 className="comp-type">visible(默认false) 弹框是否可见，必需<br/>onClose 关闭弹框的执行函数</h3>
                    <div className="content">
                        <Button radius phSize="lg" onClick={::this.onShow.bind(this,"visible1")}>dialog1</Button>
                    </div>
                    <Dialog visible={this.state.visible1} onClose={::this.onClose.bind(this,"visible1")}>
                        <Dialog.Title>标题1</Dialog.Title>
                        <Dialog.Body>
                            <p>可自定义表格内容</p>
                        </Dialog.Body>
                        <Dialog.Footer>
                            <ButtonGroup>
                                <Button hollow phSize="lg" phStyle="gray" onClick={::this.onClose.bind(this,"visible1")}>取消</Button>
                                <Button hollow phSize="lg" onClick={::this.onClose.bind(this,"visible1")}>确定</Button>
                            </ButtonGroup>
                        </Dialog.Footer>
                    </Dialog>
                    <Code target="dialog-onclose" />

                    <h3 className="comp-type">closeButton(默认不显示) 是否显示弹框左上角关闭按钮</h3>
                    <div className="content">
                        <Button radius phSize="lg" onClick={::this.onShow.bind(this,"visible2")}>dialog2</Button>
                    </div>
                    <Dialog visible={this.state.visible2} onClose={::this.onClose.bind(this,"visible2")} closeButton>
                        <Dialog.Title>标题2</Dialog.Title>
                        <Dialog.Body>
                            <p>可自定义表格内容</p>
                        </Dialog.Body>
                        <Dialog.Footer>
                            <ButtonGroup>
                                <Button hollow phSize="lg" phStyle="gray" onClick={::this.onClose.bind(this,"visible2")}>取消</Button>
                                <Button phSize="lg" onClick={::this.onClose.bind(this,"visible2")}>确定</Button>
                            </ButtonGroup>
                        </Dialog.Footer>
                    </Dialog>
                    <Code target="dialog-closebutton" />

                    <h3 className="comp-type">shadowDisabled(默认可关闭) 阴影部分是否可点击关闭弹框</h3>
                    <div className="content">
                        <Button radius phSize="lg" onClick={::this.onShow.bind(this,"visible3")}>dialog3</Button>
                    </div>
                    <Dialog visible={this.state.visible3} onClose={::this.onClose.bind(this,"visible3")} shadowDisabled>
                        <Dialog.Title>标题3</Dialog.Title>
                        <Dialog.Body>
                            <p>可自定义表格内容</p>
                        </Dialog.Body>
                        <Dialog.Footer>
                            <ButtonGroup>
                                <Button hollow phSize="lg" phStyle="gray" onClick={::this.onClose.bind(this,"visible3")}>取消</Button>
                                <Button phSize="lg" onClick={::this.onClose.bind(this,"visible3")}>确定</Button>
                            </ButtonGroup>
                        </Dialog.Footer>
                    </Dialog>
                    <Code target="dialog-shadowdisabled" />
                </div>
            );
        }
    }

## 方法

### onClose

`onClose ()`

Defined in `src/modal/Dialog.js:88`

关闭弹框的执行函数

## 属性

### `classPrefix`

String

Defined in `src/modal/Dialog.js:69`

样式前缀

Default:

`'dialog'`

### `closeButton`

Boolean

Defined in `src/modal/Dialog.js:94`

右上角按钮是否可见, 默认不可见

### `componentTag`

String

Defined in `src/modal/Dialog.js:76`

标签tagName

### `shadowDisabled`

Boolean

Defined in `src/modal/Dialog.js:100`

阴影部分是否点击可关闭弹框, 默认传了onClose之后可关闭

### `visible`

Boolean

Defined in `src/modal/Dialog.js:82`

是否可见标识