reactjs-modal
This is a react component for modal.
Install
npm install reactjs-modal --save
Usage
;; static propTypes = defaultValue: PropTypesstring onChange: PropTypesfunc value: PropTypesstring name: PropTypesstring children: PropTypesarray ; { superprops; thisstate = value: thispropsdefaultValue ; } { if thispropsonChange thisprops; this; }; { const value = thispropsvalue || thisstatevalue; const children = ReactChildren; return <div>children</div> ; } ; ;;;;;; { superprops; thisstate = visible: false position: 'center' ; } { this; }; { this; }; { this; }; { let modal; const visible = thisstate; let position = thisstate; if visible const footer = <div> <button className="example-btn example-btn-primary" onClick=thisonClose> 确认 </button> <button className="example-btn example-btn-default" onClick=thisonClose> 取消 </button> </div> ; if position === 'xy' position = right: '10px' top: '20px'; modal = <Modal visible=visible onClose=thisonClose title=`Modal 窗口位置 ` style=width: '700px' footer=footer position=position > <p>可以改变 Modal 窗口展示位置</p> <p>支持 top bottom left right center left-top left-bottom right-top right-bottom 自定义坐标</p> <h3>例子代码</h3> <pre> ` <Modal visible={visible} onClose={this.onClose} title="Modal窗口位置" style={{width: '700px'}} footer={footer} position={position}> <p>可以改变 Modal 窗口展示位置</p> <p>支持 top bottom left right center left-top left-bottom right-top right-bottom 自定义坐标</p></Modal>` </pre> </Modal> ; return <div className="example"> <p>位置:</p> <ControllableCustomRadio name="position" value=thisstateposition onChange=thishandleChange> <option value="left">左</option> <option value="right">右</option> <option value="top">上</option> <option value="bottom">下</option> <option value="center">居中</option> <option value="left-top">左上</option> <option value="left-bottom">左下</option> <option value="right-top">右上</option> <option value="right-bottom">右下</option> <option value="xy">自定义坐标位置</option> </ControllableCustomRadio> <p> <button className="example-btn example-btn-default" onClick=thisonClick> 打开 Modal 窗口 </button> </p> modal </div> ; } ;
Options
选项 | 类型 | 功能 |
---|---|---|
prefixCls | PropTypes.string | Modal 窗口 class,默认为 rc-modal |
className | PropTypes.string | 自定义 class 样式 |
style | PropTypes.object | 自定义 style 比如 width 或 height |
bodyStyle | PropTypes.object | 自定义 modal body 的样式,比如 width height 滚动条等 |
footerStyle | PropTypes.object | 自定义 modal footer 的样式,比如 width height 滚动条等 |
zIndex | PropTypes.number | 模态窗口 zIndex |
visible | PropTypes.bool | Modal 窗口是否可见 |
closable | PropTypes.bool | 是否显示关闭按钮 |
onClose | PropTypes.func | 关闭窗口时回调函数 |
keyboard | PropTypes.bool | 按 esc 是否关闭窗口 |
mask | PropTypes.bool | 是否显示遮罩效果 |
maskClosable | PropTypes.bool | 设为 true,当点击遮罩时,关闭窗口 |
position | PropTypes.oneOfType([PropTypes.string, PropTypes.object]) | 模态窗口显示位置,当设为字符串时,支持 top left right bottom center left-top left-bottom right-top right-bottom, 设置对象表示其坐标 {x: number,y:number} |
animationPosition | PropTypes.object | 基于指定位置渲染动画,格式为: { x: 10, y: 20} |
animation | PropTypes.oneOfType([PropTypes.bool, PropTypes.string]) | 窗体是否有动画效果,如果设为 false,则不启用动画,设为 true,使用默认的动画,字符串表示自定义的动画样式 |
maskAnimation | PropTypes.oneOfType([PropTypes.bool, PropTypes.string]) | mask是否有动画效果,如果设为 false,则不启用动画,设为 true,使用默认的动画,字符串表示自定义的动画样式 |
transitionAppearTimeout | PropTypes.number | 动画出现持续时间 |
transitionEnterTimeout | PropTypes.number | 动画进入持续时间 |
transitionLeaveTimeout | PropTypes.number | 动画离开持续时间 |
title | PropTypes.oneOfType([PropTypes.string, PropTypes.element]) | 模态窗口标题 |
footer | PropTypes.element | 底部按钮设置 |
children | PropTypes.node | 窗体内容 |
container | PropTypes.element | 渲染模态窗口容器,默认为 document.body |
preventTouchmove | PropTypes.bool | 当显示模态窗口时,是否阻止 touchmove 事件 |
hideAllModal | PropTypes.bool | 当打开多个模态窗口时,根据该属性来控制是否关闭所有模态窗口 |
hideHeader | PropTypes.bool | 控制是否显示 header |
headerStyle | PropTypes.bool | 自定义 modal header 的样式 |
Example
npm install
npm start
Online Example
http://reactjs-ui.github.io/reactjs-modal/
Build Example
第一次需要先执行前两步操作,再执行第三步。以后修改例子后,只需要执行第三步即可
- 创建 gh-pages 分支,在执行 git subtree add 命令之前,需确保 gh-pages 分支下至少存在一个文件
git checkout -b gh-pages
rm -rf * //隐藏文件需要单独删除,结合命令 ls -a
vim .gitignore //输入一些内容
git add .
git commit -m "init branch gh-pages"
git push --set-upstream origin gh-pages
git checkout master
- 把分支 gh-pages 添加到本地 subtree 中,执行该命令前,请确保 examples-dist 文件夹不存在
git subtree add --prefix=examples-dist origin gh-pages --squash
- 生成在线 examples
npm run build:examples
git add examples-dist
git commit -m "Update online examples"
git subtree pull --prefix=examples-dist origin gh-pages
git subtree push --prefix=examples-dist origin gh-pages --squash
git push
4 使用以下命令一键发布在线例子
npm run examples:publish
Build
npm run build
Publish
npm run build:publish
Issue
https://github.com/reactjs-ui/reactjs-modal/issues
Change Log
Please view here