组件演示

[{"title":"一级标题","id":"components-title-demo-primary","tags":[],"filepath":"site/components/title/demo/primary.md","directory":"components/title/demo","filename":"primary","meta":{"title":"一级标题","description":"\n<p>一级标题</p>\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\"><span class=\"hljs-keyword\">import</span> { Title } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</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\n render() {\n <span class=\"hljs-keyword\">const</span> me = <span class=\"hljs-keyword\">this</span>;\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Title</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"primary\"</span>&gt;</span>新增面试标准<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Title</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('components-title-demo-primary'));</span></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<p>二级标题</p>\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\"><span class=\"hljs-keyword\">import</span> { Title } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</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\n render() {\n <span class=\"hljs-keyword\">const</span> me = <span class=\"hljs-keyword\">this</span>;\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Title</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"secondary\"</span>&gt;</span>能力项设置<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Title</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('components-title-demo-secondary'));</span></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<p>三级标题</p>\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\"><span class=\"hljs-keyword\">import</span> { Title } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</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\n render() {\n <span class=\"hljs-keyword\">const</span> me = <span class=\"hljs-keyword\">this</span>;\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Title</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"thirdary\"</span>&gt;</span>专业能力<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Title</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('components-title-demo-thirdary'));</span></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<p>一、二、三级标题混排</p>\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\"><span class=\"hljs-keyword\">import</span> { Title } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</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\n render() {\n <span class=\"hljs-keyword\">const</span> me = <span class=\"hljs-keyword\">this</span>;\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Title</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"primary\"</span>&gt;</span>新增面试标准<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Title</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Title</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"secondary\"</span>&gt;</span>能力项设置<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Title</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Title</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"thirdary\"</span>&gt;</span>专业能力<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Title</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('components-title-demo-combo'));</span></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<p>没有额外的间距和修饰物,不能开箱即用,但具有更加灵活的组合能力</p>\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\"><span class=\"hljs-keyword\">import</span> { Title } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { Tooltip } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">import</span> { Icon } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</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\">const</span> tip = (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Tooltip</span> <span class=\"hljs-attribute\">overlay</span>=<span class=\"hljs-value\">\"提示文字\"</span> <span class=\"hljs-attribute\">placement</span>=<span class=\"hljs-value\">\"top\"</span> <span class=\"hljs-attribute\">trigger</span>=<span class=\"hljs-value\">{['hover']}</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Icon</span> <span class=\"hljs-attribute\">name</span>=<span class=\"hljs-value\">\"tishi-full\"</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"demo-title-tip\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Tooltip</span>&gt;</span>\n )</span>;\n <span class=\"hljs-keyword\">return</span> (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">h2</span>&gt;</span>一级标题<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">h2</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Icon</span> <span class=\"hljs-attribute\">name</span>=<span class=\"hljs-value\">\"baocun\"</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"demo-tilte-icon large\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Title</span> <span class=\"hljs-attribute\">noDecoration</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"primary\"</span>&gt;</span>新增面试标准<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Title</span>&gt;</span>\n {tip}\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">h2</span>&gt;</span>二级标题<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">h2</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Icon</span> <span class=\"hljs-attribute\">name</span>=<span class=\"hljs-value\">\"baocun\"</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"demo-tilte-icon middle\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Title</span> <span class=\"hljs-attribute\">noDecoration</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"secondary\"</span>&gt;</span>能力项设置<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Title</span>&gt;</span>\n {tip}\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">h2</span>&gt;</span>三级标题<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">h2</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Icon</span> <span class=\"hljs-attribute\">name</span>=<span class=\"hljs-value\">\"baocun\"</span> <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"demo-tilte-icon small\"</span> /&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Title</span> <span class=\"hljs-attribute\">noDecoration</span> <span class=\"hljs-attribute\">type</span>=<span class=\"hljs-value\">\"thirdary\"</span>&gt;</span>专业能力<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Title</span>&gt;</span>\n {tip}\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>, document.getElementById('components-title-demo-no-deco'));</span></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\"><span class=\"hljs-tag\">h2</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">margin</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">12px</span> <span class=\"hljs-number\">0</span></span></span>;\n}</span>\n<span class=\"hljs-class\">.demo-tilte-icon</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\">31</span>, <span class=\"hljs-number\">56</span>, <span class=\"hljs-number\">88</span>, <span class=\"hljs-number\">0.4</span>)</span></span>;\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 class=\"hljs-rule\"><span class=\"hljs-attribute\">vertical-align</span>:<span class=\"hljs-value\"> middle</span></span>;\n}</span>\n\n<span class=\"hljs-class\">.demo-tilte-icon</span><span class=\"hljs-class\">.large</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">font-size</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">28px</span></span></span>;\n}</span>\n<span class=\"hljs-class\">.demo-tilte-icon</span><span class=\"hljs-class\">.middle</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">font-size</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">24px</span></span></span>;\n}</span>\n<span class=\"hljs-class\">.demo-tilte-icon</span><span class=\"hljs-class\">.small</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">font-size</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">20px</span></span></span>;\n}</span>\n\n<span class=\"hljs-class\">.demo-title-tip</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">margin-left</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">12px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">color</span>:<span class=\"hljs-value\"> <span class=\"hljs-hexcolor\">#3C99D8</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">vertical-align</span>:<span class=\"hljs-value\"> middle</span></span>;\n}</span></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