---
name: Message
menu: Components
---

# Message
import Message from './index'
import MessageItem from './lib/MessageItem'
import Button from '../button/index'
import './style/index.scss'
import { Playground, Props } from 'docz'
import LibMessage from './lib/Message.jsx'

Message组件采用js调用的方式来使用，组件提供了六个常用静态方法，调用后返回的是该消息实例的关闭函数。

## Props
<Props of={LibMessage}/>

### Message.config全局配置参数
|属性 | 说明 | 类型 | 默认值|
| :--- | :--- | :--- | :--- |
|direction | 消息的展现位置 |String |'top'|
|duration|  默认自动关闭延时，单位秒  |Number | 2|
|zIndex|  消息展示zIndex  |Number | 4000 |


## Basic Usage
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props){
            super(props);
            this.handleInfo = this.handleInfo.bind(this);
            this.handleSucess = this.handleSucess.bind(this);
            this.handleAlert = this.handleAlert.bind(this);
            this.handleQuestion = this.handleQuestion.bind(this);
            this.handleLoading = this.handleLoading.bind(this);
        }
        handleInfo(){
            Message.info('可以随便说说话', { duration: 0 });
        }
        handleSucess(){
            Message.success('恭喜你达成一个亿的小目标！');
        }
        handleAlert() {
            Message.alert('警告！你犯了错了！');
        }
        handleQuestion(){
            Message.question('小朋友你是否有很多问号？');
        }
        handleLoading() {
            let apis = Message.loading('loading, 自定义3s后关闭');
            setTimeout(() => {
            apis.close();
            }, 3000);
        }
        render(){
            return <>
            <Button onClick={this.handleInfo}> info </Button>
            <Button onClick={this.handleSucess}>success</Button>
            <Button onClick={this.handleAlert}>alert</Button>
            <Button onClick={this.handleQuestion}>question</Button>
            <Button onClick={this.handleLoading}>loading</Button>
            </>
        }
    }
    return <Example />
}}
</Playground>

## Directions
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props){
            super(props);
            this.onClickLeft = this.onClickLeft.bind(this);
            this.onClickRight = this.onClickRight.bind(this);
            this.onClickBottom = this.onClickBottom.bind(this);
            this.onClickTop = this.onClickTop.bind(this);
            this.onClickCenter = this.onClickCenter.bind(this);
        }
        onClickLeft() {
            Message.info({
            content: '左边方向消息',
            direction: 'left'
            });
        }
        onClickRight() {
            Message.info({
            content: '右边方向消息',
            direction: 'right'
            });
        }
        onClickCenter() {
            Message.info({
            content: '中间方向消息',
            direction: 'center'
            });
        }
        onClickTop() {
            Message.info({
            content: '上边方向消息',
            direction: 'top'
            });
        }
        onClickBottom() {
            Message.info({
            content: '底部方向消息',
            direction: 'bottom'
            });
        }
        render(){
            return <>
            <Button onClick={this.onClickTop}>Top</Button>
            <Button onClick={this.onClickBottom}>Bottom</Button>
            <Button onClick={this.onClickCenter}>Center</Button>
            <Button onClick={this.onClickLeft}>Left</Button>
            <Button onClick={this.onClickRight}>Right</Button>
            </>
        }
    }
    return <Example />
}}
</Playground>

## Duration
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props){
            super(props);
            this.handleClick = this.handleClick.bind(this);
        }
        handleClick() {
            Message.info({
                content: 'I can show up only in 5s',
                duration: 5,
            });
        }
        render(){
            return <Button onClick={this.handleClick}>duration</Button>
        }
    }
    return <Example />
}}
</Playground>

## Closable
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props){
            super(props);
            this.handleClick = this.handleClick.bind(this);
        }
        handleClick() {
            Message.info({
                content: 'Close me if you don\'t need me any more',
                duration: 10,
                closable: true,
            });
        }
        render(){
            return <Button onClick={this.handleClick}>Closable</Button>
        }
    }
    return <Example />
}}
</Playground>

## Complex content
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props){
            super(props);
            this.handleClick = this.handleClick.bind(this);
        }
        handleClick() {
            Message.info({
                content: <> <p> This is a paragraph </p>
                        <ul>
                            <li>Course 1</li>
                            <li>Course 2</li>
                            <li>Course 3</li>
                        </ul>
                        </>
            });
        }
        render(){
            return <Button onClick={this.handleClick}>Complex Content</Button>
        }
    }
    return <Example />
}}
</Playground>

## onClose
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props){
            super(props);
            this.handleClick = this.handleClick.bind(this);
        }
        handleClick() {
           Message.info({
            content: 'Why not close me now?!',
            duration: 10,
            closable: true,
            onClose: () => {
                Message.success({
                content: 'You have call the onClose successfully!'
                }, 2000);
            }
        });
        }
        render(){
            return <Button onClick={this.handleClick}>onClose</Button>
        }
    }
    return <Example />
}}
</Playground>

## Global Settings
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props){
            super(props);
            this.handleDestroy = this.handleDestroy.bind(this);
            this.handleDirection = this.handleDirection.bind(this);
            this.handleDuration = this.handleDuration.bind(this);
        }
        handleDestroy() {
            Message.destroy();
        }
        handleDirection() {
            Message.config({
            direction: 'left'
            });
        }
        handleDuration() {
            Message.config({
            duration: 5
            });
        }
        render(){
            return <>
            <Button onClick={this.handleDestroy}>Global Destroy</Button>
            <Button onClick={this.handleDirection}>Global Direction</Button>
            <Button onClick={this.handleDuration}>Global Duration</Button>
            </>
        }
    }
    return <Example />
}}
</Playground>