uxcore.js - React UI Component Set

组件演示

[{"title":"基本使用","id":"components-empty-data-demo-basic","tags":[],"filepath":"site/components/empty-data/demo/basic.md","directory":"components/empty-data/demo","filename":"basic","meta":{"title":"基本使用","description":"\n基本用法。\n","order":"0","filepath":"site/components/empty-data/demo/basic.md","filename":"basic","directory":"components/empty-data/demo","id":"components-empty-data-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(props) {\n _classCallCheck(this, Demo);\n\n var _this = _possibleConstructorReturn(this, (Demo.__proto__ || Object.getPrototypeOf(Demo)).call(this, props));\n\n _this.state = {};\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n null,\n React.createElement(_uxcore.EmptyData, { style: { width: '200px' } })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-empty-data-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport { EmptyData } from 'uxcore';\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n\n render() {\n return (\n <div>\n <EmptyData style={{ width: '200px' }} />\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-empty-data-demo-basic'));</code></pre></div>"},"status":"public","toc":""},{"title":"定制文案","id":"components-empty-data-demo-custom","tags":[],"filepath":"site/components/empty-data/demo/custom.md","directory":"components/empty-data/demo","filename":"custom","meta":{"title":"定制文案","description":"\n定制文案。\n","order":"1","filepath":"site/components/empty-data/demo/custom.md","filename":"custom","directory":"components/empty-data/demo","id":"components-empty-data-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 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.state = {};\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.EmptyData,\n { style: { width: '200px' } },\n React.createElement(\n 'div',\n { style: { lineHeight: 2 } },\n React.createElement(\n 'div',\n null,\n '\\u4F60\\u8FD8\\u6CA1\\u6709\\u521B\\u5EFA\\u76EE\\u6807\\u54E6'\n ),\n React.createElement(\n 'div',\n null,\n '\\u9A6C\\u4E0A\\u53BB',\n React.createElement(\n 'a',\n null,\n '\\u6DFB\\u52A0\\u76EE\\u6807'\n )\n )\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-empty-data-demo-custom'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport { EmptyData } from 'uxcore';\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n\n render() {\n return (\n <div>\n <EmptyData style={{ width: '200px' }}>\n <div style={{ lineHeight: 2 }}>\n <div>你还没有创建目标哦</div>\n <div>马上去<a>添加目标</a></div>\n </div>\n </EmptyData>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-empty-data-demo-custom'));</code></pre></div>"},"status":"public","toc":""},{"title":"页面使用","id":"components-empty-data-demo-page","tags":[],"filepath":"site/components/empty-data/demo/page.md","directory":"components/empty-data/demo","filename":"page","meta":{"title":"页面使用","description":"\n在页面级的使用。\n","order":"2","filepath":"site/components/empty-data/demo/page.md","filename":"page","directory":"components/empty-data/demo","id":"components-empty-data-demo-page","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.state = {};\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.EmptyData,\n { style: { width: '200px' }, type: 'large' },\n React.createElement(\n 'div',\n null,\n '\\u4F60\\u8FD8\\u6CA1\\u6709\\u521B\\u5EFA\\u76EE\\u6807\\u54E6'\n ),\n React.createElement(\n _uxcore.Button,\n { type: 'outline', style: { marginTop: '10px' } },\n '\\u6DFB\\u52A0\\u76EE\\u6807'\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-empty-data-demo-page'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport { EmptyData } from 'uxcore';\nimport { Button } from 'uxcore';\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n\n render() {\n return (\n <div>\n <EmptyData style={{ width: '200px' }} type=\"large\">\n <div>你还没有创建目标哦</div>\n <Button type=\"outline\" style={{ marginTop: '10px' }}>添加目标</Button>\n </EmptyData>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-empty-data-demo-page'));</code></pre></div>"},"status":"public","toc":""},{"title":"其他类型","id":"components-empty-data-demo-other","tags":[],"filepath":"site/components/empty-data/demo/other.md","directory":"components/empty-data/demo","filename":"other","meta":{"title":"其他类型","description":"\n除通用缺省页外，我们还提供了其他 5 种类型的常用空图片\n","order":"3","filepath":"site/components/empty-data/demo/other.md","filename":"other","directory":"components/empty-data/demo","id":"components-empty-data-demo-other","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.state = {};\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n null,\n [{\n img: 'access_restriction',\n name: '权限限制'\n }, {\n img: 'active_empty',\n name: '查询类空页面'\n }, {\n img: 'request_error',\n name: '网页请求错误'\n }, {\n img: 'search_empty',\n name: '网页请求错误'\n }, {\n img: 'unknown_error',\n name: '未知错误'\n }].map(function (item) {\n return React.createElement(\n _uxcore.EmptyData,\n { style: { width: '200px', display: 'inline-block' }, icon: 'https://g.alicdn.com/uxcore/pic/' + item.img + '.png' },\n React.createElement(\n 'div',\n { style: { lineHeight: 2 } },\n React.createElement(\n 'div',\n null,\n item.name\n )\n )\n );\n })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-empty-data-demo-other'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport { EmptyData } from 'uxcore';\nimport { Button } from 'uxcore';\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n };\n }\n\n render() {\n return (\n <div>\n {[{\n img: 'access_restriction',\n name: '权限限制',\n }, {\n img: 'active_empty',\n name: '查询类空页面',\n }, {\n img: 'request_error',\n name: '网页请求错误',\n }, {\n img: 'search_empty',\n name: '网页请求错误',\n }, {\n img: 'unknown_error',\n name: '未知错误',\n }].map(item => (\n <EmptyData style={{ width: '200px', display: 'inline-block' }} icon={`https://g.alicdn.com/uxcore/pic/${item.img}.png`}>\n <div style={{ lineHeight: 2 }}>\n <div>{item.name}</div>\n </div>\n </EmptyData>\n ))}\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-empty-data-demo-other'));</code></pre></div>"},"status":"public","toc":""}]

基本使用

基本用法。


import { EmptyData } from 'uxcore';

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    return (
      <div>
        <EmptyData style={{ width: '200px' }} />
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-empty-data-demo-basic'));

定制文案

定制文案。


import { EmptyData } from 'uxcore';

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    return (
      <div>
        <EmptyData style={{ width: '200px' }}>
          <div style={{ lineHeight: 2 }}>
            <div>你还没有创建目标哦</div>
            <div>马上去<a>添加目标</a></div>
          </div>
        </EmptyData>
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-empty-data-demo-custom'));

页面使用

在页面级的使用。


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

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    return (
      <div>
        <EmptyData style={{ width: '200px' }} type="large">
          <div>你还没有创建目标哦</div>
          <Button type="outline" style={{ marginTop: '10px' }}>添加目标</Button>
        </EmptyData>
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-empty-data-demo-page'));

其他类型

除通用缺省页外，我们还提供了其他 5 种类型的常用空图片


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

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
    };
  }

  render() {
    return (
      <div>
        {[{
          img: 'access_restriction',
          name: '权限限制',
        }, {
          img: 'active_empty',
          name: '查询类空页面',
        }, {
          img: 'request_error',
          name: '网页请求错误',
        }, {
          img: 'search_empty',
          name: '网页请求错误',
        }, {
          img: 'unknown_error',
          name: '未知错误',
        }].map(item => (
          <EmptyData style={{ width: '200px', display: 'inline-block' }} icon={`https://g.alicdn.com/uxcore/pic/${item.img}.png`}>
            <div style={{ lineHeight: 2 }}>
              <div>{item.name}</div>
            </div>
          </EmptyData>
        ))}
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-empty-data-demo-other'));

Props

Name	Type	Required	Default	Comments
children	jsx	optional	暂无数据	内容
icon	string	optional	-	默认的图标
largeIcon	string	optional	-	默认的大图标
style	object	optional	-	root 节点的样式
prefixCls	string	optional	kuma-empty-data	类名前缀，不想使用 kuma 主题时使用
className	string	oprional	-	root 节点的额外类名，用于定制