# Alert

Alert组件

- 由于弹框的显示操作在组件以外, 所以需要在使用时自定义`visible`、`onClose`函数。
- 可通过title设置弹出框标题，content设置内容，buttons设置尾部按钮。(相对Dialog新增参数)
- 默认有[确定]1个按钮，点击[确定]默认的执行函数是onClose直接关闭。
- 通过visible设置弹框是否显示, 可选true/false, 必需。
- 可通过onClose配置点击弹框阴影部分以及弹框右上角X按钮来关闭弹框。
- 可通过closeButton来配置弹框右上角X按钮是否显示, 默认不显示。
- 默认传了onClose之后阴影部分就具备点击关闭弹框的按钮, 如果需要去掉该功能需要额外传shadowDisabled作为标识。

主要属性和接口：

- title:弹框的标题，必需。
- content:弹框的内容，必需。
- buttons:尾部按钮的内容，必需是数组的形式，text标识填充的问题，phStyle表示主题，onHandle表示点击的回调，otherProps传递按钮的其他属性，如{active:true, block:true, hollow: true}。
- visible:弹框是否显示标识, 默认false不可见。
- onClose:关闭弹框的功能函数。
- closeButton:右上角关闭按钮是否显示的标识, 默认不显示。
- shadowDisabled:阴影部分是否可点击关闭按钮, 默认传了onClose函数就可以关闭。

示例:

         const buttons = [
               {text: "取消", phStyle: "gray", otherProps: {hollow: true}}, // text默认"确定", phStyle默认primary，onHandle默认onClose
               {text: "确定", onHandle: this.onConfirm}
           ];
           ...
         <Alert closeButton shadowDisabled visible={this.state.visible} onClose={::this.onClose.bind(this,'visible')}
             title="这是标题" content="这里是弹出框的内容..." buttons={buttons} />

### 方法

- onClose

### 属性

- buttons
- closeButton
- shadowDisabled
- title
- title
- visible

### 事件

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

Available since 1.5.0

## Constructor

### Alert

`Alert ()`

Defined in `src/modal/Alert.js:10`

Available since 1.5.0

#### Example:

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

    export default class alert extends Component{

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

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

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

        onConfirm(key){
            this.onClose(key);
        }

        render(){
            const buttons1 = [
                // text默认"确定", phStyle默认primary，onHandle默认onClose, otherProps传按钮的属性
                {text: "取消", phStyle: "gray", otherProps: {hollow: true}},
                {onHandle: this.onConfirm.bind(this,"visible2")}
            ],
                buttons2 = [
                {text: "按钮一", otherProps: {hollow: true}},
                {text: "按钮二", otherProps: {hollow: true}},
                {text: "按钮三", otherProps: {hollow: true}}
            ];
            const content = <p>这里是弹出框的内容...</p>;

            return(
                <div>
                    <h2 className="comp-title">Alert</h2>
                    <h3 className="comp-type">title 定义标题; content 定义内容</h3>
                    <div className="content">
                        <Button radius phSize="lg" onClick={()=>{this.setState({visible1:true})}}>alert默认状态</Button>
                    </div>
                    <Alert visible={this.state.visible1} onClose={::this.onClose.bind(this,"visible1")} title="这是标题" content={content} />
                    <Code target="alert" />

                    <h3 className="comp-type">buttons 定义尾部按钮</h3>
                    <div className="content">
                        <h3 className="comp-tip">2个按钮</h3>
                        <Button radius phSize="lg" onClick={()=>{this.setState({visible2:true})}}>自定义按钮buttons</Button>
                        <h3 className="comp-tip">多个按钮</h3>
                        <Button radius phSize="lg" onClick={()=>{this.setState({visible3:true})}}>自定义按钮buttons</Button>
                    </div>
                    <Alert visible={this.state.visible2} onClose={::this.onClose.bind(this,"visible2")} title="这是标题" content="这里是弹出框的内容..." buttons={buttons1} />
                    <Alert visible={this.state.visible3} onClose={::this.onClose.bind(this,"visible3")} title="这是标题" content="这里是弹出框的内容..." buttons={buttons2} />
                    <Code target="alert-buttons" />

                    <h3 className="comp-type">其他属性(visible、onClose、closeButton、shadowDisabled)参照<a href="#/dialog">Dialog</a>组件</h3>
                    <div className="content">
                        <Button radius phSize="lg" onClick={()=>{this.setState({visible4:true})}}>完整案例</Button>
                    </div>
                    <Alert visible={this.state.visible4} onClose={::this.onClose.bind(this,"visible4")} closeButton shadowDisabled
                        title="这是标题" content="这里是弹出框的内容..." buttons={buttons1} />
                    <Code target="alert-whole" />
                </div>
            );
        }
    }

## 方法

### onClose

`onClose ()`

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

关闭弹框的执行函数

## 属性

### `buttons`

Array

Defined in `src/modal/Alert.js:64`

尾部按钮

### `closeButton`

Boolean

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

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

### `shadowDisabled`

Boolean

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

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

### `title`

String | Element

Defined in `src/modal/Alert.js:52`

标题

### `title`

String | Element

Defined in `src/modal/Alert.js:58`

内容

### `visible`

Boolean

Defined in `src/modal/Alert.js:70`

是否可见标识