weex-nuke/src/node_modules/nuke-mask/docs/advanced.md

基于 Rax 、Weex 的高性能组件体系 ~~

# Mask 遮罩层 模拟浮层效果

* order: 1
- title_en: simulate floating layer effect


Mask 模拟浮层效果

---
```js
<NukePlayGround>
<Button type="primary" onPress={e => this.showMask()}>打开浮层(空白区域不能关闭)</Button>
<Mask
  defaultVisible={false}
  noPress={true}
  ref="myMask"
  animate={true}
  style={styles.mask}
  contentStyle={styles.body}
>
...
</Mask>
</NukePlayGround>
```
---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import Input from 'nuke-input';
import View from 'nuke-view';
import Text from 'nuke-text';
import Env from 'nuke-env';
import Checkbox from 'nuke-checkbox';
import Button from 'nuke-button';
import Mask from 'nuke-mask';
import Page from 'nuke-page';
const { isWeb } = Env;
let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.GroupFruit = [
      { value: 'zj', label: '浙江' },
      { value: 'ah', label: '安徽' },
      { value: 'sh', label: '上海' }
    ];
    this.state = {
      fruitChecked: ['ah']
    };
  }
  showMask() {
    this.refs.myMask.show();
  }
  hideMask() {
    this.refs.myMask.hide();
  }

  onChange = value => {
    this.setState({
      fruitChecked: value
    });
  };
  render() {
    return (
      <Page title="Mask">
        <Page.Intro main="浮层中嵌入简易表单操作" />
        <View style={styles.result}>
          {this.state.fruitChecked ? (
            <Text style={styles.resultText}>
              已选择： {this.state.fruitChecked.join(',')}
            </Text>
          ) : null}
        </View>
        <Button type="primary" onPress={e => this.showMask()}>
          打开浮层(空白区域不能关闭)
        </Button>
        <Mask
          defaultVisible={false}
          noPress={true}
          ref="myMask"
          animate={true}
          style={styles.mask}
          contentStyle={styles.body}
        >
          <View style={styles.head}>
            <Text style={styles.textHead}>选择区域</Text>
          </View>
          <View style={styles.topicsWrap}>
            <Checkbox.Group
              value={this.state.fruitChecked}
              onChange={this.onChange}
              size="small"
              dataSource={this.GroupFruit}
              style={{ marginRight: 10 }}
            />
          </View>
          <View style={styles.footer}>
            <Button
              rect
              block
              style={styles.dlgBtn}
              type="primary"
              size="large"
              onPress={() => this.hideMask()}
            >
              确定
            </Button>
          </View>
        </Mask>
      </Page>
    );
  }
};
const styles = {
  mask: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.7)',
    justifyContent: 'flex-end'
  },

  body: {
    width: 750,
    height: 468,
    borderRadius: 8,
    borderBottomStyle: 'solid',
    borderBottomWidth: 1,
    borderBottomColor: 'red',

    paddingTop: 30,
    borderRadius: 8,
    backgroundColor: '#ffffff'
  },
  head: {
    height: 60,
    alignItems: 'center',
    justifyContent: 'center',
    borderBottomColor: '#eeeeee',
    borderBottomStyle: 'solid',
    borderBottomWidth: 1
  },
  textHead: {
    color: '#3d4145',
    fontSize: 32
  },
  topics: {
    paddingLeft: 40,
    paddingRight: 40,
    flexDirection: 'row'
  },
  text: {
    fontSize: 28,
    padding: 10,
    color: '#3089dc',
    borderColor: '#3089dc',
    borderStyle: 'solid',
    borderWidth: 1,
    marginRight: 20
  },
  footer: {
    flexDirection: 'row',

    alignItems: 'center',
    justifyContent: 'flex-end',
    height: 94
  },
  dlgBtn: {
    flex: 1
  },
  result: {
    height: 480,
    margin: 30,
    padding: 10,
    backgroundColor: '#ffffff',
    justifyContent: 'center',
    alignItems: 'center'
  },
  resultText: {
    fontSize: 28
  }
};
render(<App />);
```