uxcore.js - React UI Component Set

组件演示

[{"title":"一级标题","id":"components-title-demo-primary","tags":[],"filepath":"site/components/title/demo/primary.md","directory":"components/title/demo","filename":"primary","meta":{"title":"一级标题","description":"\n一级标题\n","order":"0","filepath":"site/components/title/demo/primary.md","filename":"primary","directory":"components/title/demo","id":"components-title-demo-primary","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 var me = this;\n return React.createElement(\n _uxcore.Title,\n { type: 'primary' },\n '\\u65B0\\u589E\\u9762\\u8BD5\\u6807\\u51C6'\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-title-demo-primary'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Title } from 'uxcore';\n\nclass Demo extends React.Component {\n\n render() {\n const me = this;\n return (\n <Title type=\"primary\">新增面试标准</Title>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-title-demo-primary'));</code></pre></div>"},"status":"public","toc":""},{"title":"二级标题","id":"components-title-demo-secondary","tags":[],"filepath":"site/components/title/demo/secondary.md","directory":"components/title/demo","filename":"secondary","meta":{"title":"二级标题","description":"\n二级标题\n","order":"1","filepath":"site/components/title/demo/secondary.md","filename":"secondary","directory":"components/title/demo","id":"components-title-demo-secondary","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 var me = this;\n return React.createElement(\n _uxcore.Title,\n { type: 'secondary' },\n '\\u80FD\\u529B\\u9879\\u8BBE\\u7F6E'\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-title-demo-secondary'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Title } from 'uxcore';\n\nclass Demo extends React.Component {\n\n render() {\n const me = this;\n return (\n <Title type=\"secondary\">能力项设置</Title>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-title-demo-secondary'));</code></pre></div>"},"status":"public","toc":""},{"title":"三级标题","id":"components-title-demo-thirdary","tags":[],"filepath":"site/components/title/demo/thirdary.md","directory":"components/title/demo","filename":"thirdary","meta":{"title":"三级标题","description":"\n三级标题\n","order":"2","filepath":"site/components/title/demo/thirdary.md","filename":"thirdary","directory":"components/title/demo","id":"components-title-demo-thirdary","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 var me = this;\n return React.createElement(\n _uxcore.Title,\n { type: 'thirdary' },\n '\\u4E13\\u4E1A\\u80FD\\u529B'\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-title-demo-thirdary'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Title } from 'uxcore';\n\nclass Demo extends React.Component {\n\n render() {\n const me = this;\n return (\n <Title type=\"thirdary\">专业能力</Title>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-title-demo-thirdary'));</code></pre></div>"},"status":"public","toc":""},{"title":"一、二、三级标题混排","id":"components-title-demo-combo","tags":[],"filepath":"site/components/title/demo/combo.md","directory":"components/title/demo","filename":"combo","meta":{"title":"一、二、三级标题混排","description":"\n一、二、三级标题混排\n","order":"3","filepath":"site/components/title/demo/combo.md","filename":"combo","directory":"components/title/demo","id":"components-title-demo-combo","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 var me = this;\n return React.createElement(\n \"div\",\n null,\n React.createElement(\n _uxcore.Title,\n { type: \"primary\" },\n \"\\u65B0\\u589E\\u9762\\u8BD5\\u6807\\u51C6\"\n ),\n React.createElement(\n _uxcore.Title,\n { type: \"secondary\" },\n \"\\u80FD\\u529B\\u9879\\u8BBE\\u7F6E\"\n ),\n React.createElement(\n _uxcore.Title,\n { type: \"thirdary\" },\n \"\\u4E13\\u4E1A\\u80FD\\u529B\"\n )\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-title-demo-combo'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Title } from 'uxcore';\n\nclass Demo extends React.Component {\n\n render() {\n const me = this;\n return (\n <div>\n <Title type=\"primary\">新增面试标准</Title>\n <Title type=\"secondary\">能力项设置</Title>\n <Title type=\"thirdary\">专业能力</Title>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-title-demo-combo'));</code></pre></div>"},"status":"public","toc":""},{"title":"仅渲染文字","id":"components-title-demo-no-deco","tags":[],"filepath":"site/components/title/demo/no-deco.md","directory":"components/title/demo","filename":"no-deco","meta":{"title":"仅渲染文字","description":"\n没有额外的间距和修饰物，不能开箱即用，但具有更加灵活的组合能力\n","order":"4","filepath":"site/components/title/demo/no-deco.md","filename":"no-deco","directory":"components/title/demo","id":"components-title-demo-no-deco","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 var tip = React.createElement(\n _uxcore.Tooltip,\n { overlay: '\\u63D0\\u793A\\u6587\\u5B57', placement: 'top', trigger: ['hover'] },\n React.createElement(_uxcore.Icon, { name: 'tishi-full', className: 'demo-title-tip' })\n );\n return React.createElement(\n 'div',\n null,\n React.createElement(\n 'h2',\n null,\n '\\u4E00\\u7EA7\\u6807\\u9898'\n ),\n React.createElement(_uxcore.Icon, { name: 'baocun', className: 'demo-tilte-icon large' }),\n React.createElement(\n _uxcore.Title,\n { noDecoration: true, type: 'primary' },\n '\\u65B0\\u589E\\u9762\\u8BD5\\u6807\\u51C6'\n ),\n tip,\n React.createElement(\n 'h2',\n null,\n '\\u4E8C\\u7EA7\\u6807\\u9898'\n ),\n React.createElement(_uxcore.Icon, { name: 'baocun', className: 'demo-tilte-icon middle' }),\n React.createElement(\n _uxcore.Title,\n { noDecoration: true, type: 'secondary' },\n '\\u80FD\\u529B\\u9879\\u8BBE\\u7F6E'\n ),\n tip,\n React.createElement(\n 'h2',\n null,\n '\\u4E09\\u7EA7\\u6807\\u9898'\n ),\n React.createElement(_uxcore.Icon, { name: 'baocun', className: 'demo-tilte-icon small' }),\n React.createElement(\n _uxcore.Title,\n { noDecoration: true, type: 'thirdary' },\n '\\u4E13\\u4E1A\\u80FD\\u529B'\n ),\n tip\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-title-demo-no-deco'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { Title } from 'uxcore';\nimport { Tooltip } from 'uxcore';\nimport { Icon } from 'uxcore';\n\nclass Demo extends React.Component {\n render() {\n const tip = (\n <Tooltip overlay=\"提示文字\" placement=\"top\" trigger={['hover']}>\n <Icon name=\"tishi-full\" className=\"demo-title-tip\" />\n </Tooltip>\n );\n return (\n <div>\n <h2>一级标题</h2>\n <Icon name=\"baocun\" className=\"demo-tilte-icon large\" />\n <Title noDecoration type=\"primary\">新增面试标准</Title>\n {tip}\n <h2>二级标题</h2>\n <Icon name=\"baocun\" className=\"demo-tilte-icon middle\" />\n <Title noDecoration type=\"secondary\">能力项设置</Title>\n {tip}\n <h2>三级标题</h2>\n <Icon name=\"baocun\" className=\"demo-tilte-icon small\" />\n <Title noDecoration type=\"thirdary\">专业能力</Title>\n {tip}\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />, document.getElementById('components-title-demo-no-deco'));</code></pre></div><style type=\"text/css\">h2 {\n margin: 12px 0;\n}\n.demo-tilte-icon {\n color: rgba(31, 56, 88, 0.4);\n margin-right: 12px;\n vertical-align: middle;\n}\n\n.demo-tilte-icon.large {\n font-size: 28px;\n}\n.demo-tilte-icon.middle {\n font-size: 24px;\n}\n.demo-tilte-icon.small {\n font-size: 20px;\n}\n\n.demo-title-tip {\n margin-left: 12px;\n color: #3C99D8;\n vertical-align: middle;\n}</style><div class=\"highlight\"><pre><code class=\"css\">h2 {\n margin: 12px 0;\n}\n.demo-tilte-icon {\n color: rgba(31, 56, 88, 0.4);\n margin-right: 12px;\n vertical-align: middle;\n}\n\n.demo-tilte-icon.large {\n font-size: 28px;\n}\n.demo-tilte-icon.middle {\n font-size: 24px;\n}\n.demo-tilte-icon.small {\n font-size: 20px;\n}\n\n.demo-title-tip {\n margin-left: 12px;\n color: #3C99D8;\n vertical-align: middle;\n}</code></pre></div>"},"status":"public","toc":""}]

一级标题

import { Title } from 'uxcore';

class Demo extends React.Component {

  render() {
    const me = this;
    return (
      <Title type="primary">新增面试标准</Title>
    );
  }
}

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

二级标题

import { Title } from 'uxcore';

class Demo extends React.Component {

  render() {
    const me = this;
    return (
      <Title type="secondary">能力项设置</Title>
    );
  }
}

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

三级标题

import { Title } from 'uxcore';

class Demo extends React.Component {

  render() {
    const me = this;
    return (
      <Title type="thirdary">专业能力</Title>
    );
  }
}

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

一、二、三级标题混排

import { Title } from 'uxcore';

class Demo extends React.Component {

  render() {
    const me = this;
    return (
      <div>
        <Title type="primary">新增面试标准</Title>
        <Title type="secondary">能力项设置</Title>
        <Title type="thirdary">专业能力</Title>
      </div>
    );
  }
}

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

仅渲染文字

没有额外的间距和修饰物，不能开箱即用，但具有更加灵活的组合能力

import { Title } from 'uxcore';
import { Tooltip } from 'uxcore';
import { Icon } from 'uxcore';

class Demo extends React.Component {
  render() {
    const tip = (
      <Tooltip overlay="提示文字" placement="top" trigger={['hover']}>
        <Icon name="tishi-full" className="demo-title-tip" />
      </Tooltip>
    );
    return (
      <div>
        <h2>一级标题</h2>
        <Icon name="baocun" className="demo-tilte-icon large" />
        <Title noDecoration type="primary">新增面试标准</Title>
        {tip}
        <h2>二级标题</h2>
        <Icon name="baocun" className="demo-tilte-icon middle" />
        <Title noDecoration type="secondary">能力项设置</Title>
        {tip}
        <h2>三级标题</h2>
        <Icon name="baocun" className="demo-tilte-icon small" />
        <Title noDecoration type="thirdary">专业能力</Title>
        {tip}
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />, document.getElementById('components-title-demo-no-deco'));

h2 {
  margin: 12px 0;
}
.demo-tilte-icon {
  color: rgba(31, 56, 88, 0.4);
  margin-right: 12px;
  vertical-align: middle;
}

.demo-tilte-icon.large {
  font-size: 28px;
}
.demo-tilte-icon.middle {
  font-size: 24px;
}
.demo-tilte-icon.small {
  font-size: 20px;
}

.demo-title-tip {
  margin-left: 12px;
  color: #3C99D8;
  vertical-align: middle;
}

Props

Name	Type	Required	Default	Comments
className	string	no		额外顶级类名
prefixCls	string	no	kuma-title	类名前缀，不想使用 kuma 主题时使用
type	string	no	primary	类型，枚举值 `primary`, `secondary`, `thirdary`