Basic

Navigation

1. custom-style
2. body scroll
3. width
4. animate
5. confirm
6. command dialog

title&tool

element has data-r-dialog-close="true",will trigger onChange.

tool={(
    <div>
        <span className="r-dialog-btn" data-r-dialog-close="true">Cancel</span>
    </div>
)}

var React = require('react')
var ReactDOM = require('react-dom')
var Dialog = require('dialog.react').default
import $ from "jquery"
var App = React.createClass({
    getInitialState: function() {
        return {
            titleToolShow: false,
            titleShow: false,
            show: false
        }
    },
    render: function () {
        var self = this
        return (
            <div>
                <Dialog
                    title="basic"
                    show={self.state.titleToolShow}
                    onClose={function (){
                        self.setState({
                            titleToolShow: false
                        })
                    }}
                    tool={(
                        <div>
                            <span className="r-dialog-btn" data-r-dialog-close="true">Cancel</span>
                        </div>
                    )}
                     >
                    <div>
                        君自故乡来，应知故乡事。
                        来日绮窗前，寒梅著花未？
                    </div>
                </Dialog>
                <button className="r-dialog-btn" onClick={function () {
                        self.setState({
                            titleToolShow: true
                        })
                    }} >title&tool</button>
                <hr/>
                <Dialog
                    title="basic"
                    show={self.state.titleShow}
                    onClose={function (){
                        self.setState({
                            titleShow: false
                        })
                    }}
                     >
                    <div>
                        故国三千里，深宫二十年。
                        一声何满子，双泪落君前。
                    </div>
                </Dialog>
                <button className="r-dialog-btn r-dialog-btn--primary" onClick={function () {
                        self.setState({
                            titleShow: true
                        })
                    }} >title</button>
                <hr/>
                <Dialog
                    show={self.state.show}
                    onClose={function (){
                        self.setState({
                            show: false
                        })
                    }}
                     >
                    <div>
                        乘兴南游不戒严，九重谁省谏书函。
                        春风举国裁宫锦，半作障泥半作帆。
                    </div>
                </Dialog>
                <button className="r-dialog-btn r-dialog-btn--info" onClick={function () {
                        self.setState({
                            show: true
                        })
                    }} >title&tool empty</button>

            </div>
        )
    }
})
module.exports = App

./title-tool.demo.js

Button style optional

<span class="r-dialog-btn">default</span>
<span class="r-dialog-btn r-dialog-btn--primary">r-dialog-btn r-dialog-btn--primary</span>
<span class="r-dialog-btn r-dialog-btn--info">r-dialog-btn r-dialog-btn--info</span>
<hr/>
<span class="r-dialog-btn r-dialog-btn--warning">r-dialog-btn r-dialog-btn--warning</span>
<span class="r-dialog-btn r-dialog-btn--danger">r-dialog-btn r-dialog-btn--danger</span>
<span class="r-dialog-btn r-dialog-btn--link">r-dialog-btn r-dialog-btn--link</span>

close&maskAllowClose

var React = require('react')
var ReactDOM = require('react-dom')
var Dialog = require('dialog.react').default
import $ from "jquery"
var App = React.createClass({
    getInitialState: function() {
        return {
            textCloseShow: false,
            emptyCloseShow: false,
            maskAllowCloseShow: false
        }
    },
    render: function () {
        var self = this
        return (
            <div>
                <Dialog
                    close="close"
                    show={self.state.textCloseShow}
                    onClose={function (){
                        self.setState({
                            textCloseShow: false
                        })
                    }}
                     >
                    <div>
                    虢国夫人承主恩，平明骑马入宫门。
                    却嫌脂粉污颜色，淡扫峨眉朝至尊。
                    </div>
                </Dialog>
                <button className="r-dialog-btn r-dialog-btn--warning" onClick={function () {
                        self.setState({
                            textCloseShow: true
                        })
                }} >close:"close"</button>
                <hr/>
                <Dialog
                    close={false}
                    show={self.state.emptyCloseShow}
                    onClose={function (){
                        self.setState({
                            emptyCloseShow: false
                        })
                    }}
                     >
                    <div>
                    禁门宫树月痕过，媚眼惟看宿鹭巢。
                    斜拔玉钗灯影畔，剔开红焰救飞蛾。
                        <br/>
                        <strong>Please click on the layer mask to close the dialog</strong>
                    </div>
                </Dialog>
                <button className="r-dialog-btn r-dialog-btn--danger" onClick={function () {
                        self.setState({
                            emptyCloseShow: true
                        })
                }} >close:false</button>
                <hr/>
                <Dialog
                    maskAllowClose={false}
                    show={self.state.maskAllowCloseShow}
                    onClose={function (){
                        self.setState({
                            maskAllowCloseShow: false
                        })
                    }}
                     >
                    <div>
                    日光斜照集灵台，红树花迎晓露开。
                    昨夜上皇新授箓，太真含笑入帘来。
                        <br/>
                        <strong>Click on the mask layer will not trigger onClose</strong>
                    </div>
                </Dialog>
                <button className="r-dialog-btn r-dialog-btn--link" onClick={function () {
                        self.setState({
                            maskAllowCloseShow: true
                        })
                }} >maskAllowClose:false</button>
            </div>
        )
    }
})
module.exports = App

./close-maskAllowClose.demo.js