react dialog component
http://localhost:8007/examples/
online example: https://dialog.react-component.vercel.app/
var Dialog = require('rc-dialog');
ReactDOM.render(
<Dialog title={title} onClose={callback1} visible>
<p>first dialog</p>
</Dialog>
), document.getElementById('t1'));
// use dialog| Name | Type | Default | Description | Version |
|---|---|---|---|---|
| prefixCls | String | rc-dialog | The dialog dom node's prefixCls | |
| className | String | additional className for dialog | ||
| classNames | { header?: string; body?: string; footer?: string; mask?: string; content?: string; wrapper?: string; } | pass className to target area | ||
| styles | { header?: CSSProperties; body?: CSSProperties; footer?: CSSProperties; mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties; } | pass styles to target area | ||
| style | Object | {} | Root style for dialog element.Such as width, height | |
| zIndex | Number | |||
| 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 | ({ closeIcon?: React.ReactNode; disabled?: boolean, afterClose:function } & React.AriaAttributes) | 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 | ||
| getContainer | function(): HTMLElement | to determine where Dialog will be mounted | ||
| destroyOnHidden | Boolean | false | to unmount child compenents on onClose | |
| closeIcon | ReactNode | specific the close icon. | ||
| forceRender | Boolean | false | Create dialog dom node before dialog first show | |
| focusTriggerAfterClose | Boolean | true | focus trigger element when dialog closed | |
| modalRender | (node: ReactNode) => ReactNode | Custom modal content render | 8.3.0 |
npm install
npm start
npm test
npm run chrome-test
npm run coverage
open coverage/ dir
rc-dialog is released under the MIT license.
