# Toast

飘字组件

- 由于飘字的使用范围可预估, 为方便使用在原组件的基础上更进一步改为函数式的使用方式。
- 普通信息: `Toast.info(message, duration, callback)`
- 成功信息: `Toast.success(message, duration, callback)`
- 失败信息: `Toast.fail(message, duration, callback)`
- 加载中: `Toast.loading(message, duration, callback)`
- 移除: `Toast.remove()`
- 如果不根据设置的时间移除飘字，`duration`设置为false，`Toast.remove()`移除飘字。

示例:

- 显示普通飘字, 如:
  `Toast.info('只显示信息的toast！', 1000, ()=>{console.log('飘字消失时执行的回调函数');})`
- 显示成功信息, 如:
  `Toast.success('操作成功', 1000, ()=>{console.log('飘字消失时执行的回调函数');})`
- 显示失败信息, 如:
  `Toast.fail('操作失败', 1000, ()=>{console.log('飘字消失时执行的回调函数');})`
- 显示加载中, 如:
  `Toast.loading('加载中...', 1000, ()=>{console.log('飘字消失时执行的回调函数');})`
- 移除飘字, 如:
  `Toast.remove()`

### 方法

### 属性

### 事件

Extends Component
Defined in: `src/Toast.js:7`
Module: 操作类组件

Available since 0.3.0

## Constructor

### Toast

`Toast ()`

Defined in `src/Toast.js:7`

Available since 0.3.0

#### Example:

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

    export default class toast extends Component{

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

        showToastInfo(){
            Toast.info("只显示信息的toast！", 2000, ()=>{
                console.log("额外的执行内容");
            });
        }

        showToastSuccess(){
            Toast.success("操作成功", 2000, ()=>{
                console.log("额外的执行内容");
            });
        }

        showToastFail(){
            Toast.fail("操作失败", 2000, ()=>{
                console.log("额外的执行内容");
            });
        }

        showToastLoading(){
            Toast.loading("加载中...", 2000, ()=>{
                console.log("额外的执行内容");
            });
        }

        removeToastLoading(){
            Toast.remove();
        }

        render(){
            return(
                <div>
                    <h2 className="comp-title">Toast</h2>
                    <h3 className="comp-type">Toast.info(message, duration, callback)</h3>
                    <div className="content">
                        <Button phSize="lg" onClick={::this.showToastInfo}>info</Button>
                    </div>
                    <Code target="toast-info" />

                    <h3 className="comp-type">Toast.success(message, duration, callback)</h3>
                    <div className="content">
                        <Button phSize="lg" onClick={::this.showToastSuccess}>success</Button>
                    </div>
                    <Code target="toast-success" />

                    <h3 className="comp-type">Toast.fail(message, duration, callback)</h3>
                    <div className="content">
                        <Button phSize="lg" onClick={::this.showToastFail}>fail</Button>
                    </div>
                    <Code target="toast-fail" />

                    <h3 className="comp-type">Toast.loading(message, duration, callback)</h3>
                    <div className="content">
                        <Button phSize="lg" onClick={::this.showToastLoading}>loading</Button>
                    </div>
                    <Code target="toast-loading" />

                    <h3 className="comp-type">Toast.remove()<br/>自定义消失的情况：Toast出现函数设置duration为false</h3>
                    <div className="content">
                        <Button phSize="lg" onClick={::this.removeToastLoading}>remove</Button>
                    </div>
                    <Code target="toast-remove" />
                </div>
            );
        }
    }