weex-nuke
Version:
基于 Rax 、Weex 的高性能组件体系 ~~
45 lines (27 loc) • 2.42 kB
Markdown
- category: Components
- chinese: 遮罩层
- type: Basic
---
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.
| 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" />
- this.refs.myMask.show() : show Mask
- this.refs.myMask.hide() : close Mask