Dialog

输入类提示框。Dialog UI 提供与WeLink规范一致的视图，包含：

• 有标题的提示框
• 无标题的提示框
• 有标题的对话框
• 无标题的对话框

参数说明

效果示例

import React from 'react';
import { Button, Dialog } from '@wecode/react-weui';

export default class DialogDemo extends React.Component {
  state = {
    showIOS1: false,
    showIOS2: false,
    style1: {
      title: '标题',
      buttons: [
        {
          type: 'cancel',
          label: '取消',
          onClick: this.hideDialog.bind(this)
        },
        {
          type: 'default',
          label: '确定',
          onClick: this.hideDialog.bind(this)
        }
      ]
    },
    style2: {
      title: '标题',
      buttons: [
        {
          type: 'cancel',
          label: '取消',
          onClick: this.hideDialog.bind(this)
        },
        {
          label: '删除',
          onClick: this.hideDialog.bind(this)
        }
      ]
    },
    style3: {
      buttons: [
        {
          type: 'default',
          label: '确定',
          onClick: this.hideDialog.bind(this)
        }
      ]
    }
  };

  hideDialog() {
    this.setState({
      showIOS1: false,
      showIOS2: false,
      showIOS3: false,
      showIOS4: false
    });
  }

  render() {
    const {
      style1, style2, style3, showIOS1, showIOS2, showIOS3, showIOS4 
    } = this.state;
    return (
      <section>
        <Button type="primary" onClick={e => this.setState({ showIOS1: true })}>
          有标题类提示框
        </Button>
        <Button type="default" onClick={e => this.setState({ showIOS2: true })}>
          内容两行类提示框
        </Button>
        <Button type="warn" onClick={e => this.setState({ showIOS3: true })}>
          无标题类内容一行提示框
        </Button>
        <Button type="primary" onClick={e => this.setState({ showIOS4: true })}>
          无标题类内容两行提示框
        </Button>

        <Dialog title={style1.title} buttons={style1.buttons} show={showIOS1}>
          单行文本单行文本单行文本
        </Dialog>
        <Dialog title={style2.title} buttons={style2.buttons} show={showIOS2}>
          弹窗内容正文最多两行，如果过长，请在文案上控制。
        </Dialog>
        <Dialog title={style3.title} buttons={style3.buttons} show={showIOS3}>
          单行文本单行文本单行文本
        </Dialog>
        <Dialog title={style3.title} buttons={style3.buttons} show={showIOS4}>
          弹窗内容正文最多两行，如果过长，请在文案上控制。
        </Dialog>
      </section>
    );
  }
}