组件演示

[{"title":"基本用法","id":"components-dialog-demo-basic","tags":[],"filepath":"site/components/dialog/demo/basic.md","directory":"components/dialog/demo","filename":"basic","meta":{"title":"基本用法","description":"\n<p>基本用法。</p>\n","order":"0","filepath":"site/components/dialog/demo/basic.md","filename":"basic","directory":"components/dialog/demo","id":"components-dialog-demo-basic","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar BasicDemo = function (_React$Component) {\n _inherits(BasicDemo, _React$Component);\n\n function BasicDemo(props) {\n _classCallCheck(this, BasicDemo);\n\n var _this = _possibleConstructorReturn(this, (BasicDemo.__proto__ || Object.getPrototypeOf(BasicDemo)).call(this, props));\n\n _this.state = {\n visible: false\n };\n return _this;\n }\n\n _createClass(BasicDemo, [{\n key: 'show',\n value: function show() {\n this.setState({\n visible: true\n });\n }\n }, {\n key: 'render',\n value: function render() {\n var _this2 = this;\n\n return React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Button,\n { onClick: this.show.bind(this) },\n '\\u663E\\u793A\\u5BF9\\u8BDD\\u6846'\n ),\n React.createElement(\n _uxcore.Dialog,\n { title: '\\u7B2C\\u4E00\\u4E2A Dialog',\n visible: this.state.visible,\n onOk: function onOk() {\n _this2.setState({\n visible: false\n });\n },\n onCancel: function onCancel() {\n _this2.setState({\n visible: false\n });\n }\n },\n React.createElement(\n 'p',\n null,\n '\\u5BF9\\u8BDD\\u6846\\u7684\\u5185\\u5BB9'\n ),\n React.createElement(\n 'p',\n null,\n '\\u5BF9\\u8BDD\\u6846\\u7684\\u5185\\u5BB9'\n ),\n React.createElement(\n 'p',\n null,\n '\\u5BF9\\u8BDD\\u6846\\u7684\\u5185\\u5BB9'\n )\n )\n );\n }\n }]);\n\n return BasicDemo;\n}(React.Component);\n\nReactDOM.render(React.createElement(BasicDemo, null), document.getElementById('components-dialog-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Dialog } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { Button } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">BasicDemo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n visible: <span class=\"hljs-literal\">false</span>,\n };\n }\n show() {\n <span class=\"hljs-keyword\">this</span>.setState({\n visible: <span class=\"hljs-literal\">true</span>,\n });\n }\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">onClick</span>=<span class=\"hljs-value\">{this.show.bind(this)}</span>&gt;</span>显示对话框<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Dialog</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">\"第一个 Dialog\"</span>\n <span class=\"hljs-attribute\">visible</span>=<span class=\"hljs-value\">{this.state.visible}</span>\n <span class=\"hljs-attribute\">onOk</span>=<span class=\"hljs-value\">{()</span> =&gt;</span> {\n this.setState({\n visible: false,\n });\n }}\n onCancel={() =&gt; {\n this.setState({\n visible: false,\n });\n }}\n &gt;\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">p</span>&gt;</span>对话框的内容<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">p</span>&gt;</span>对话框的内容<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">p</span>&gt;</span>对话框的内容<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Dialog</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">BasicDemo</span> /&gt;</span>, document.getElementById('components-dialog-demo-basic'));\n</span></code></pre></div>"},"status":"public","toc":""},{"title":"点击按钮触发","id":"components-dialog-demo-asyncclose","tags":[],"filepath":"site/components/dialog/demo/asyncclose.md","directory":"components/dialog/demo","filename":"asyncclose","meta":{"title":"点击按钮触发","description":"\n<p>点击确定2s后再关闭对话框。</p>\n","order":"1","filepath":"site/components/dialog/demo/asyncclose.md","filename":"asyncclose","directory":"components/dialog/demo","id":"components-dialog-demo-asyncclose","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar AsyncCloseDemo = function (_React$Component) {\n _inherits(AsyncCloseDemo, _React$Component);\n\n function AsyncCloseDemo(props) {\n _classCallCheck(this, AsyncCloseDemo);\n\n var _this = _possibleConstructorReturn(this, (AsyncCloseDemo.__proto__ || Object.getPrototypeOf(AsyncCloseDemo)).call(this, props));\n\n _this.state = {\n ModalText: '对话框的内容',\n visible: false\n };\n return _this;\n }\n\n _createClass(AsyncCloseDemo, [{\n key: 'show',\n value: function show() {\n this.setState({\n visible: true\n });\n }\n }, {\n key: 'handleOk',\n value: function handleOk() {\n var _this2 = this;\n\n this.setState({\n ModalText: '对话框将在两秒后关闭'\n });\n setTimeout(function () {\n _this2.setState({\n visible: false,\n ModalText: '对话框的内容'\n });\n }, 2000);\n }\n }, {\n key: 'handleCancel',\n value: function handleCancel() {\n console.log('点击了取消');\n this.setState({\n visible: false\n });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Button,\n { onClick: this.show.bind(this) },\n '\\u663E\\u793A\\u5BF9\\u8BDD\\u6846'\n ),\n React.createElement(\n _uxcore.Dialog,\n { title: '\\u5BF9\\u8BDD\\u6846\\u6807\\u9898',\n visible: this.state.visible,\n onOk: this.handleOk.bind(this),\n onCancel: this.handleCancel.bind(this)\n },\n React.createElement(\n 'p',\n null,\n this.state.ModalText\n )\n )\n );\n }\n }]);\n\n return AsyncCloseDemo;\n}(React.Component);\n\nReactDOM.render(React.createElement(AsyncCloseDemo, null), document.getElementById('components-dialog-demo-asyncclose'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Dialog } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { Button } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">AsyncCloseDemo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n ModalText: <span class=\"hljs-string\">'对话框的内容'</span>,\n visible: <span class=\"hljs-literal\">false</span>,\n };\n }\n show() {\n <span class=\"hljs-keyword\">this</span>.setState({\n visible: <span class=\"hljs-literal\">true</span>,\n });\n }\n handleOk() {\n <span class=\"hljs-keyword\">this</span>.setState({\n ModalText: <span class=\"hljs-string\">'对话框将在两秒后关闭'</span>,\n });\n setTimeout(() =&gt; {\n <span class=\"hljs-keyword\">this</span>.setState({\n visible: <span class=\"hljs-literal\">false</span>,\n ModalText: <span class=\"hljs-string\">'对话框的内容'</span>,\n });\n }, <span class=\"hljs-number\">2000</span>);\n }\n handleCancel() {\n <span class=\"hljs-built_in\">console</span>.log(<span class=\"hljs-string\">'点击了取消'</span>);\n <span class=\"hljs-keyword\">this</span>.setState({\n visible: <span class=\"hljs-literal\">false</span>,\n });\n }\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">onClick</span>=<span class=\"hljs-value\">{this.show.bind(this)}</span>&gt;</span>显示对话框<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Dialog</span> <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">\"对话框标题\"</span>\n <span class=\"hljs-attribute\">visible</span>=<span class=\"hljs-value\">{this.state.visible}</span>\n <span class=\"hljs-attribute\">onOk</span>=<span class=\"hljs-value\">{this.handleOk.bind(this)}</span>\n <span class=\"hljs-attribute\">onCancel</span>=<span class=\"hljs-value\">{this.handleCancel.bind(this)}</span>\n &gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">p</span>&gt;</span>{this.state.ModalText}<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Dialog</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">AsyncCloseDemo</span> /&gt;</span>,\n document.getElementById('components-dialog-demo-asyncclose')\n);</span></code></pre></div>"},"status":"public","toc":""},{"title":"自定义","id":"components-dialog-demo-confirm","tags":[],"filepath":"site/components/dialog/demo/confirm.md","directory":"components/dialog/demo","filename":"confirm","meta":{"title":"自定义","description":"\n<p>自定义 &amp; 垂直居中。</p>\n","order":"2","filepath":"site/components/dialog/demo/confirm.md","filename":"confirm","directory":"components/dialog/demo","id":"components-dialog-demo-confirm","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar CustomFooter = function (_React$Component) {\n _inherits(CustomFooter, _React$Component);\n\n function CustomFooter(props) {\n _classCallCheck(this, CustomFooter);\n\n var _this = _possibleConstructorReturn(this, (CustomFooter.__proto__ || Object.getPrototypeOf(CustomFooter)).call(this, props));\n\n _this.state = {\n loading: false,\n visible: false\n };\n return _this;\n }\n\n _createClass(CustomFooter, [{\n key: 'showModal',\n value: function showModal() {\n this.setState({\n visible: true\n });\n }\n }, {\n key: 'handleOk',\n value: function handleOk() {\n var _this2 = this;\n\n this.setState({ loading: true });\n setTimeout(function () {\n _this2.setState({ loading: false, visible: false });\n }, 3000);\n }\n }, {\n key: 'handleCancel',\n value: function handleCancel() {\n this.setState({ visible: false });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Button,\n { onClick: this.showModal.bind(this) },\n '\\u663E\\u793A\\u5BF9\\u8BDD\\u6846'\n ),\n React.createElement(\n _uxcore.Dialog,\n {\n wrapClassName: 'vertical-center-dailog',\n visible: this.state.visible,\n title: '\\u5BF9\\u8BDD\\u6846\\u6807\\u9898', onOk: this.handleOk, onCancel: this.handleCancel.bind(this),\n footer: [React.createElement(\n _uxcore.Button,\n { key: 'back', onClick: this.handleCancel.bind(this), size: 'small', type: 'secondary' },\n '\\u8FD4 \\u56DE'\n ), React.createElement(\n _uxcore.Button,\n { key: 'submit', onClick: this.handleOk.bind(this), size: 'small' },\n '\\u63D0 \\u4EA4'\n )]\n },\n React.createElement(\n 'p',\n null,\n '\\u5BF9\\u8BDD\\u6846\\u7684\\u5185\\u5BB9'\n ),\n React.createElement(\n 'p',\n null,\n '\\u5BF9\\u8BDD\\u6846\\u7684\\u5185\\u5BB9'\n ),\n React.createElement(\n 'p',\n null,\n '\\u5BF9\\u8BDD\\u6846\\u7684\\u5185\\u5BB9'\n )\n )\n );\n }\n }]);\n\n return CustomFooter;\n}(React.Component);\n\nReactDOM.render(React.createElement(CustomFooter, null), document.getElementById('components-dialog-demo-confirm'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Dialog } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { Button } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">CustomFooter</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n loading: <span class=\"hljs-literal\">false</span>,\n visible: <span class=\"hljs-literal\">false</span>,\n };\n }\n showModal() {\n <span class=\"hljs-keyword\">this</span>.setState({\n visible: <span class=\"hljs-literal\">true</span>,\n });\n }\n handleOk() {\n <span class=\"hljs-keyword\">this</span>.setState({ loading: <span class=\"hljs-literal\">true</span> });\n setTimeout(() =&gt; {\n <span class=\"hljs-keyword\">this</span>.setState({ loading: <span class=\"hljs-literal\">false</span>, visible: <span class=\"hljs-literal\">false</span> });\n }, <span class=\"hljs-number\">3000</span>);\n }\n handleCancel() {\n <span class=\"hljs-keyword\">this</span>.setState({ visible: <span class=\"hljs-literal\">false</span> });\n }\n render() {\n <span class=\"hljs-keyword\">return</span> (<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">onClick</span>=<span class=\"hljs-value\">{this.showModal.bind(this)}</span>&gt;</span>\n 显示对话框\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Dialog</span>\n <span class=\"hljs-attribute\">wrapClassName</span>=<span class=\"hljs-value\">\"vertical-center-dailog\"</span>\n <span class=\"hljs-attribute\">visible</span>=<span class=\"hljs-value\">{this.state.visible}</span>\n <span class=\"hljs-attribute\">title</span>=<span class=\"hljs-value\">\"对话框标题\"</span> <span class=\"hljs-attribute\">onOk</span>=<span class=\"hljs-value\">{this.handleOk}</span> <span class=\"hljs-attribute\">onCancel</span>=<span class=\"hljs-value\">{this.handleCancel.bind(this)}</span>\n <span class=\"hljs-attribute\">footer</span>=<span class=\"hljs-value\">{[</span>\n &lt;<span class=\"hljs-attribute\">Button</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">\"back\"</span> <span class=\"hljs-attribute\">onClick</span>=<span class=\"hljs-value\">{this.handleCancel.bind(this)}</span> <span class=\"hljs-attribute\">size</span>=<span class=\"hljs-value\">\"small\"</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"secondary\"</span>&gt;</span>返 回<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>,\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">\"submit\"</span> <span class=\"hljs-attribute\">onClick</span>=<span class=\"hljs-value\">{this.handleOk.bind(this)}</span> <span class=\"hljs-attribute\">size</span>=<span class=\"hljs-value\">\"small\"</span>&gt;</span>提 交<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>,\n ]}\n &gt;\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">p</span>&gt;</span>对话框的内容<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">p</span>&gt;</span>对话框的内容<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">p</span>&gt;</span>对话框的内容<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">p</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Dialog</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>)</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">CustomFooter</span> /&gt;</span>, document.getElementById('components-dialog-demo-confirm'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"信息提示","id":"components-dialog-demo-info","tags":[],"filepath":"site/components/dialog/demo/info.md","directory":"components/dialog/demo","filename":"info","meta":{"title":"信息提示","description":"\n<p>信息提示。</p>\n","order":"3","filepath":"site/components/dialog/demo/info.md","filename":"info","directory":"components/dialog/demo","id":"components-dialog-demo-info","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nfunction info() {\n _uxcore.Dialog.info({\n title: '这是一条通知信息',\n content: '一些附加信息一些附加信息一些附加信息',\n onOk: function onOk() {}\n });\n}\n\nfunction success() {\n _uxcore.Dialog.success({\n title: '这是一条通知信息',\n content: '一些附加信息一些附加信息一些附加信息'\n });\n}\n\nfunction error() {\n _uxcore.Dialog.error({\n title: '这是一条通知信息',\n content: '一些附加信息一些附加信息一些附加信息'\n });\n}\n\nvar InfoDemo = function (_React$Component) {\n _inherits(InfoDemo, _React$Component);\n\n function InfoDemo() {\n _classCallCheck(this, InfoDemo);\n\n return _possibleConstructorReturn(this, (InfoDemo.__proto__ || Object.getPrototypeOf(InfoDemo)).apply(this, arguments));\n }\n\n _createClass(InfoDemo, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Button,\n { onClick: info },\n '\\u4FE1\\u606F\\u63D0\\u793A'\n ),\n '\\xA0',\n React.createElement(\n _uxcore.Button,\n { onClick: success },\n '\\u6210\\u529F\\u63D0\\u793A'\n ),\n '\\xA0',\n React.createElement(\n _uxcore.Button,\n { onClick: error },\n '\\u5931\\u8D25\\u63D0\\u793A'\n )\n );\n }\n }]);\n\n return InfoDemo;\n}(React.Component);\n\nReactDOM.render(React.createElement(InfoDemo, null), document.getElementById('components-dialog-demo-info'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Dialog } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { Button } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> <span class=\"hljs-title\">info</span>(<span class=\"hljs-params\"></span>) </span>{\n Dialog.info({\n title: <span class=\"hljs-string\">'这是一条通知信息'</span>,\n content: <span class=\"hljs-string\">'一些附加信息一些附加信息一些附加信息'</span>,\n onOk() { },\n });\n}\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> <span class=\"hljs-title\">success</span>(<span class=\"hljs-params\"></span>) </span>{\n Dialog.success({\n title: <span class=\"hljs-string\">'这是一条通知信息'</span>,\n content: <span class=\"hljs-string\">'一些附加信息一些附加信息一些附加信息'</span>,\n });\n}\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> <span class=\"hljs-title\">error</span>(<span class=\"hljs-params\"></span>) </span>{\n Dialog.error({\n title: <span class=\"hljs-string\">'这是一条通知信息'</span>,\n content: <span class=\"hljs-string\">'一些附加信息一些附加信息一些附加信息'</span>,\n });\n}\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">InfoDemo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">onClick</span>=<span class=\"hljs-value\">{info}</span>&gt;</span>信息提示<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>&amp;nbsp;\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">onClick</span>=<span class=\"hljs-value\">{success}</span>&gt;</span>成功提示<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>&amp;nbsp;\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">onClick</span>=<span class=\"hljs-value\">{error}</span>&gt;</span>失败提示<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">InfoDemo</span> /&gt;</span>, document.getElementById('components-dialog-demo-info'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"确认对话框","id":"components-dialog-demo-custom","tags":[],"filepath":"site/components/dialog/demo/custom.md","directory":"components/dialog/demo","filename":"custom","meta":{"title":"确认对话框","description":"\n<p>确认对话框。</p>\n","order":"4","filepath":"site/components/dialog/demo/custom.md","filename":"custom","directory":"components/dialog/demo","id":"components-dialog-demo-custom","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar confirm = _uxcore.Dialog.confirm;\n\nfunction showConfirm() {\n confirm({\n title: '您是否确认要删除这项内容',\n content: '一些解释',\n onOk: function onOk() {\n alert('确定');\n },\n onCancel: function onCancel() {}\n });\n}\n\nvar ConfirmDemo = function (_React$Component) {\n _inherits(ConfirmDemo, _React$Component);\n\n function ConfirmDemo() {\n _classCallCheck(this, ConfirmDemo);\n\n return _possibleConstructorReturn(this, (ConfirmDemo.__proto__ || Object.getPrototypeOf(ConfirmDemo)).apply(this, arguments));\n }\n\n _createClass(ConfirmDemo, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n _uxcore.Button,\n { onClick: showConfirm.bind(this) },\n '\\u786E\\u8BA4\\u5BF9\\u8BDD\\u6846'\n );\n }\n }]);\n\n return ConfirmDemo;\n}(React.Component);\n\nReactDOM.render(React.createElement(ConfirmDemo, null), document.getElementById('components-dialog-demo-custom'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Dialog } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { Button } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">const</span> confirm = Dialog.confirm;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> <span class=\"hljs-title\">showConfirm</span>(<span class=\"hljs-params\"></span>) </span>{\n confirm({\n title: <span class=\"hljs-string\">'您是否确认要删除这项内容'</span>,\n content: <span class=\"hljs-string\">'一些解释'</span>,\n onOk() {\n alert(<span class=\"hljs-string\">'确定'</span>);\n },\n onCancel() { },\n });\n}\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">ConfirmDemo</span> <span class=\"hljs-keyword\">extends</span> <span class=\"hljs-title\">React</span>.<span class=\"hljs-title\">Component</span> </span>{\n render() {\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">onClick</span>=<span class=\"hljs-value\">{showConfirm.bind(this)}</span>&gt;</span>\n 确认对话框\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Button</span>&gt;</span>\n )</span>;\n }\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">ConfirmDemo</span> /&gt;</span>, document.getElementById('components-dialog-demo-custom'));\n</span></code></pre></div>"},"status":"public","toc":""},{"title":"动画","id":"components-dialog-demo-animate","tags":[],"filepath":"site/components/dialog/demo/animate.md","directory":"components/dialog/demo","filename":"animate","meta":{"title":"动画","description":"\n<p>CSS3 动画</p>\n","order":"5","filepath":"site/components/dialog/demo/animate.md","filename":"animate","directory":"components/dialog/demo","id":"components-dialog-demo-animate","template":"demos","html":"<script>(function(){'use strict';\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _uxcore = require('uxcore');\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar BasicDemo = function (_React$Component) {\n _inherits(BasicDemo, _React$Component);\n\n function BasicDemo(props) {\n _classCallCheck(this, BasicDemo);\n\n var _this = _possibleConstructorReturn(this, (BasicDemo.__proto__ || Object.getPrototypeOf(BasicDemo)).call(this, props));\n\n _this.state = {\n visible: false,\n effect: 'fade'\n };\n return _this;\n }\n\n _createClass(BasicDemo, [{\n key: 'showModal',\n value: function showModal() {\n this.setState({\n visible: true\n });\n }\n }, {\n key: 'handleOk',\n value: function handleOk() {\n console.log('点击了确定');\n this.setState({\n visible: false\n });\n }\n }, {\n key: 'handleCancel',\n value: function handleCancel() {\n this.setState({\n visible: false\n });\n }\n }, {\n key: 'handleChange',\n value: function handleChange(value) {\n this.setState({\n effect: value\n });\n }\n }, {\n key: 'render',\n value: function render() {\n var me = this;\n return React.createElement(\n 'div',\n null,\n React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Select,\n { className: 'demo-select', placeholder: '\\u8BF7\\u9009\\u62E9\\u52A8\\u753B\\u6548\\u679C', defaultValue: me.state.effect, onChange: me.handleChange.bind(me) },\n ['fade', 'slideRight', 'slideDown', 'newspaper', 'fall', 'threeFallH', 'threeFallV', 'threeSign', 'superScale', 'threeSlit', 'threeRotateBottom', 'threeRotateLeft'].map(function (item, index) {\n return React.createElement(\n _uxcore.Select.Option,\n { key: item },\n item\n );\n })\n )\n ),\n React.createElement(\n _uxcore.Button,\n { onClick: this.showModal.bind(this) },\n '\\u663E\\u793A\\u5BF9\\u8BDD\\u6846'\n ),\n React.createElement(\n _uxcore.Dialog,\n { title: '\\u7B2C\\u4E00\\u4E2A Dialog',\n visible: this.state.visible,\n onOk: this.handleOk.bind(this),\n onCancel: this.handleCancel.bind(this),\n transitionName: this.state.effect\n },\n React.createElement(\n 'p',\n null,\n '\\u5BF9\\u8BDD\\u6846\\u7684\\u5185\\u5BB9'\n ),\n React.createElement(\n 'p',\n null,\n '\\u5BF9\\u8BDD\\u6846\\u7684\\u5185\\u5BB9'\n ),\n React.createElement(\n 'p',\n null,\n '\\u5BF9\\u8BDD\\u6846\\u7684\\u5185\\u5BB9'\n )\n )\n );\n }\n }]);\n\n return BasicDemo;\n}(React.Component);\n\nReactDOM.render(React.createElement(BasicDemo, null), document.getElementById('components-dialog-demo-animate'));\n/* JS END CSS START*/})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Dialog } from 'uxcore';\nimport { Select } from 'uxcore';\nimport { Button } from 'uxcore';\n\nclass BasicDemo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n visible: false,\n effect: 'fade',\n };\n }\n showModal() {\n this.setState({\n visible: true,\n });\n }\n handleOk() {\n console.log('点击了确定');\n this.setState({\n visible: false,\n });\n }\n handleCancel() {\n this.setState({\n visible: false,\n });\n }\n handleChange(value) {\n this.setState({\n effect: value,\n });\n }\n render() {\n const me = this;\n return (\n &lt;div&gt;\n &lt;div&gt;\n &lt;Select className=\"demo-select\" placeholder=\"请选择动画效果\" defaultValue={me.state.effect} onChange={me.handleChange.bind(me)}&gt;\n {['fade', 'slideRight', 'slideDown', 'newspaper', 'fall', 'threeFallH', 'threeFallV', 'threeSign', 'superScale', 'threeSlit', 'threeRotateBottom', 'threeRotateLeft'].map((item, index) =&gt; &lt;Select.Option key={item}&gt;{item}&lt;/Select.Option&gt;)}\n &lt;/Select&gt;\n &lt;/div&gt;\n &lt;Button onClick={this.showModal.bind(this)}&gt;显示对话框&lt;/Button&gt;\n &lt;Dialog title=\"第一个 Dialog\"\n visible={this.state.visible}\n onOk={this.handleOk.bind(this)}\n onCancel={this.handleCancel.bind(this)}\n transitionName={this.state.effect}\n &gt;\n &lt;p&gt;对话框的内容&lt;/p&gt;\n &lt;p&gt;对话框的内容&lt;/p&gt;\n &lt;p&gt;对话框的内容&lt;/p&gt;\n &lt;/Dialog&gt;\n &lt;/div&gt;\n );\n }\n}\n\nReactDOM.render(\n &lt;BasicDemo /&gt;, document.getElementById('components-dialog-demo-animate'));\n/* JS END CSS START*/</code></pre></div><style type=\"text/css\">.demo-select {\n width: 200px;\n margin-bottom: 10px;\n}</style><div class=\"highlight\"><pre><code class=\"css\"><span class=\"hljs-class\">.demo-select</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">200px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">margin-bottom</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">10px</span></span></span>;\n}</span></code></pre></div>"},"status":"public","toc":""}]

基本用法。

import { Dialog } from 'uxcore';
import { Button } from 'uxcore';

class BasicDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }
  show() {
    this.setState({
      visible: true,
    });
  }
  render() {
    return (
      <div>
        <Button onClick={this.show.bind(this)}>显示对话框</Button>
        <Dialog title="第一个 Dialog"
          visible={this.state.visible}
          onOk={() => {
            this.setState({
              visible: false,
            });
          }}
          onCancel={() => {
            this.setState({
              visible: false,
            });
          }}
        >
          <p>对话框的内容</p>
          <p>对话框的内容</p>
          <p>对话框的内容</p>
        </Dialog>
      </div>
    );
  }
}

ReactDOM.render(
  <BasicDemo />, document.getElementById('components-dialog-demo-basic'));

点击确定2s后再关闭对话框。

import { Dialog } from 'uxcore';
import { Button } from 'uxcore';

class AsyncCloseDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ModalText: '对话框的内容',
      visible: false,
    };
  }
  show() {
    this.setState({
      visible: true,
    });
  }
  handleOk() {
    this.setState({
      ModalText: '对话框将在两秒后关闭',
    });
    setTimeout(() => {
      this.setState({
        visible: false,
        ModalText: '对话框的内容',
      });
    }, 2000);
  }
  handleCancel() {
    console.log('点击了取消');
    this.setState({
      visible: false,
    });
  }
  render() {
    return (
      <div>
        <Button onClick={this.show.bind(this)}>显示对话框</Button>
        <Dialog title="对话框标题"
          visible={this.state.visible}
          onOk={this.handleOk.bind(this)}
          onCancel={this.handleCancel.bind(this)}
        >
          <p>{this.state.ModalText}</p>
        </Dialog>
      </div>
    );
  }
}

ReactDOM.render(
  <AsyncCloseDemo />,
  document.getElementById('components-dialog-demo-asyncclose')
);

自定义 & 垂直居中。

import { Dialog } from 'uxcore';
import { Button } from 'uxcore';

class CustomFooter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      visible: false,
    };
  }
  showModal() {
    this.setState({
      visible: true,
    });
  }
  handleOk() {
    this.setState({ loading: true });
    setTimeout(() => {
      this.setState({ loading: false, visible: false });
    }, 3000);
  }
  handleCancel() {
    this.setState({ visible: false });
  }
  render() {
    return (<div>
      <Button onClick={this.showModal.bind(this)}>
        显示对话框
      </Button>
      <Dialog
        wrapClassName="vertical-center-dailog"
        visible={this.state.visible}
        title="对话框标题" onOk={this.handleOk} onCancel={this.handleCancel.bind(this)}
        footer={[
          <Button key="back" onClick={this.handleCancel.bind(this)} size="small" type="secondary">返 回</Button>,
          <Button key="submit" onClick={this.handleOk.bind(this)} size="small">提 交</Button>,
        ]}
      >
        <p>对话框的内容</p>
        <p>对话框的内容</p>
        <p>对话框的内容</p>
      </Dialog>
    </div>);
  }
}

ReactDOM.render(
  <CustomFooter />, document.getElementById('components-dialog-demo-confirm'));

信息提示。

import { Dialog } from 'uxcore';
import { Button } from 'uxcore';

function info() {
  Dialog.info({
    title: '这是一条通知信息',
    content: '一些附加信息一些附加信息一些附加信息',
    onOk() { },
  });
}

function success() {
  Dialog.success({
    title: '这是一条通知信息',
    content: '一些附加信息一些附加信息一些附加信息',
  });
}

function error() {
  Dialog.error({
    title: '这是一条通知信息',
    content: '一些附加信息一些附加信息一些附加信息',
  });
}

class InfoDemo extends React.Component {
  render() {
    return (
      <div>
        <Button onClick={info}>信息提示</Button>&nbsp;
        <Button onClick={success}>成功提示</Button>&nbsp;
        <Button onClick={error}>失败提示</Button>
      </div>
    );
  }
}

ReactDOM.render(
  <InfoDemo />, document.getElementById('components-dialog-demo-info'));

确认对话框。

import { Dialog } from 'uxcore';
import { Button } from 'uxcore';
const confirm = Dialog.confirm;

function showConfirm() {
  confirm({
    title: '您是否确认要删除这项内容',
    content: '一些解释',
    onOk() {
      alert('确定');
    },
    onCancel() { },
  });
}

class ConfirmDemo extends React.Component {
  render() {
    return (
      <Button onClick={showConfirm.bind(this)}>
        确认对话框
      </Button>
    );
  }
}

ReactDOM.render(
  <ConfirmDemo />, document.getElementById('components-dialog-demo-custom'));

CSS3 动画

import { Dialog } from 'uxcore';
import { Select } from 'uxcore';
import { Button } from 'uxcore';

class BasicDemo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      effect: 'fade',
    };
  }
  showModal() {
    this.setState({
      visible: true,
    });
  }
  handleOk() {
    console.log('点击了确定');
    this.setState({
      visible: false,
    });
  }
  handleCancel() {
    this.setState({
      visible: false,
    });
  }
  handleChange(value) {
    this.setState({
      effect: value,
    });
  }
  render() {
    const me = this;
    return (
      <div>
        <div>
          <Select className="demo-select" placeholder="请选择动画效果" defaultValue={me.state.effect} onChange={me.handleChange.bind(me)}>
            {['fade', 'slideRight', 'slideDown', 'newspaper', 'fall', 'threeFallH', 'threeFallV', 'threeSign', 'superScale', 'threeSlit', 'threeRotateBottom', 'threeRotateLeft'].map((item, index) => <Select.Option key={item}>{item}</Select.Option>)}
          </Select>
        </div>
        <Button onClick={this.showModal.bind(this)}>显示对话框</Button>
        <Dialog title="第一个 Dialog"
          visible={this.state.visible}
          onOk={this.handleOk.bind(this)}
          onCancel={this.handleCancel.bind(this)}
          transitionName={this.state.effect}
        >
          <p>对话框的内容</p>
          <p>对话框的内容</p>
          <p>对话框的内容</p>
        </Dialog>
      </div>
    );
  }
}

ReactDOM.render(
  <BasicDemo />, document.getElementById('components-dialog-demo-animate'));
/* JS END CSS START*/
.demo-select {
    width: 200px;
    margin-bottom: 10px;
}

模态对话框。

何时使用

需要用户处理事务,又不希望跳转页面以致打断工作流程时,可以使用 Dialog 在当前页面正中打开一个浮层,承载相应的操作。

Usage


const Dialog = require('uxcore-dialog');

ReactDOM.render(
  <Dialog title="第一个 Dialog"
    visible={this.state.visible}
    onOk={this.handleOk.bind(this)}
    onCancel={this.handleCancel.bind(this)}
  >
    <p>对话框的内容</p>
  </Dialog>,
  document.getElementById('content')
);

API

参数 说明 类型 默认值
title Title of the dialog String React.Element
visible current dialog's visible status Boolean false
mousePosition set pageX and pageY of current mouse(it will cause transform origin to be set). {x:number,y:number}
onOk the callback when ok clicked function
onCancel the callback when dialog closed function
width dialog width String or Number 520
footer footer of the dialog React.Element
closable whether show close button and click mask to close Boolean true
maskClosable whether click mask to close, this prop will be ignored if set closable prop to false Boolean true
locale 国际化(包括 zh-cn, en-us, 和 pl-pl) String zh-cn
className additional className for dialog string
wrapClassName additional className for dialog wrap string vertical-center-dailog for vertical align the dialog
style Root style for dialog element.Such as width, height Object {}
zIndex Number
bodyStyle body style for dialog body element.Such as height Number {}
htmlClassName the className added to html element when dialog is visible String ''

Dialog.xxx()

包括:

  • Dialog.info
  • Dialog.success
  • Dialog.error
  • Dialog.confirm

以上均为一个函数,参数为 object,具体属性如下:

参数 说明 类型 默认值
title 标题 React.Element or String
onOk 点击确定回调,参数为关闭函数,返回 promise 时 resolve 后自动关闭 function
onCancel 取消回调,参数为关闭函数,返回 promise 时 resolve 后自动关闭 function
width 宽度 String or Number 416
buttonSize 按钮的尺寸,'small', 'medium', 'large' 三种可选 String 'medium'
iconClassName 图标样式名 String kuma-icon-caution
icon 自定义图标 Icon Element uxcore-icon 的实例,http://uxco.re/components/icon/
timer 弹框自动关闭, 2000表示2s以后关闭 Number, false or null false
htmlClassName the className added to html element when dialog is visible String ''
okText 确认按钮文字 , 0.7.1 版本后支持 string -
cancelText 取消按钮文字 , 0.7.1 版本后支持 string -