React-fast-dialog NPM

react-fast-dialog

React dialog, You can customize all!

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

keywords

classnames react react-dom

0.0.3

9 years ago

0.0.2

9 years ago

0.0.1

9 years ago