#Mask 基础用法

- order: 0
- title_en: Mask basic usage

---

```js
<NukePlayGround>
  <Mask onShow={func} onHide={func} ref="myMask" maskClosable={true}>
    {children}
  </Mask>
</NukePlayGround>
```

---

```js
/** @jsx createElement */
import { createElement, Component, findDOMNode, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Button from 'nuke-button';
import Mask from 'nuke-mask';
import Page from 'nuke-page';
let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      maskVisible: false,
      log: ''
    };
    this.onShow = this.onShow.bind(this);
    this.onHide = this.onHide.bind(this);
    this.renderOverlay = this.renderOverlay.bind(this);
  }

  showMask(e) {
    this.refs.myMask.show();
  }
  onVisibleChanged = (e) => {};
  hideMask(e) {
    this.refs.myMask.hide();
  }
  onShow(e) {
    this.setState({ log: this.state.log.concat('\n onShow event') });
  }
  onHide(e) {
    this.setState({ log: this.state.log.concat('\n onHide event') });
  }
  renderOverlay() {
    return (
      <View style={styles.dialogWrap}>
        <Text style={styles.text}>touch background area will close window</Text>
        <Button type="primary" style={styles.btn} onPress={(e) => this.hideMask(e)}>
          Close
        </Button>
      </View>
    );
  }
  render() {
    return (
      <Page title="Mask">
        <Page.Intro main="normal" />
        <Button type="primary" onPress={(e) => this.showMask(e)}>
          open Overlay
        </Button>
        <Mask
          onShow={this.onShow}
          onHide={this.onHide}
          defaultVisible={true}
          onVisibleChanged={this.onVisibleChanged}
          ref="myMask"
          animate={false}
          style={styles.mask}
          maskClosable={true}>
          {this.renderOverlay()}
        </Mask>
        <Text style={{ whiteSpace: 'pre-wrap', fontSize: 28, color: 'grey' }}>{this.state.log}</Text>
      </Page>
    );
  }
};
const styles = {
  mask: {
    flex: 1,
    width: 750,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0,0,0,0.7)'
  },
  dialogWrap: {
    width: 600,
    height: 300,
    padding: 30,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ffffff'
  },
  text: {
    marginBottom: 20,
    fontSize: 32,
    flex: 1
  }
};
render(<App />);
```