uxcore.js - React UI Component Set

组件演示

[{"title":"基本使用","id":"components-timeline-demo-basic","tags":[],"filepath":"site/components/timeline/demo/basic.md","directory":"components/timeline/demo","filename":"basic","meta":{"title":"基本使用","description":"\n基本使用\n","order":"0","filepath":"site/components/timeline/demo/basic.md","filename":"basic","directory":"components/timeline/demo","id":"components-timeline-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(\n _uxcore.Timeline,\n null,\n React.createElement(\n _uxcore.Timeline.Item,\n null,\n React.createElement(\n \"p\",\n null,\n \"2016-10-25\"\n ),\n React.createElement(\n \"p\",\n null,\n \"content1\"\n ),\n React.createElement(\n \"p\",\n null,\n \"content1\"\n )\n ),\n React.createElement(\n _uxcore.Timeline.Item,\n null,\n React.createElement(\n \"p\",\n null,\n \"2016-10-26\"\n ),\n React.createElement(\n \"p\",\n null,\n \"content2\"\n ),\n React.createElement(\n \"p\",\n null,\n \"content2\"\n )\n ),\n React.createElement(\n _uxcore.Timeline.Item,\n { color: \"gray\" },\n React.createElement(\n \"p\",\n null,\n \"2016-10-27\"\n ),\n React.createElement(\n \"p\",\n null,\n \"content3\"\n ),\n React.createElement(\n \"p\",\n null,\n \"content3\"\n )\n ),\n React.createElement(\n _uxcore.Timeline.Item,\n { color: \"gray\" },\n React.createElement(\n \"p\",\n null,\n \"2016-10-28\"\n ),\n React.createElement(\n \"p\",\n null,\n \"content4\"\n ),\n React.createElement(\n \"p\",\n null,\n \"content4\"\n )\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-timeline-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport { Timeline } 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 <Timeline>\n <Timeline.Item>\n <p>2016-10-25</p>\n <p>content1</p>\n <p>content1</p>\n </Timeline.Item>\n <Timeline.Item>\n <p>2016-10-26</p>\n <p>content2</p>\n <p>content2</p>\n </Timeline.Item>\n <Timeline.Item color=\"gray\">\n <p>2016-10-27</p>\n <p>content3</p>\n <p>content3</p>\n </Timeline.Item>\n <Timeline.Item color=\"gray\">\n <p>2016-10-28</p>\n <p>content4</p>\n <p>content4</p>\n </Timeline.Item>\n </Timeline>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-timeline-demo-basic'));</code></pre></div>"},"status":"public","toc":""},{"title":"自定义线条颜色","id":"components-timeline-demo-custom","tags":[],"filepath":"site/components/timeline/demo/custom.md","directory":"components/timeline/demo","filename":"custom","meta":{"title":"自定义线条颜色","description":"\n自定义线条颜色\n","order":"1","filepath":"site/components/timeline/demo/custom.md","filename":"custom","directory":"components/timeline/demo","id":"components-timeline-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.Timeline,\n null,\n React.createElement(\n _uxcore.Timeline.Item,\n null,\n React.createElement(\n \"p\",\n null,\n \"2016-10-25\"\n ),\n React.createElement(\n \"p\",\n null,\n \"content1\"\n ),\n React.createElement(\n \"p\",\n null,\n \"content1\"\n )\n ),\n React.createElement(\n _uxcore.Timeline.Item,\n { color: \"green\" },\n React.createElement(\n \"p\",\n null,\n \"2016-10-26\"\n ),\n React.createElement(\n \"p\",\n null,\n \"content2\"\n ),\n React.createElement(\n \"p\",\n null,\n \"content2\"\n )\n ),\n React.createElement(\n _uxcore.Timeline.Item,\n { color: \"blue\" },\n React.createElement(\n \"p\",\n null,\n \"2016-10-27\"\n ),\n React.createElement(\n \"p\",\n null,\n \"content3\"\n ),\n React.createElement(\n \"p\",\n null,\n \"content3\"\n )\n ),\n React.createElement(\n _uxcore.Timeline.Item,\n { color: \"gray\" },\n React.createElement(\n \"p\",\n null,\n \"2016-10-28\"\n ),\n React.createElement(\n \"p\",\n null,\n \"content4\"\n ),\n React.createElement(\n \"p\",\n null,\n \"content4\"\n )\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-timeline-demo-custom'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport { Timeline } 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 <Timeline>\n <Timeline.Item>\n <p>2016-10-25</p>\n <p>content1</p>\n <p>content1</p>\n </Timeline.Item>\n <Timeline.Item color=\"green\">\n <p>2016-10-26</p>\n <p>content2</p>\n <p>content2</p>\n </Timeline.Item>\n <Timeline.Item color=\"blue\">\n <p>2016-10-27</p>\n <p>content3</p>\n <p>content3</p>\n </Timeline.Item>\n <Timeline.Item color=\"gray\">\n <p>2016-10-28</p>\n <p>content4</p>\n <p>content4</p>\n </Timeline.Item>\n </Timeline>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-timeline-demo-custom'));</code></pre></div>"},"status":"public","toc":""},{"title":"指定最后一个幽灵节点","id":"components-timeline-demo-addons","tags":[],"filepath":"site/components/timeline/demo/addons.md","directory":"components/timeline/demo","filename":"addons","meta":{"title":"指定最后一个幽灵节点","description":"\n","filepath":"site/components/timeline/demo/addons.md","filename":"addons","directory":"components/timeline/demo","id":"components-timeline-demo-addons","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.Timeline,\n { pending: React.createElement(\n \"a\",\n null,\n \"To do\"\n ) },\n React.createElement(\n _uxcore.Timeline.Item,\n null,\n React.createElement(\n \"p\",\n null,\n \"2016-10-25\"\n ),\n React.createElement(\n \"p\",\n null,\n \"content1\"\n ),\n React.createElement(\n \"p\",\n null,\n \"content1\"\n )\n ),\n React.createElement(\n _uxcore.Timeline.Item,\n { color: \"green\" },\n React.createElement(\n \"p\",\n null,\n \"2016-10-26\"\n ),\n React.createElement(\n \"p\",\n null,\n \"content2\"\n ),\n React.createElement(\n \"p\",\n null,\n \"content2\"\n )\n ),\n React.createElement(\n _uxcore.Timeline.Item,\n { color: \"blue\" },\n React.createElement(\n \"p\",\n null,\n \"2016-10-27\"\n ),\n React.createElement(\n \"p\",\n null,\n \"content3\"\n ),\n React.createElement(\n \"p\",\n null,\n \"content3\"\n )\n ),\n React.createElement(\n _uxcore.Timeline.Item,\n { color: \"gray\" },\n React.createElement(\n \"p\",\n null,\n \"2016-10-28\"\n ),\n React.createElement(\n \"p\",\n null,\n \"content4\"\n ),\n React.createElement(\n \"p\",\n null,\n \"content4\"\n )\n )\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-timeline-demo-addons'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">\nimport { Timeline } 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 <Timeline pending={<a>To do</a>}>\n <Timeline.Item>\n <p>2016-10-25</p>\n <p>content1</p>\n <p>content1</p>\n </Timeline.Item>\n <Timeline.Item color=\"green\">\n <p>2016-10-26</p>\n <p>content2</p>\n <p>content2</p>\n </Timeline.Item>\n <Timeline.Item color=\"blue\">\n <p>2016-10-27</p>\n <p>content3</p>\n <p>content3</p>\n </Timeline.Item>\n <Timeline.Item color=\"gray\">\n <p>2016-10-28</p>\n <p>content4</p>\n <p>content4</p>\n </Timeline.Item>\n </Timeline>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-timeline-demo-addons'));</code></pre></div>"},"status":"public","toc":""}]

基本使用


import { Timeline } from 'uxcore';

class Demo extends React.Component {

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

  render() {
    return (
      <div>
        <Timeline>
          <Timeline.Item>
            <p>2016-10-25</p>
            <p>content1</p>
            <p>content1</p>
          </Timeline.Item>
          <Timeline.Item>
            <p>2016-10-26</p>
            <p>content2</p>
            <p>content2</p>
          </Timeline.Item>
          <Timeline.Item color="gray">
            <p>2016-10-27</p>
            <p>content3</p>
            <p>content3</p>
          </Timeline.Item>
          <Timeline.Item color="gray">
            <p>2016-10-28</p>
            <p>content4</p>
            <p>content4</p>
          </Timeline.Item>
        </Timeline>
      </div>
    );
  }
}

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

自定义线条颜色


import { Timeline } from 'uxcore';

class Demo extends React.Component {

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

  render() {
    return (
      <div>
        <Timeline>
          <Timeline.Item>
            <p>2016-10-25</p>
            <p>content1</p>
            <p>content1</p>
          </Timeline.Item>
          <Timeline.Item color="green">
            <p>2016-10-26</p>
            <p>content2</p>
            <p>content2</p>
          </Timeline.Item>
          <Timeline.Item color="blue">
            <p>2016-10-27</p>
            <p>content3</p>
            <p>content3</p>
          </Timeline.Item>
          <Timeline.Item color="gray">
            <p>2016-10-28</p>
            <p>content4</p>
            <p>content4</p>
          </Timeline.Item>
        </Timeline>
      </div>
    );
  }
}

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

指定最后一个幽灵节点


import { Timeline } from 'uxcore';

class Demo extends React.Component {

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

  render() {
    return (
      <div>
        <Timeline pending={<a>To do</a>}>
          <Timeline.Item>
            <p>2016-10-25</p>
            <p>content1</p>
            <p>content1</p>
          </Timeline.Item>
          <Timeline.Item color="green">
            <p>2016-10-26</p>
            <p>content2</p>
            <p>content2</p>
          </Timeline.Item>
          <Timeline.Item color="blue">
            <p>2016-10-27</p>
            <p>content3</p>
            <p>content3</p>
          </Timeline.Item>
          <Timeline.Item color="gray">
            <p>2016-10-28</p>
            <p>content4</p>
            <p>content4</p>
          </Timeline.Item>
        </Timeline>
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-timeline-demo-addons'));

Props

Timeline

时间轴。

Name	Type	Required	Default	Comments
className	String	false	无	额外类名
pending	jsx	false	无	指定最后一个幽灵节点内容

Timeline.Item

时间轴的每一个节点。

Name	Type	Required	Default	Comments
className	String	false	无	额外类名
color	String	false	orange	指定圆圈颜色 `orange, blue, gray, green`，或自定义的色值
dot	jsx	false	无	自定义时间轴点