Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including rc-dialog-drag with all npm packages installed. Try it out:

var rcDialogDrag = require("rc-dialog-drag")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

rc-dialog-drag v1.0.0

dialog ui component for react

rc-dialog


react dialog component

NPM version build status Test coverage gemnasium deps npm download

Screenshot

Install

rc-dialog

Usage

var Dialog = require('rc-dialog');

ReactDOM.render(
  <Dialog title={title} onClose={callback1} visible>
      <p>first dialog</p>
  </Dialog>
), document.getElementById('t1'));

// use dialog

API

rc-dialog

name type default description
prefixCls String rc-dialog The dialog dom node's prefixCls
className String additional className for dialog
wrapClassName String additional className for dialog wrap
style Object {} Root style for dialog element.Such as width, height
zIndex Number
bodyStyle Object {} body style for dialog body element.Such as height
maskStyle Object {} style for mask element.
visible Boolean false current dialog's visible status
animation String part of dialog animation css class name
maskAnimation String part of dialog's mask animation css class name
transitionName String dialog animation css class name
maskTransitionName String mask animation css class name
title String|React.Element Title of the dialog
footer React.Element footer of the dialog
closable Boolean true whether show close button
mask Boolean true whether show mask
maskClosable Boolean true whether click mask to close
keyboard Boolean true whether support press esc to close
mousePosition {x:number,y:number} set pageX and pageY of current mouse(it will cause transform origin to be set).
onClose function() called when click close button or mask
afterClose function() called when close animation end
appendDOM string modal mount container element id
destroyOnClose Boolean false to unmount child compenents on onClose
draggable Boolean true whether drag modal to move
bounds any {} modal drag bounds

Development

npm install
npm start

Example

http://localhost:8007/examples/

online example: http://react-component.github.io/dialog/

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rc-dialog is released under the MIT license.

本项目从 https://github.com/react-component/dialog fork,修改了部分代码,使弹层实现了拖拽功能。

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free