# 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';

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
  }

  alert = () => {
    Modal.alert('Hi');
  };
  confirm = e => {
    Modal.confirm('是否确认', result => {
      console.log(result);
    });
  };
  prompt = e => {
    Modal.prompt('请输入', result => {
      console.log(result);
    });
  };
  toast = () => {
    Modal.toast('hello');
  };
  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>
        </View>
      </Page>
    );
  }
};
let styles = {
  btns: {
    margin: '30rem'
  },
  btn: {
    marginBottom: '30rem'
  }
};
render(<App />);
```