# Mask

- category: Components
- chinese: 遮罩层
- type: Basic

---


## Design
 
 This component is used as mask layer of a popup window, and controls the whole popup window show or hide.

<img src="https://img.alicdn.com/tfs/TB1AlB.SFXXXXarXVXXXXXXXXXX-1242-2208.png" width="240" />

This component implement use weex  `mask` component, and use `div` and absolute layout  in web environment. 

**Notice** This component use aliweex sdk , so your app needs to integrate it.

## API

| Props        | Description                                                                                                        | Type     | Default       |
| ------------ | ------------------------------------------------------------------------------------------------------------------ | -------- | ------------- |
| style        | style object                                                                                                       | obj      |
| animate      | animation is enabled while showing                                                                                 | boolean  | true          |
| effect       | Animation effects if `animate=true`, enumerated values：`ease-in` `ease-in-out` `ease-out` `linear` `cubic-bezier` | string   | `ease-in-out` |
| maskClosable | is closable when touching mask grey area                                                                           | boolean  | false         |
| duration     | animation duration(ms)                                                                                             | number   | 200           |
| contentStyle | contentStyle                                                                                                       | obj      |
| onShow       | 浮层展示后的回调                                                                                                   | function |
| onHide       | 浮层隐藏后的回调                                                                                                   | function |

### About contentStyle

If Mask has more than one child inside it, we will add an extra View node as parent.  ContentStyle props will be added to this parent node.

<img src="https://img.alicdn.com/tfs/TB1LYU0kPihSKJjy0FlXXadEXXa-1100-750.png" width="600" />

### Instance Methods：

- this.refs.myMask.show() : show Mask
- this.refs.myMask.hide() : close Mask