react-roui

Render Once UI 适合移动端的简单交互组件

npm install react-roui

Live demo

https://broltes.github.io/ui

Usage

1import React from 'react';
2import { render } from 'react-dom';
3import View from './view';
4import './app.less';
5
6// Render Once
7import { UI } from 'react-ui';
8var App = React.createClass({
9    render: function(){
10        return (
11            <div>
12                <UI/>
13                <View/>
14            </div>
15        );
16    }
17});
18render(<App/>, document.getElementById('app'));

view.js

1import React from 'react';
2// Use Anywhere
3import ui from 'react-roui';
4
5export default React.createClass({
6    render(){
7        window.ui = ui;
8
9        function showModalWaiting() {
10            ui.showWaiting(true);
11            setTimeout(ui.closeWaiting, 3e3);
12        }
13
14        function menu() {
15            ui.menu({
16                title: '请选择喜欢的数字',
17                btns: [0,'<a class="test">1</a>'],
18
19                action: function(i){
20                    ui.toast(i + ' clicked');
21                }
22            });
23        }
24
25        function dialog() {
26            ui.dialog({
27                title:'弹窗标题',
28                cnt:'自定义弹窗内容，居中显示，告知确认的信息等',
29                btns: ['取消','确定'],
30                action: function(i){
31                    ui.toast(i + ' clicked');
32                }
33            });
34        }
35
36        return (
37            <div>
38                <a onClick={() => ui.showWaiting()} className="btn">show waiting</a>
39                <a onClick={showModalWaiting} className="btn">show modal waiting 3s</a>
40                <a onClick={ui.closeWaiting} className="btn">close waiting</a>
41                <br/>
42                <a onClick={() => ui.toast('toast message')} className="btn">toast message</a>
43                <br/>
44                <a onClick={menu} className="btn">menu(action sheet)</a>
45                <br/>
46                <a onClick={dialog} className="btn">show dialog</a>
47            </div>
48        );
49    }
50});

Thanks

https://github.com/weui/weui