react-roui
Render Once UI 适合移动端的简单交互组件
npm install react-roui
Live demo
Usage
import React from 'react';import { render } from 'react-dom';import View from './view';import './app.less'; // Render Onceimport { UI } from 'react-ui';var App = React.createClass({ render: function(){ return ( <div> <UI/> <View/> </div> ); }});render(<App/>, document.getElementById('app'));
view.js
import React from 'react';// Use Anywhereimport ui from 'react-roui'; export default React.createClass({ render(){ window.ui = ui; function showModalWaiting() { ui.showWaiting(true); setTimeout(ui.closeWaiting, 3e3); } function menu() { ui.menu({ title: '请选择喜欢的数字', btns: [0,'<a class="test">1</a>'], action: function(i){ ui.toast(i + ' clicked'); } }); } function dialog() { ui.dialog({ title:'弹窗标题', cnt:'自定义弹窗内容,居中显示,告知确认的信息等', btns: ['取消','确定'], action: function(i){ ui.toast(i + ' clicked'); } }); } return ( <div> <a onClick={() => ui.showWaiting()} className="btn">show waiting</a> <a onClick={showModalWaiting} className="btn">show modal waiting 3s</a> <a onClick={ui.closeWaiting} className="btn">close waiting</a> <br/> <a onClick={() => ui.toast('toast message')} className="btn">toast message</a> <br/> <a onClick={menu} className="btn">menu(action sheet)</a> <br/> <a onClick={dialog} className="btn">show dialog</a> </div> ); }});