组件演示

[{"title":"缺省页","id":"scene-defaultpage-demo-basic","tags":[],"filepath":"site/scene/defaultPage/demo/basic.md","directory":"scene/defaultPage/demo","filename":"basic","meta":{"title":"缺省页","description":"\n<p>点击查看代码</p>\n","order":"0","filepath":"site/scene/defaultPage/demo/basic.md","filename":"basic","directory":"scene/defaultPage/demo","id":"scene-defaultpage-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 _uxcoreEmptyData = require(\"uxcore-empty-data\");\n\nvar _uxcoreEmptyData2 = _interopRequireDefault(_uxcoreEmptyData);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\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 Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo() {\n _classCallCheck(this, Demo);\n\n return _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).apply(this, arguments));\n }\n\n _createClass(Demo, [{\n key: \"render\",\n value: function render() {\n return React.createElement(\n \"div\",\n { className: \"fillErrorDemo\" },\n React.createElement(\n \"div\",\n { className: \"errorLeft\" },\n React.createElement(_uxcoreEmptyData2.default, { style: { width: '220px', height: '220px' }, type: \"large\" })\n ),\n React.createElement(\n \"div\",\n { className: \"errorRight\" },\n React.createElement(\n \"div\",\n { className: \"tips\" },\n React.createElement(\n \"p\",\n { className: \"tipsTitle\" },\n \"\\u54CE\\u5440\\uFF01\\u5BFC\\u51FA\\u5931\\u8D25\\u4E86\"\n ),\n React.createElement(\n \"p\",\n { className: \"tipsContent\" },\n \"\\u8BF7\\u4EB2\\u5C1D\\u8BD5\\u91CD\\u65B0\\u5BFC\\u51FA\\u4E00\\u6B21\\u54E6\\uFF5E\"\n ),\n React.createElement(\n \"p\",\n { className: \"errorTips\" },\n \"\\u60A8\\u8BBF\\u95EE\\u7684\\u9875\\u9762\\u4E0D\\u5B58\\u5728\\uFF0C\\u8BF7\\u786E\\u8BA4\\u94FE\\u63A5\\u65E0\\u8BEF\\u540E\\u518D\\u8BD5\\u3002\\u7D27\\u6025\\u60C5\\u51B5\\u4E0B\\u53EF\\u524D\\u5F80\",\n React.createElement(\n \"a\",\n null,\n \"https://go.alibaba-inc.com\"\n ),\n \"\\u5BFB\\u6C42\\u5E2E\\u52A9\"\n )\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('scene-defaultpage-demo-basic'));\n\n/* JS END CSS START*/})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> EmptyData <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore-empty-data'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</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> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"fillErrorDemo\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"errorLeft\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">EmptyData</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">width:</span> '<span class=\"hljs-attribute\">220px</span>', <span class=\"hljs-attribute\">height:</span> '<span class=\"hljs-attribute\">220px</span>' }} <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"large\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"errorRight\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"tips\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">p</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"tipsTitle\"</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> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"tipsContent\"</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> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"errorTips\"</span>&gt;</span>您访问的页面不存在,请确认链接无误后再试。紧急情况下可前往<span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">a</span>&gt;</span>https://go.alibaba-inc.com<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">a</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\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</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\">Demo</span> /&gt;</span>,\n document.getElementById('scene-defaultpage-demo-basic')\n);\n\n/* JS END CSS START*/</span></code></pre></div><style type=\"text/css\">#scene-defaultpage-demo-basicbutton {\n position: relative;\n height: 500px;\n}\n.fillErrorDemo {\n position:absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n width: 684px;\n height: 220px;\n font-family: 'PingFangSC-Medium';\n}\n.fillErrorDemo .errorLeft {\n float: left;\n width: 220px;\n height: 220px;\n}\n.fillErrorDemo .errorLeft .kuma-empty-data-icon{\n height: 220px;\n width: 220px;\n}\n.fillErrorDemo .errorLeft .kuma-empty-data-content{\n display: none;\n}\n.fillErrorDemo .errorRight {\n float: right;\n display: table;\n width: 400px;\n height: 100%;\n\n}\n.fillErrorDemo .errorRight .tips{\n display: table-cell;\n vertical-align: middle;\n margin-right: 64px;\n width: 400px;\n}\n.fillErrorDemo .errorRight .tipsTitle {\n margin-bottom: 28px;\n line-height: 32px;\n font-size: 32px;\n color:rgba(31,56,88,0.8);\n letter-spacing: 0;\n}\n.fillErrorDemo .errorRight .tipsContent,\n.fillErrorDemo .errorRight .errorTips{\n line-height: 22px;\n font-size: 14px;\n letter-spacing: 0;\n}\n.fillErrorDemo .errorRight .errorTips {\n color: rgba(-2147483648,26,-2147483648,0.60);\n}\n.fillErrorDemo .errorRight .tipsContent{\n margin-bottom: 8px;\n color:rgba(31,56,88,0.6)\n}\n</style><div class=\"highlight\"><pre><code class=\"css\"><span class=\"hljs-id\">#scene-defaultpage-demo-basicbutton</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">position</span>:<span class=\"hljs-value\"> relative</span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">height</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">500px</span></span></span>;\n}</span>\n<span class=\"hljs-class\">.fillErrorDemo</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">position</span>:<span class=\"hljs-value\">absolute</span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">left</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">50%</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">top</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">50%</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">transform</span>:<span class=\"hljs-value\"> <span class=\"hljs-function\">translate</span>(-<span class=\"hljs-number\">50%</span>,-<span class=\"hljs-number\">50%</span>)</span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">684px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">height</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">220px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">font-family</span>:<span class=\"hljs-value\"> <span class=\"hljs-string\">'PingFangSC-Medium'</span></span></span>;\n}</span>\n<span class=\"hljs-class\">.fillErrorDemo</span> <span class=\"hljs-class\">.errorLeft</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">float</span>:<span class=\"hljs-value\"> left</span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">220px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">height</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">220px</span></span></span>;\n}</span>\n<span class=\"hljs-class\">.fillErrorDemo</span> <span class=\"hljs-class\">.errorLeft</span> <span class=\"hljs-class\">.kuma-empty-data-icon</span><span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">height</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">220px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">220px</span></span></span>;\n}</span>\n<span class=\"hljs-class\">.fillErrorDemo</span> <span class=\"hljs-class\">.errorLeft</span> <span class=\"hljs-class\">.kuma-empty-data-content</span><span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">display</span>:<span class=\"hljs-value\"> none</span></span>;\n}</span>\n<span class=\"hljs-class\">.fillErrorDemo</span> <span class=\"hljs-class\">.errorRight</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">float</span>:<span class=\"hljs-value\"> right</span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">display</span>:<span class=\"hljs-value\"> table</span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">400px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">height</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">100%</span></span></span>;\n\n}</span>\n<span class=\"hljs-class\">.fillErrorDemo</span> <span class=\"hljs-class\">.errorRight</span> <span class=\"hljs-class\">.tips</span><span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">display</span>:<span class=\"hljs-value\"> table-cell</span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">vertical-align</span>:<span class=\"hljs-value\"> middle</span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">margin-right</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">64px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">400px</span></span></span>;\n}</span>\n<span class=\"hljs-class\">.fillErrorDemo</span> <span class=\"hljs-class\">.errorRight</span> <span class=\"hljs-class\">.tipsTitle</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">margin-bottom</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">28px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">line-height</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">32px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">font-size</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">32px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">color</span>:<span class=\"hljs-value\"><span class=\"hljs-function\">rgba</span>(<span class=\"hljs-number\">31</span>,<span class=\"hljs-number\">56</span>,<span class=\"hljs-number\">88</span>,<span class=\"hljs-number\">0.8</span>)</span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">letter-spacing</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">0</span></span></span>;\n}</span>\n<span class=\"hljs-class\">.fillErrorDemo</span> <span class=\"hljs-class\">.errorRight</span> <span class=\"hljs-class\">.tipsContent</span>,\n<span class=\"hljs-class\">.fillErrorDemo</span> <span class=\"hljs-class\">.errorRight</span> <span class=\"hljs-class\">.errorTips</span><span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">line-height</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">22px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">font-size</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">14px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">letter-spacing</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">0</span></span></span>;\n}</span>\n<span class=\"hljs-class\">.fillErrorDemo</span> <span class=\"hljs-class\">.errorRight</span> <span class=\"hljs-class\">.errorTips</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">color</span>:<span class=\"hljs-value\"> <span class=\"hljs-function\">rgba</span>(-<span class=\"hljs-number\">2147483648</span>,<span class=\"hljs-number\">26</span>,-<span class=\"hljs-number\">2147483648</span>,<span class=\"hljs-number\">0.60</span>)</span></span>;\n}</span>\n<span class=\"hljs-class\">.fillErrorDemo</span> <span class=\"hljs-class\">.errorRight</span> <span class=\"hljs-class\">.tipsContent</span><span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">margin-bottom</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">8px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">color</span>:<span class=\"hljs-value\"><span class=\"hljs-function\">rgba</span>(<span class=\"hljs-number\">31</span>,<span class=\"hljs-number\">56</span>,<span class=\"hljs-number\">88</span>,<span class=\"hljs-number\">0.6</span>)\n</span></span></span>}\n</code></pre></div>"},"status":"public","toc":""},{"title":"缺省页 (带按钮)","id":"scene-defaultpage-demo-basicbutton","tags":[],"filepath":"site/scene/defaultPage/demo/basicButton.md","directory":"scene/defaultPage/demo","filename":"basicButton","meta":{"title":"缺省页 (带按钮)","description":"\n<p>点击查看代码</p>\n","order":"1","filepath":"site/scene/defaultPage/demo/basicButton.md","filename":"basicButton","directory":"scene/defaultPage/demo","id":"scene-defaultpage-demo-basicbutton","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 _uxcoreButton = require('uxcore-button');\n\nvar _uxcoreButton2 = _interopRequireDefault(_uxcoreButton);\n\nvar _uxcoreEmptyData = require('uxcore-empty-data');\n\nvar _uxcoreEmptyData2 = _interopRequireDefault(_uxcoreEmptyData);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\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 Demo = function (_React$Component) {\n _inherits(Demo, _React$Component);\n\n function Demo(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.onMainClick = _this.onMainClick.bind(_this);\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'onMainClick',\n value: function onMainClick(e) {\n alert(e.target.innerText);\n }\n }, {\n key: 'onSecondaryClick',\n value: function onSecondaryClick(e) {\n alert(e.target.innerText);\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n { className: 'fillErrorDemo' },\n React.createElement(\n 'div',\n { className: 'errorLeft' },\n React.createElement(_uxcoreEmptyData2.default, { style: { width: '220px', height: '220px' }, type: 'large' })\n ),\n React.createElement(\n 'div',\n { className: 'errorRight' },\n React.createElement(\n 'div',\n { className: 'tips' },\n React.createElement(\n 'p',\n { className: 'tipsTitle' },\n '\\u9875\\u9762\\u51FA\\u9519\\u4E86'\n ),\n React.createElement(\n 'p',\n { className: 'errorTips' },\n '\\u60A8\\u8BBF\\u95EE\\u7684\\u9875\\u9762\\u4E0D\\u5B58\\u5728\\uFF0C\\u8BF7\\u786E\\u8BA4\\u94FE\\u63A5\\u65E0\\u8BEF\\u540E\\u518D\\u8BD5\\u3002\\u7D27\\u6025\\u60C5\\u51B5\\u4E0B\\u53EF\\u524D\\u5F80',\n React.createElement(\n 'a',\n { href: 'https://go.alibaba-inc.com' },\n 'https://go.alibaba-inc.com'\n ),\n '\\u5BFB\\u6C42\\u5E2E\\u52A9'\n ),\n React.createElement(\n 'div',\n { className: 'errorButtons' },\n React.createElement(\n _uxcoreButton2.default,\n { type: 'primary', onClick: this.onMainClick },\n '\\u4E00\\u7EA7\\u6309\\u94AE'\n ),\n React.createElement(\n _uxcoreButton2.default,\n { type: 'secondary', onClick: this.onSecondaryClick },\n '\\u6B21\\u8981\\u6309\\u94AE'\n )\n )\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('scene-defaultpage-demo-basicbutton'));\n\n/* JS END CSS START*/})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> Button <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore-button'</span>;\n<span class=\"hljs-keyword\">import</span> EmptyData <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore-empty-data'</span>;\n\n<span class=\"hljs-class\"><span class=\"hljs-keyword\">class</span> <span class=\"hljs-title\">Demo</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>.onMainClick = <span class=\"hljs-keyword\">this</span>.onMainClick.bind(<span class=\"hljs-keyword\">this</span>);\n }\n onMainClick(e) {\n alert(e.target.innerText);\n }\n onSecondaryClick(e) {\n alert(e.target.innerText);\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> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"fillErrorDemo\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"errorLeft\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">EmptyData</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">width:</span> '<span class=\"hljs-attribute\">220px</span>', <span class=\"hljs-attribute\">height:</span> '<span class=\"hljs-attribute\">220px</span>' }} <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"large\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"errorRight\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"tips\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">p</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"tipsTitle\"</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> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"errorTips\"</span>&gt;</span>您访问的页面不存在,请确认链接无误后再试。紧急情况下可前往<span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">a</span> <span class=\"hljs-attribute\">href</span>=<span class=\"hljs-value\">\"https://go.alibaba-inc.com\"</span>&gt;</span>https://go.alibaba-inc.com<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">a</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\">div</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"errorButtons\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Button</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"primary\"</span> <span class=\"hljs-attribute\">onClick</span>=<span class=\"hljs-value\">{this.onMainClick}</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\">type</span>=<span class=\"hljs-value\">\"secondary\"</span> <span class=\"hljs-attribute\">onClick</span>=<span class=\"hljs-value\">{this.onSecondaryClick}</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 class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</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\">Demo</span> /&gt;</span>,\n document.getElementById('scene-defaultpage-demo-basicbutton')\n);\n\n/* JS END CSS START*/</span></code></pre></div><style type=\"text/css\">#scene-defaultpage-demo-basic {\n position:relative;\n height:500px;\n}\n.fillErrorDemo {\n position:absolute;\n left:50%;\n top:50%;\n transform:translate(-50%,-50%);\n width:684px;\n height:220px;\n}\n.fillErrorDemo .errorLeft {\n float:left;\n width:220px;\n height:220px;\n}\n.fillErrorDemo .errorLeft .kuma-empty-data-icon{\n height:220px;\n width:220px;\n}\n.fillErrorDemo .errorLeft .kuma-empty-data-content{\n display:none;\n}\n.fillErrorDemo .errorRight {\n float:right;\n display:table;\n width:400px;\n height:100%;\n\n}\n.fillErrorDemo .errorRight .tips{\n display:table-cell;\n vertical-align:middle;\n margin-right:64px;\n width:400px;\n}\n.fillErrorDemo .errorRight .tipsTitle {\n margin-bottom:28px;\n line-height:32px;\n font-size:32px;\n color:rgba(31,56,88,1);\n letter-spacing:0;\n}\n.fillErrorDemo .errorRight .errorRips{\n line-height:22px;\n font-size:14px;\n letter-spacing:0;\n color: rgba(-2147483648,26,-2147483648,0.60);\n}\n.fillErrorDemo .errorRight .errorButtons{\n margin-top:28px;\n}\n.fillErrorDemo .errorButtons button{\n margin-right:12px;\n}\n.kuma-button span {\n display:inline-block;\n line-height:12px;\n}</style><div class=\"highlight\"><pre><code class=\"css\"><span class=\"hljs-id\">#scene-defaultpage-demo-basic</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">position</span>:<span class=\"hljs-value\">relative</span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">height</span>:<span class=\"hljs-value\"><span class=\"hljs-number\">500px</span></span></span>;\n}</span>\n<span class=\"hljs-class\">.fillErrorDemo</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">position</span>:<span class=\"hljs-value\">absolute</span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">left</span>:<span class=\"hljs-value\"><span class=\"hljs-number\">50%</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">top</span>:<span class=\"hljs-value\"><span class=\"hljs-number\">50%</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">transform</span>:<span class=\"hljs-value\"><span class=\"hljs-function\">translate</span>(-<span class=\"hljs-number\">50%</span>,-<span class=\"hljs-number\">50%</span>)</span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width</span>:<span class=\"hljs-value\"><span class=\"hljs-number\">684px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">height</span>:<span class=\"hljs-value\"><span class=\"hljs-number\">220px</span></span></span>;\n}</span>\n<span class=\"hljs-class\">.fillErrorDemo</span> <span class=\"hljs-class\">.errorLeft</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">float</span>:<span class=\"hljs-value\">left</span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width</span>:<span class=\"hljs-value\"><span class=\"hljs-number\">220px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">height</span>:<span class=\"hljs-value\"><span class=\"hljs-number\">220px</span></span></span>;\n}</span>\n<span class=\"hljs-class\">.fillErrorDemo</span> <span class=\"hljs-class\">.errorLeft</span> <span class=\"hljs-class\">.kuma-empty-data-icon</span><span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">height</span>:<span class=\"hljs-value\"><span class=\"hljs-number\">220px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width</span>:<span class=\"hljs-value\"><span class=\"hljs-number\">220px</span></span></span>;\n}</span>\n<span class=\"hljs-class\">.fillErrorDemo</span> <span class=\"hljs-class\">.errorLeft</span> <span class=\"hljs-class\">.kuma-empty-data-content</span><span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">display</span>:<span class=\"hljs-value\">none</span></span>;\n}</span>\n<span class=\"hljs-class\">.fillErrorDemo</span> <span class=\"hljs-class\">.errorRight</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">float</span>:<span class=\"hljs-value\">right</span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">display</span>:<span class=\"hljs-value\">table</span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width</span>:<span class=\"hljs-value\"><span class=\"hljs-number\">400px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">height</span>:<span class=\"hljs-value\"><span class=\"hljs-number\">100%</span></span></span>;\n\n}</span>\n<span class=\"hljs-class\">.fillErrorDemo</span> <span class=\"hljs-class\">.errorRight</span> <span class=\"hljs-class\">.tips</span><span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">display</span>:<span class=\"hljs-value\">table-cell</span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">vertical-align</span>:<span class=\"hljs-value\">middle</span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">margin-right</span>:<span class=\"hljs-value\"><span class=\"hljs-number\">64px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">width</span>:<span class=\"hljs-value\"><span class=\"hljs-number\">400px</span></span></span>;\n}</span>\n<span class=\"hljs-class\">.fillErrorDemo</span> <span class=\"hljs-class\">.errorRight</span> <span class=\"hljs-class\">.tipsTitle</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">margin-bottom</span>:<span class=\"hljs-value\"><span class=\"hljs-number\">28px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">line-height</span>:<span class=\"hljs-value\"><span class=\"hljs-number\">32px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">font-size</span>:<span class=\"hljs-value\"><span class=\"hljs-number\">32px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">color</span>:<span class=\"hljs-value\"><span class=\"hljs-function\">rgba</span>(<span class=\"hljs-number\">31</span>,<span class=\"hljs-number\">56</span>,<span class=\"hljs-number\">88</span>,<span class=\"hljs-number\">1</span>)</span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">letter-spacing</span>:<span class=\"hljs-value\"><span class=\"hljs-number\">0</span></span></span>;\n}</span>\n<span class=\"hljs-class\">.fillErrorDemo</span> <span class=\"hljs-class\">.errorRight</span> <span class=\"hljs-class\">.errorRips</span><span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">line-height</span>:<span class=\"hljs-value\"><span class=\"hljs-number\">22px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">font-size</span>:<span class=\"hljs-value\"><span class=\"hljs-number\">14px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">letter-spacing</span>:<span class=\"hljs-value\"><span class=\"hljs-number\">0</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">color</span>:<span class=\"hljs-value\"> <span class=\"hljs-function\">rgba</span>(-<span class=\"hljs-number\">2147483648</span>,<span class=\"hljs-number\">26</span>,-<span class=\"hljs-number\">2147483648</span>,<span class=\"hljs-number\">0.60</span>)</span></span>;\n}</span>\n<span class=\"hljs-class\">.fillErrorDemo</span> <span class=\"hljs-class\">.errorRight</span> <span class=\"hljs-class\">.errorButtons</span><span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">margin-top</span>:<span class=\"hljs-value\"><span class=\"hljs-number\">28px</span></span></span>;\n}</span>\n<span class=\"hljs-class\">.fillErrorDemo</span> <span class=\"hljs-class\">.errorButtons</span> <span class=\"hljs-tag\">button</span><span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">margin-right</span>:<span class=\"hljs-value\"><span class=\"hljs-number\">12px</span></span></span>;\n}</span>\n<span class=\"hljs-class\">.kuma-button</span> <span class=\"hljs-tag\">span</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">display</span>:<span class=\"hljs-value\">inline-block</span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">line-height</span>:<span class=\"hljs-value\"><span class=\"hljs-number\">12px</span></span></span>;\n}</span></code></pre></div>"},"status":"public","toc":""}]

点击查看代码

import EmptyData from 'uxcore-empty-data';

class Demo extends React.Component {
  render() {
    return (
      <div className="fillErrorDemo">
        <div className="errorLeft">
          <EmptyData style={{ width: '220px', height: '220px' }} type="large" />
        </div>
        <div className="errorRight">
          <div className="tips">
            <p className="tipsTitle">哎呀!导出失败了</p>
            <p className="tipsContent">请亲尝试重新导出一次哦~</p>
            <p className="errorTips">您访问的页面不存在,请确认链接无误后再试。紧急情况下可前往<a>https://go.alibaba-inc.com</a>寻求帮助</p>
          </div>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />,
  document.getElementById('scene-defaultpage-demo-basic')
);

/* JS END CSS START*/
#scene-defaultpage-demo-basicbutton {
  position: relative;
  height: 500px;
}
.fillErrorDemo {
    position:absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 684px;
    height: 220px;
    font-family: 'PingFangSC-Medium';
}
.fillErrorDemo .errorLeft {
  float: left;
  width: 220px;
  height: 220px;
}
.fillErrorDemo .errorLeft .kuma-empty-data-icon{
  height: 220px;
  width: 220px;
}
.fillErrorDemo .errorLeft .kuma-empty-data-content{
  display: none;
}
.fillErrorDemo .errorRight {
  float: right;
  display: table;
  width: 400px;
  height: 100%;

}
.fillErrorDemo .errorRight .tips{
  display: table-cell;
  vertical-align: middle;
  margin-right: 64px;
  width: 400px;
}
.fillErrorDemo .errorRight .tipsTitle {
  margin-bottom: 28px;
  line-height: 32px;
  font-size: 32px;
  color:rgba(31,56,88,0.8);
  letter-spacing: 0;
}
.fillErrorDemo .errorRight .tipsContent,
.fillErrorDemo .errorRight .errorTips{
  line-height: 22px;
  font-size: 14px;
  letter-spacing: 0;
}
.fillErrorDemo .errorRight .errorTips {
  color: rgba(-2147483648,26,-2147483648,0.60);
}
.fillErrorDemo .errorRight .tipsContent{
    margin-bottom: 8px;
    color:rgba(31,56,88,0.6)
}

点击查看代码

import Button from 'uxcore-button';
import EmptyData from 'uxcore-empty-data';

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.onMainClick = this.onMainClick.bind(this);
  }
  onMainClick(e) {
    alert(e.target.innerText);
  }
  onSecondaryClick(e) {
    alert(e.target.innerText);
  }
  render() {
    return (
      <div className="fillErrorDemo">
        <div className="errorLeft">
          <EmptyData style={{ width: '220px', height: '220px' }} type="large" />
        </div>
        <div className="errorRight">
          <div className="tips">
            <p className="tipsTitle">页面出错了</p>
            <p className="errorTips">您访问的页面不存在,请确认链接无误后再试。紧急情况下可前往<a href="https://go.alibaba-inc.com">https://go.alibaba-inc.com</a>寻求帮助</p>
            <div className="errorButtons">
              <Button type="primary" onClick={this.onMainClick}>一级按钮</Button>
              <Button type="secondary" onClick={this.onSecondaryClick}>次要按钮</Button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />,
  document.getElementById('scene-defaultpage-demo-basicbutton')
);

/* JS END CSS START*/
#scene-defaultpage-demo-basic {
  position:relative;
  height:500px;
}
.fillErrorDemo {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:684px;
    height:220px;
}
.fillErrorDemo .errorLeft {
  float:left;
  width:220px;
  height:220px;
}
.fillErrorDemo .errorLeft .kuma-empty-data-icon{
  height:220px;
  width:220px;
}
.fillErrorDemo .errorLeft .kuma-empty-data-content{
  display:none;
}
.fillErrorDemo .errorRight {
  float:right;
  display:table;
  width:400px;
  height:100%;

}
.fillErrorDemo .errorRight .tips{
  display:table-cell;
  vertical-align:middle;
  margin-right:64px;
  width:400px;
}
.fillErrorDemo .errorRight .tipsTitle {
  margin-bottom:28px;
  line-height:32px;
  font-size:32px;
  color:rgba(31,56,88,1);
  letter-spacing:0;
}
.fillErrorDemo .errorRight .errorRips{
  line-height:22px;
  font-size:14px;
  letter-spacing:0;
  color: rgba(-2147483648,26,-2147483648,0.60);
}
.fillErrorDemo .errorRight .errorButtons{
  margin-top:28px;
}
.fillErrorDemo .errorButtons button{
  margin-right:12px;
}
.kuma-button span {
  display:inline-block;
  line-height:12px;
}