# Modal Demo

- order: 0

各种用法集合

---

````jsx
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Button from 'nuke-button';
import Modal from 'nuke-modal';
import Page from 'nuke-page';

const App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.alert = this.alert.bind(this);
  }

  alert() {
    Modal.alert('大家好', [
      {
        onPress: (e) => {
          console.log(e);
        },
        text: '确定按钮',
      },
    ]);
  }
  confirm = () => {
    Modal.confirm('是否确认', (result) => {});
  };
  prompt = () => {
    Modal.prompt('请输入', (result) => {});
  };
  toast = () => {
    Modal.toast('Hi');
  };
  toast2 = () => {
    Modal.toast('大家好');
  };
  toast3 = () => {
    Modal.toast(
      {
        message: '请填写用户名！',
      },
      'LONG'
    );
  };
  toast4 = () => {
    Modal.toast(
      {
        message: '上传成功！',
        icon: {
          name: 'favoritesFilling',
          style: {
            width: '40rem',
            height: '40rem',
          },
        },
      },
      'LONG'
    );
  };
  toast5 = () => {
    Modal.toast(
      {
        message: '上传成功！',
        icon: {
          source:
            'https://img.alicdn.com/tfs/TB1k.IIPVXXXXcWapXXXXXXXXXX-200-200.png',
          style: {
            width: '40rem',
            height: '40rem',
          },
        },
      },
      'LONG'
    );
  };
  render() {
    return (
      <Page title="Modal">
        <Page.Intro main="基础使用" />
        <View style={styles.btns}>
          <Button style={styles.btn} block onPress={this.alert} type="primary">
            alert
          </Button>
          <Button
            style={styles.btn}
            block
            onPress={this.confirm}
            type="primary"
          >
            confirm
          </Button>
          <Button style={styles.btn} block onPress={this.prompt} type="primary">
            prompt
          </Button>
          <Button style={styles.btn} block onPress={this.toast} type="primary">
            toast
          </Button>
          <Button style={styles.btn} block onPress={this.toast2} type="primary">
            toast2
          </Button>
          <Button style={styles.btn} block onPress={this.toast3} type="primary">
            自定义toast 纯文本
          </Button>
          <Button style={styles.btn} block onPress={this.toast4} type="primary">
            自定义toast iconfont
          </Button>
          <Button style={styles.btn} block onPress={this.toast5} type="primary">
            自定义toast 图片
          </Button>
          <View ref="forToast" />
        </View>
      </Page>
    );
  }
};

let styles = {
  btns: {
    margin: '30rem',
  },
  btn: {
    marginBottom: '30rem',
  },
};
render(<App />);


````