uxcore.js - React UI Component Set

组件演示

[{"title":"缺省页","id":"scene-defaultpage-demo-basic","tags":[],"filepath":"site/scene/defaultPage/demo/basic.md","directory":"scene/defaultPage/demo","filename":"basic","meta":{"title":"缺省页","description":"\n点击查看代码\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 _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 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(_uxcore.EmptyData, { 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\">import { EmptyData } from 'uxcore';\n\nclass Demo extends React.Component {\n render() {\n return (\n <div className=\"fillErrorDemo\">\n <div className=\"errorLeft\">\n <EmptyData style={{ width: '220px', height: '220px' }} type=\"large\" />\n </div>\n <div className=\"errorRight\">\n <div className=\"tips\">\n <p className=\"tipsTitle\">哎呀！导出失败了</p>\n <p className=\"tipsContent\">请亲尝试重新导出一次哦～</p>\n <p className=\"errorTips\">您访问的页面不存在，请确认链接无误后再试。紧急情况下可前往<a>https://go.alibaba-inc.com</a>寻求帮助</p>\n </div>\n </div>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />,\n document.getElementById('scene-defaultpage-demo-basic')\n);\n\n/* JS END CSS START*/</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\">#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</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点击查看代码\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 _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 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(_uxcore.EmptyData, { 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 _uxcore.Button,\n { type: 'primary', onClick: this.onMainClick },\n '\\u4E00\\u7EA7\\u6309\\u94AE'\n ),\n React.createElement(\n _uxcore.Button,\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\">import { Button } from 'uxcore';\nimport { EmptyData } from 'uxcore';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.onMainClick = this.onMainClick.bind(this);\n }\n onMainClick(e) {\n alert(e.target.innerText);\n }\n onSecondaryClick(e) {\n alert(e.target.innerText);\n }\n render() {\n return (\n <div className=\"fillErrorDemo\">\n <div className=\"errorLeft\">\n <EmptyData style={{ width: '220px', height: '220px' }} type=\"large\" />\n </div>\n <div className=\"errorRight\">\n <div className=\"tips\">\n <p className=\"tipsTitle\">页面出错了</p>\n <p className=\"errorTips\">您访问的页面不存在，请确认链接无误后再试。紧急情况下可前往<a href=\"https://go.alibaba-inc.com\">https://go.alibaba-inc.com</a>寻求帮助</p>\n <div className=\"errorButtons\">\n <Button type=\"primary\" onClick={this.onMainClick}>一级按钮</Button>\n <Button type=\"secondary\" onClick={this.onSecondaryClick}>次要按钮</Button>\n </div>\n </div>\n </div>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />,\n document.getElementById('scene-defaultpage-demo-basicbutton')\n);\n\n/* JS END CSS START*/</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\">#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}</code></pre></div>"},"status":"public","toc":""}]

缺省页

点击查看代码

import { EmptyData } from 'uxcore';

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';
import { EmptyData } from 'uxcore';

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;
}