weex-nuke
Version:
基于 Rax 、Weex 的高性能组件体系 ~~
81 lines (75 loc) • 1.79 kB
JSX
/** @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 />);