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