UNPKG

weex-nuke

Version:

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

81 lines (75 loc) 1.79 kB
/** @jsx createElement */ import { createElement, Component, render } from 'rax'; import Input from 'nuke-input'; 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'; const App = class NukeDemoIndex extends Component { constructor() { super(); this.state = { maskVisible: false, }; } showMask = () => { this.setState({ maskVisible: true, }); } hideMask =() => { this.setState({ maskVisible: false, }); } render() { return ( <Page title="Mask"> <Page.Intro main="普通用法" /> <Button type="primary" onPress={this.showMask}>打开浮层</Button> { this.state.maskVisible ? <Mask style={styles.mask}> <View style={styles.bg}> <View style={styles.dialogWrap}> <Text style={styles.text}>遮罩层里的内容</Text> <Button type="primary" onPress={this.hideMask}>点击关闭</Button> </View> </View> </Mask> : null } </Page> ); } }; const styles = { textarea: { width: '750rem', height: '200rem', borderWidth: '1rem', borderStyle: 'solid', borderColor: '#cccccc', }, bg: { flex: 1, width: '750rem', alignItems: 'center', justifyContent: 'center', backgroundColor: 'rgba(0,0,0,0.7)', }, dialogWrap: { width: 600, height: 300, padding: 20, alignItems: 'center', justifyContent: 'center', backgroundColor: '#ffffff', }, text: { marginBottom: 20, // color:'#ffffff' }, }; render(<App />);