---
name: Dialog
menu: Components
---

# Dialog

import Button from '../button/index'
import Input from '../input/index'
import { Radio, RadioGroup } from '../radio/index'
import { Playground, Props } from 'docz'
import { Form, FormRow, Label } from '../form/index';
import Statusbox from '../statusbox/index';
import Dialog from './index'
import './style/index.scss'

## Props & Methods
<Props of={Dialog} />

## Types
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props){
            super(props);
            this.state = {};
            this.toggle = this.toggle.bind(this);
        }
        toggle(ref) {
            if (!ref || !this.refs[ref]) {
            return;
            }
            let newState = {};
            newState[ref] = !this.state[ref];
            this.setState(newState);
        }
        render(){
            return <>
            <Button onClick={() => this.toggle('succ')}>success</Button>
            <Button onClick={() => this.toggle('info')}>info</Button>
            <Button onClick={() => this.toggle('alert')}>alert</Button>
            <Button onClick={() => this.toggle('ques')}>question</Button>
            <Dialog
                ref="succ"
                visible={this.state.succ}
                onClose={() => this.toggle('succ')}
                type="success"
                msg="Congrats! You got this!"
                subMsg="See More..."
                button={[<Button onClick={() => this.toggle('succ')} key="confirm">确定</Button>]}
            />
            <Dialog
                ref="info"
                visible={this.state.info}
                onClose={() => this.toggle('info')}
                type="info"
                msg="This is a piece of information for you!"
                subMsg="See More..."
                button={[<Button onClick={() => this.toggle('info')} key="confirm">确定</Button>]}
            />
            <Dialog
                ref="alert"
                visible={this.state.alert}
                onClose={() => this.toggle('alert')}
                type="alert"
                msg="Warning! You haven't reach your KPI this month!"
                subMsg="See More..."
                button={[<Button onClick={() => this.toggle('alert')} key="confirm">确定</Button>]}
            />
            <Dialog
                ref="ques"
                visible={this.state.ques}
                onClose={() => this.toggle('ques')}
                type="question"
                msg="Are you sure about that?"
                subMsg="See More..."
                button={[<Button onClick={() => this.toggle('ques')} key="confirm">确定</Button>]}
            />
            </>
        }
    }
    return <Example />
}}
</Playground>

## Sizes
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props){
            super(props);
            this.state = {};
            this.toggle = this.toggle.bind(this);
        }
        toggle(ref) {
            if (!ref || !this.refs[ref]) {
            return;
            }
            let newState = {};
            newState[ref] = !this.state[ref];
            this.setState(newState);
        }
        render(){
            return <>
            <Button onClick={() => this.toggle('small')}>small</Button>
            <Button onClick={() => this.toggle('medium')}>medium</Button>
            <Button onClick={() => this.toggle('large')}>large</Button>
            <Dialog
                ref="small"
                visible={this.state.small}
                onClose={() => this.toggle('small')}
                type="success"
                size="small"
                msg="This is a small dialog!"
                subMsg="See more..."
                button={[<Button onClick={() => this.toggle('small')} key="confirm">确定</Button>]}
            />
            <Dialog
                ref="medium"
                visible={this.state.medium}
                onClose={() => this.toggle('medium')}
                title="报名提示"
                size="medium"
                button={[<Button onClick={() => this.toggle('medium')} key="confirm">确定</Button>]}
            >
            <Statusbox size="l" type="success">您已成功报名！</Statusbox>
            <Form>
              <FormRow>
                <Label required>手机号</Label>
                <Input
                  name="field1"
                  placeholder="请填写您的手机号"
                  data-required
                  data-patterns={[{
                    key: 'mobile',
                    msg: '格式不正确'
                  }]}
                />
              </FormRow>
              <FormRow>
                <Label>邮箱</Label>
                <Input
                  name="field2"
                  placeholder="请填写您的邮箱"
                  data-patterns={[{
                    key: 'email',
                    msg: '格式不正确'
                  }]}
                />
              </FormRow>
              <FormRow>
                <Label required>性别</Label>
                <RadioGroup
                  name="field4"
                  data-required
                  data-patterns={[]}
                >
                  <Radio value="0">男</Radio>
                  <Radio value="1">女</Radio>
                </RadioGroup>
              </FormRow>
            </Form>
          </Dialog>
            <Dialog
            ref="large"
            visible={this.state.large}
            onClose={() => this.toggle('large')}
            title="内容编辑框"
            size="large"
            button={[<Button onClick={() => this.toggle('large')} key="confirm">提交资料</Button>]}
          >
            <Form>
              <FormRow>
                <Label required>手机号</Label>
                <Input
                  name="field1"
                  placeholder="请填写您的手机号"
                />
              </FormRow>
              <FormRow>
                <Label>邮箱</Label>
                <Input
                  name="field2"
                  placeholder="请填写您的邮箱"
                />
              </FormRow>
              <FormRow>
                <Label required>性别</Label>
                <RadioGroup
                  name="field4"
                >
                  <Radio value="0">男</Radio>
                  <Radio value="1">女</Radio>
                </RadioGroup>
              </FormRow>
            </Form>
          </Dialog>
            </>
        }
    }
    return <Example />
}}
</Playground>

## Customize Buttons
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props){
            super(props);
            this.state = {};
            this.toggle = this.toggle.bind(this);
        }
        toggle(ref) {
            if (!ref || !this.refs[ref]) {
            return;
            }
            let newState = {};
            newState[ref] = !this.state[ref];
            this.setState(newState);
        }
        render(){
            return <>
            <Button
                onClick={() => this.toggle('customBtns')}
            >Click me</Button>
            <Dialog
                ref="customBtns"
                visible={this.state.customBtns}
                onClose={() => this.toggle('customBtns')}
                zIndex={6003}
                button={[
                <Button onClick={() => this.toggle('customBtns')} key="confirm">确认</Button>,
                <Button onClick={() => this.toggle('customBtns')} color="weak" key="cancel">取消</Button>,
                ]}
            >
            <p>按钮示例</p>
            </Dialog>
            </>
        }
    }
    return <Example />;
}}
</Playground>

## 超长内容
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props){
            super(props);
            this.state = {};
            this.toggle = this.toggle.bind(this);
        }
        toggle(ref) {
            if (!ref || !this.refs[ref]) {
            return;
            }
            let newState = {};
            newState[ref] = !this.state[ref];
            this.setState(newState);
        }
        render(){
            return <>
           <Button
            onClick={() => this.toggle('longlong')}
          >Click me</Button>
          <Dialog
            ref="longlong"
            visible={this.state.longlong}
            onClose={() => this.toggle('longlong')}
            size="large"
            button={[
              <Button onClick={() => this.toggle('longlong')} size="m" key="confirm">确认</Button>,
              <Button onClick={() => this.toggle('longlong')} size="m" color="weak" key="cancel">取消</Button>,
            ]}
          >
            <p>超长内容的滚动条</p>
            <p>一般内容不应该超长, 整框高度最大600px, 如有超出, 再根据设计稿另行定制</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>超长内容</p>
            <p>这也太长了吧</p>
          </Dialog>
            </>
        }
    }
    return <Example />
}}
</Playground>

## APIs
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props){
            super(props);
            this.state = {};
            this.toggle = this.toggle.bind(this);
        }
        toggle(ref) {
            if (!ref || !this.refs[ref]) {
            return;
            }
            let newState = {};
            newState[ref] = !this.state[ref];
            this.setState(newState);
        }
        render(){
            return <>
            <Button onClick={() => Dialog.show({ msg: '没有Icon的msg' })}>Show</Button>
            <Button onClick={() => Dialog.info('Info')}>Info</Button>
            <Button onClick={() => Dialog.success('Success')}>Success</Button>
            <Button onClick={() => Dialog.alert('Alert')}>Alert</Button>
            <Button onClick={() => Dialog.confirm({
                msg: 'Confirm',
                onOk: () => {
                console.log('选择确定');
                },
                onCancel: () => {
                console.log('选择取消');
                }
            })}>Confirm</Button>
            </>
        }
    }
    return <Example />
}}
</Playground>

## onBlur