\n );\n}\nexport default App;\n```\n\n## Dom\n\n```JSX\n\n```\n\n## Api\n\n```JSX\nDialog.defaultProps={\n className = \"\",\n children = null,\n open = false,\n active = true,\n lockScroll = true,\n maskTitle = \"Mask\",\n removeTime = 200,\n disabledPortal = false,\n disableEsc = false,\n closeTitle = \"Close\",\n closeChildren = ×,\n onClose = () => {},\n onClickMask = () => {}\n};\n\nDialog.propTypes = {\n /**\n * css class\n */\n className: PropTypes.string,\n /**\n * Dialog children, usually the included sub-components.\n */\n children: PropTypes.node,\n /**\n * if `> 0`, hide dialog and remove dialog after removeTime\n * else if `0`, remove dialog immediately\n * else, keep exit after hide\n */\n removeTime: PropTypes.number,\n /**\n * If `true`, the dialog go through the enter, entring, enterd.\n * If `false`, the dialog go through the exitring, exitred.\n */\n open: PropTypes.bool,\n /**\n * If `true`, the dialog can focusable\n * If `false`, the dialog blur\n */\n active: PropTypes.bool,\n /**\n * Callback fired when dialog close.\n */\n onClose: PropTypes.func,\n /**\n * Callback fired when the `Mask` is clicked.\n * if return `false`, no longer trigger onclick\n * else trigger the onClose\n */\n onClickMask: PropTypes.func,\n /**\n * If `true`, when dialog scroll into bottom the body will scroll\n */\n lockScroll: PropTypes.bool,\n /**\n * If `true`, the dialog will render where it is defined\n */\n disabledPortal: PropTypes.bool,\n /**\n * If `true`, the dialog will not close when click esc\n */\n disableEsc: PropTypes.bool,\n /**\n * title of the `Close`.\n * If empty string, the `Close` do not render\n */\n closeTitle: PropTypes.string,\n /**\n * title of the mask element.\n * If empty string, the mask do not render\n */\n maskTitle: PropTypes.string,\n /**\n * Close children\n */\n closeChildren: PropTypes.node\n};\n```\n\n### Transition\n\n```CSS\n.nu_dialog {\n transform: translate(0, -50px);\n}\n._top .nu_dialog {\n transform: translate(0, -50px);\n}\n._bottom .nu_dialog {\n transform: translate(0, 50px);\n}\n._right .nu_dialog {\n transform: translate(50px, 0);\n}\n._left .nu_dialog {\n transform: translate(-50px, 0);\n}\n```\n\n你只需要定义 `.nu_dialog` 的起点状态即可。\n\n## 贡献与开发\n\n这个项目是与贡献者行为准则一起发布的。参与本项目，代表您同意遵守其条款。\n\n运行 demo `npm start`.\n\n## 技术方案\n\n`@_nu/react-dialog` 灵感来自以下几个优秀的开源框架：\n\n- [react-aria-modal](https://github.com/davidtheclark/react-aria-modal)\n- [focus-trap-react](https://github.com/davidtheclark/focus-trap-react)\n- [material-ui](https://material-ui.com/zh/components/modal/)\n- [nu-system](https://nu-system.github.io/)\n","readmeFilename":"README.md"}