react-fast-dialog

React dialog, You can customize all!

• Online | 在线文档

• Other version | 其他版本

• example | 示例

npm install react-fast-dialog --save

属性	默认值	示例	说明
title	''	"标题"	标题内容，可以是个 Component
show	false	true	控制弹窗是否显示
onClose	false	function(){console.log('close')}	用户关闭弹窗时回调
wrapClassName	rf-dialog--simple	my-dialog--night	组件顶级 div 样式名，用于轻度自定义样式
style	{width: '700px'}	{width: '80%'}	控制弹窗样式
showBodyStyle	{overflow: 'hidden'}	{overflow: 'hidden', opacity: '0.2'}	弹窗显时候 body 的样式
close	"×"	"关闭" , false	关闭按钮内容，可以是个 Component ( 当为false时,不显示关闭按钮 )
clsp	'rf-'	'my-'	控制 class 前缀，用于深度自定义样式
maskAllowClose	true	false	点击空白处关闭弹窗

简单弹窗

var React = require('react')
var ReactDOM = require('react-dom')
var Dialog = require('react-fast-dialog')
var App = React.createClass({
    getInitialState: function () {
        return { show: false }
    },
    onClose: function () {
        this.setState({
            show: false
        })
    },
    showDialog: function () {
        this.setState({
            show: true
        })
    },
    render: function () {
        return (
            <div>
                <button type="button" onClick={this.showDialog} >Click</button>
                <Dialog title={'赋得古原草送别'} onClose={this.onClose} show={this.state.show} >
                    <blockquote>
                        离离原上草，一岁一枯荣。<br />
                        野火烧不尽，春风吹又生。<br />
                        远芳侵古道，晴翠接荒城。<br />
                        又送王孙去，萋萋满别情。
                    </blockquote>
                </Dialog>
            </div>
        )
    }
})
ReactDOM.render(<App />, document.getElementById('demo'))

参与开发 - development

npm i -g fis3 --registry=https://registry.npm.taobao.org
# 安装依赖 
npm run dep
    # > 建议使用 yarn 替代 npm run dep. 
    # npm i -g yarn 
    # npm run yi 
 
# 服务器 
npm run s
 
# 开发 
npm run dev
 
 
# 构建 gh-pages 版本 到 output/ 
npm run gh
# 将 output/** 发布到 gh-pages 分支 
npm run gh-push
# 构建 npm 要发布的代码到 output/ 
npm run npm

For npm owner: npm publish Need to be in ./output