search

react-component / m-dialog

React Mobile Dialog(web & react-native)
http://react-component.github.io/m-dialog
MIT License
45 stars 15 forks source link

readme

m-dialog

react dialog component for mobile

NPM version build status Test coverage gemnasium deps npm download

Screenshot

Install

rmc-dialog

Usage

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

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

// use dialog

API

rmc-dialog(web)

name description type default
prefixCls The dialog dom node's prefixCls String rmc-dialog
className additional className for dialog String
wrapClassName additional className for dialog wrap String
style Root style for dialog element.Such as width, height Object {}
zIndex z-index Number
bodyStyle body style for dialog body element.Such as height Object {}
maskStyle style for mask element. Object {}
visible current dialog's visible status Boolean false
animation part of dialog animation css class name String
maskAnimation part of dialog's mask animation css class name String
transitionName dialog animation css class name String
maskTransitionName mask animation css class name String
title Title of the dialog String React.Element
footer footer of the dialog React.Element
closable whether show close button Boolean true
mask whether show mask Boolean true
maskClosable whether click mask to close Boolean true
onClose called when click close button or mask function

rmc-dialog/lib/Dialog (react-native)

name description type default
wrapStyle style for modal wrap Object {}
maskStyle style for modal mask Object {}
style style for modal Object {}
animationType animation type for modal content, can be one of none|fade|slide-up|slide-down String slide-up
animationDuration animation duration number 300
visible visible state boolean false
animateAppear whether animation on first show boolean false
onClose called when close Function ()=>void
onAnimationEnd called when animation end Function (visible:boolean)=>void (animationType !== 'none')

Development

npm install
npm start

Example

http://localhost:8007/examples/

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

react-native

npm run rn-init
npm run watch-tsc
react-native start
react-native run-ios

Test Case

npm test
npm run chrome-test

Coverage

npm run coverage

open coverage/ dir

License

rmc-dialog is released under the MIT license.