m-dialog

react dialog component for mobile

Screenshot

Install

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.