| 1 | # rc-dialog
|
| 2 |
|
| 3 | react dialog component
|
| 4 |
|
| 5 | [![NPM version][npm-image]][npm-url] [](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Test coverage][coveralls-image]][coveralls-url] [![Dependencies][david-image]][david-url] [![DevDependencies][david-dev-image]][david-dev-url] [![npm download][download-image]][download-url] [![bundle size][bundlephobia-image]][bundlephobia-url]
|
| 6 |
|
| 7 | [npm-image]: http://img.shields.io/npm/v/rc-dialog.svg?style=flat-square
|
| 8 | [npm-url]: http://npmjs.org/package/rc-dialog
|
| 9 | [github-actions-image]: https://github.com/react-component/dialog/workflows/CI/badge.svg
|
| 10 | [github-actions-url]: https://github.com/react-component/dialog/actions
|
| 11 | [circleci-image]: https://img.shields.io/circleci/react-component/dialog/master?style=flat-square
|
| 12 | [circleci-url]: https://circleci.com/gh/react-component/dialog
|
| 13 | [coveralls-image]: https://img.shields.io/coveralls/react-component/dialog.svg?style=flat-square
|
| 14 | [coveralls-url]: https://coveralls.io/r/react-component/dialog?branch=master
|
| 15 | [david-url]: https://david-dm.org/react-component/dialog
|
| 16 | [david-image]: https://david-dm.org/react-component/dialog/status.svg?style=flat-square
|
| 17 | [david-dev-url]: https://david-dm.org/react-component/dialog?type=dev
|
| 18 | [david-dev-image]: https://david-dm.org/react-component/dialog/dev-status.svg?style=flat-square
|
| 19 | [download-image]: https://img.shields.io/npm/dm/rc-dialog.svg?style=flat-square
|
| 20 | [download-url]: https://npmjs.org/package/rc-dialog
|
| 21 | [bundlephobia-url]: https://bundlephobia.com/result?p=rc-dialog
|
| 22 | [bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-dialog
|
| 23 |
|
| 24 | ## Screenshot
|
| 25 |
|
| 26 | <img src="http://gtms04.alicdn.com/tps/i4/TB1dp5lHXXXXXbmXpXXyVug.FXX-664-480.png" />
|
| 27 |
|
| 28 | ## Example
|
| 29 |
|
| 30 | http://localhost:8007/examples/
|
| 31 |
|
| 32 | online example: https://dialog.react-component.vercel.app/
|
| 33 |
|
| 34 | ## Install
|
| 35 |
|
| 36 | [](https://npmjs.org/package/rc-dialog)
|
| 37 |
|
| 38 | ## Usage
|
| 39 |
|
| 40 | ```js
|
| 41 | var Dialog = require('rc-dialog');
|
| 42 |
|
| 43 | ReactDOM.render(
|
| 44 | <Dialog title={title} onClose={callback1} visible>
|
| 45 | <p>first dialog</p>
|
| 46 | </Dialog>
|
| 47 | ), document.getElementById('t1'));
|
| 48 |
|
| 49 | // use dialog
|
| 50 | ```
|
| 51 |
|
| 52 | ## API
|
| 53 |
|
| 54 | ### rc-dialog
|
| 55 |
|
| 56 | | Name | Type | Default | Description | Version |
|
| 57 | | ---------------------- | ------------------------------ | --------- | ------------------------------------------------------------------------------- | ------- |
|
| 58 | | prefixCls | String | rc-dialog | The dialog dom node's prefixCls | |
|
| 59 | | className | String | | additional className for dialog | |
|
| 60 | | style | Object | {} | Root style for dialog element.Such as width, height | |
|
| 61 | | zIndex | Number | | | |
|
| 62 | | bodyStyle | Object | {} | body style for dialog body element.Such as height | |
|
| 63 | | maskStyle | Object | {} | style for mask element | |
|
| 64 | | visible | Boolean | false | current dialog's visible status | |
|
| 65 | | animation | String | | part of dialog animation css class name | |
|
| 66 | | maskAnimation | String | | part of dialog's mask animation css class name | |
|
| 67 | | transitionName | String | | dialog animation css class name | |
|
| 68 | | maskTransitionName | String | | mask animation css class name | |
|
| 69 | | title | String\|React.Element | | Title of the dialog | |
|
| 70 | | footer | React.Element | | footer of the dialog | |
|
| 71 | | closable | Boolean | true | whether show close button | |
|
| 72 | | mask | Boolean | true | whether show mask | |
|
| 73 | | maskClosable | Boolean | true | whether click mask to close | |
|
| 74 | | keyboard | Boolean | true | whether support press esc to close | |
|
| 75 | | mousePosition | {x:number,y:number} | | set pageX and pageY of current mouse(it will cause transform origin to be set). | |
|
| 76 | | onClose | function() | | called when click close button or mask | |
|
| 77 | | afterClose | function() | | called when close animation end | |
|
| 78 | | getContainer | function(): HTMLElement | | to determine where Dialog will be mounted | |
|
| 79 | | destroyOnClose | Boolean | false | to unmount child compenents on onClose | |
|
| 80 | | closeIcon | ReactNode | | specific the close icon. | |
|
| 81 | | forceRender | Boolean | false | Create dialog dom node before dialog first show | |
|
| 82 | | focusTriggerAfterClose | Boolean | true | focus trigger element when dialog closed | |
|
| 83 | | modalRender | (node: ReactNode) => ReactNode | | Custom modal content render | 8.3.0 |
|
| 84 |
|
| 85 | ## Development
|
| 86 |
|
| 87 | ```
|
| 88 | npm install
|
| 89 | npm start
|
| 90 | ```
|
| 91 |
|
| 92 |
|
| 93 |
|
| 94 | ## Test Case
|
| 95 |
|
| 96 | ```
|
| 97 | npm test
|
| 98 | npm run chrome-test
|
| 99 | ```
|
| 100 |
|
| 101 | ## Coverage
|
| 102 |
|
| 103 | ```
|
| 104 | npm run coverage
|
| 105 | ```
|
| 106 |
|
| 107 | open coverage/ dir
|
| 108 |
|
| 109 |
|
| 110 | ## License
|
| 111 |
|
| 112 | rc-dialog is released under the MIT license.
|