uxcore.js - React UI Component Set

组件演示

[{"title":"基本","id":"components-cascade-select-demo-basic","tags":[],"filepath":"site/components/cascade-select/demo/basic.md","directory":"components/cascade-select/demo","filename":"basic","meta":{"title":"基本","description":"\n最简单的用法。\n","order":"0","filepath":"site/components/cascade-select/demo/basic.md","filename":"basic","directory":"components/cascade-select/demo","id":"components-cascade-select-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 options = [{\n value: 'alibaba',\n label: '阿里巴巴',\n children: [{\n value: 'platform',\n label: '企业智能事业部',\n children: [{\n value: 'fe',\n label: '前端开发'\n }]\n }]\n}, {\n value: 'beijing',\n label: '日本',\n children: [{\n value: 'xicheng',\n label: '西城',\n children: [{\n value: 'zhonggc',\n label: '中观村大街'\n }]\n }]\n}, {\n value: 'tianjin',\n label: '天津',\n children: [{\n value: 'heping',\n label: '和平区',\n children: [{\n value: 'nanjinglu',\n label: '南京路'\n }]\n }, {\n value: 'hexi',\n label: '河西区',\n children: [{\n value: 'dagu',\n label: '大沽路'\n }]\n }]\n}, {\n value: 'zhejiang',\n label: '浙江',\n children: [{\n value: 'hangzhou',\n label: '杭州',\n children: [{\n value: 'xihu',\n label: '西湖'\n }]\n }]\n}, {\n value: 'jiangsu',\n label: '江苏',\n children: [{\n value: 'nanjing',\n label: '南京',\n children: [{\n value: 'zhonghuamen',\n label: '中华门'\n }]\n }]\n}];\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 xValue: ['jiangsu', 'nanjing', 'zhonghuamen'],\n testValue: 1\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n { className: 'demo-wrap' },\n React.createElement(_uxcore.CascadeSelect, {\n defaultValue: ['alibaba', 'platform', 'fe'],\n options: options,\n onChange: function onChange(value, selected) {\n return console.log(value, selected);\n }\n })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-cascade-select-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { CascadeSelect } from 'uxcore';\nconst options = [{\n value: 'alibaba',\n label: '阿里巴巴',\n children: [{\n value: 'platform',\n label: '企业智能事业部',\n children: [{\n value: 'fe',\n label: '前端开发',\n }],\n }],\n}, {\n value: 'beijing',\n label: '日本',\n children: [{\n value: 'xicheng',\n label: '西城',\n children: [{\n value: 'zhonggc',\n label: '中观村大街',\n }],\n }],\n}, {\n value: 'tianjin',\n label: '天津',\n children: [{\n value: 'heping',\n label: '和平区',\n children: [{\n value: 'nanjinglu',\n label: '南京路',\n }],\n }, {\n value: 'hexi',\n label: '河西区',\n children: [{\n value: 'dagu',\n label: '大沽路',\n }],\n }],\n}, {\n value: 'zhejiang',\n label: '浙江',\n children: [{\n value: 'hangzhou',\n label: '杭州',\n children: [{\n value: 'xihu',\n label: '西湖',\n }],\n }],\n}, {\n value: 'jiangsu',\n label: '江苏',\n children: [{\n value: 'nanjing',\n label: '南京',\n children: [{\n value: 'zhonghuamen',\n label: '中华门',\n }],\n }],\n}];\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n xValue: ['jiangsu', 'nanjing', 'zhonghuamen'],\n testValue: 1,\n };\n }\n\n render() {\n return (\n <div className=\"demo-wrap\">\n <CascadeSelect\n defaultValue={['alibaba', 'platform', 'fe']}\n options={options}\n onChange={(value, selected) => console.log(value, selected)}\n />\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-cascade-select-demo-basic'));</code></pre></div>"},"status":"public","toc":""},{"title":"允许清空","id":"components-cascade-select-demo-clear","tags":[],"filepath":"site/components/cascade-select/demo/clear.md","directory":"components/cascade-select/demo","filename":"clear","meta":{"title":"允许清空","description":"\n最简单的用法。\n","order":"1","filepath":"site/components/cascade-select/demo/clear.md","filename":"clear","directory":"components/cascade-select/demo","id":"components-cascade-select-demo-clear","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 options = [{\n value: 'alibaba',\n label: '阿里巴巴',\n children: [{\n value: 'platform',\n label: '企业智能事业部',\n children: [{\n value: 'fe',\n label: '前端开发'\n }]\n }]\n}, {\n value: 'beijing',\n label: '日本',\n children: [{\n value: 'xicheng',\n label: '西城',\n children: [{\n value: 'zhonggc',\n label: '中观村大街'\n }]\n }]\n}, {\n value: 'tianjin',\n label: '天津',\n children: [{\n value: 'heping',\n label: '和平区',\n children: [{\n value: 'nanjinglu',\n label: '南京路'\n }]\n }, {\n value: 'hexi',\n label: '河西区',\n children: [{\n value: 'dagu',\n label: '大沽路'\n }]\n }]\n}, {\n value: 'zhejiang',\n label: '浙江',\n children: [{\n value: 'hangzhou',\n label: '杭州',\n children: [{\n value: 'xihu',\n label: '西湖'\n }]\n }]\n}, {\n value: 'jiangsu',\n label: '江苏',\n children: [{\n value: 'nanjing',\n label: '南京',\n children: [{\n value: 'zhonghuamen',\n label: '中华门'\n }]\n }]\n}];\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 xValue: ['jiangsu', 'nanjing', 'zhonghuamen'],\n testValue: 1\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n { className: 'demo-wrap' },\n React.createElement(_uxcore.CascadeSelect, {\n defaultValue: ['alibaba', 'platform', 'fe'],\n options: options,\n clearable: true,\n onChange: function onChange(value, selected) {\n return console.log(value, selected);\n }\n })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-cascade-select-demo-clear'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { CascadeSelect } from 'uxcore';\nconst options = [{\n value: 'alibaba',\n label: '阿里巴巴',\n children: [{\n value: 'platform',\n label: '企业智能事业部',\n children: [{\n value: 'fe',\n label: '前端开发',\n }],\n }],\n}, {\n value: 'beijing',\n label: '日本',\n children: [{\n value: 'xicheng',\n label: '西城',\n children: [{\n value: 'zhonggc',\n label: '中观村大街',\n }],\n }],\n}, {\n value: 'tianjin',\n label: '天津',\n children: [{\n value: 'heping',\n label: '和平区',\n children: [{\n value: 'nanjinglu',\n label: '南京路',\n }],\n }, {\n value: 'hexi',\n label: '河西区',\n children: [{\n value: 'dagu',\n label: '大沽路',\n }],\n }],\n}, {\n value: 'zhejiang',\n label: '浙江',\n children: [{\n value: 'hangzhou',\n label: '杭州',\n children: [{\n value: 'xihu',\n label: '西湖',\n }],\n }],\n}, {\n value: 'jiangsu',\n label: '江苏',\n children: [{\n value: 'nanjing',\n label: '南京',\n children: [{\n value: 'zhonghuamen',\n label: '中华门',\n }],\n }],\n}];\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n xValue: ['jiangsu', 'nanjing', 'zhonghuamen'],\n testValue: 1,\n };\n }\n\n render() {\n return (\n <div className=\"demo-wrap\">\n <CascadeSelect\n defaultValue={['alibaba', 'platform', 'fe']}\n options={options}\n clearable\n onChange={(value, selected) => console.log(value, selected)}\n />\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-cascade-select-demo-clear'));</code></pre></div>"},"status":"public","toc":""},{"title":"尺寸","id":"components-cascade-select-demo-size","tags":[],"filepath":"site/components/cascade-select/demo/size.md","directory":"components/cascade-select/demo","filename":"size","meta":{"title":"尺寸","description":"\n提供 large、middle、small 三种尺寸\n","order":"1","filepath":"site/components/cascade-select/demo/size.md","filename":"size","directory":"components/cascade-select/demo","id":"components-cascade-select-demo-size","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 options = [{\n value: 'alibaba',\n label: '阿里巴巴',\n children: [{\n value: 'platform',\n label: '企业智能事业部',\n children: [{\n value: 'fe',\n label: '前端开发'\n }]\n }]\n}, {\n value: 'beijing',\n label: '日本',\n children: [{\n value: 'xicheng',\n label: '西城',\n children: [{\n value: 'zhonggc',\n label: '中观村大街'\n }]\n }]\n}, {\n value: 'tianjin',\n label: '天津',\n children: [{\n value: 'heping',\n label: '和平区',\n children: [{\n value: 'nanjinglu',\n label: '南京路'\n }]\n }, {\n value: 'hexi',\n label: '河西区',\n children: [{\n value: 'dagu',\n label: '大沽路'\n }]\n }]\n}, {\n value: 'zhejiang',\n label: '浙江',\n children: [{\n value: 'hangzhou',\n label: '杭州',\n children: [{\n value: 'xihu',\n label: '西湖'\n }]\n }]\n}, {\n value: 'jiangsu',\n label: '江苏',\n children: [{\n value: 'nanjing',\n label: '南京',\n children: [{\n value: 'zhonghuamen',\n label: '中华门'\n }]\n }]\n}];\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 xValue: ['jiangsu', 'nanjing', 'zhonghuamen'],\n testValue: 1\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n var cascader = React.createElement(_uxcore.CascadeSelect, {\n defaultValue: ['alibaba', 'platform', 'fe'],\n options: options,\n clearable: true,\n onChange: function onChange(value, selected) {\n return console.log(value, selected);\n }\n });\n return React.createElement(\n 'div',\n { className: 'demo-wrap' },\n ['large', 'middle', 'small'].map(function (size) {\n return React.createElement(\n 'div',\n { style: { marginBottom: '4px' } },\n React.cloneElement(cascader, { size: size })\n );\n })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-cascade-select-demo-size'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { CascadeSelect } from 'uxcore';\nconst options = [{\n value: 'alibaba',\n label: '阿里巴巴',\n children: [{\n value: 'platform',\n label: '企业智能事业部',\n children: [{\n value: 'fe',\n label: '前端开发',\n }],\n }],\n}, {\n value: 'beijing',\n label: '日本',\n children: [{\n value: 'xicheng',\n label: '西城',\n children: [{\n value: 'zhonggc',\n label: '中观村大街',\n }],\n }],\n}, {\n value: 'tianjin',\n label: '天津',\n children: [{\n value: 'heping',\n label: '和平区',\n children: [{\n value: 'nanjinglu',\n label: '南京路',\n }],\n }, {\n value: 'hexi',\n label: '河西区',\n children: [{\n value: 'dagu',\n label: '大沽路',\n }],\n }],\n}, {\n value: 'zhejiang',\n label: '浙江',\n children: [{\n value: 'hangzhou',\n label: '杭州',\n children: [{\n value: 'xihu',\n label: '西湖',\n }],\n }],\n}, {\n value: 'jiangsu',\n label: '江苏',\n children: [{\n value: 'nanjing',\n label: '南京',\n children: [{\n value: 'zhonghuamen',\n label: '中华门',\n }],\n }],\n}];\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n xValue: ['jiangsu', 'nanjing', 'zhonghuamen'],\n testValue: 1,\n };\n }\n\n render() {\n const cascader = (\n <CascadeSelect\n defaultValue={['alibaba', 'platform', 'fe']}\n options={options}\n clearable\n onChange={(value, selected) => console.log(value, selected)}\n />\n );\n return (\n <div className=\"demo-wrap\">\n {['large', 'middle', 'small'].map(size => (\n <div style={{ marginBottom: '4px' }}>{React.cloneElement(cascader, { size })}</div>\n ))}\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-cascade-select-demo-size'));</code></pre></div>"},"status":"public","toc":""},{"title":"禁用","id":"components-cascade-select-demo-disable","tags":[],"filepath":"site/components/cascade-select/demo/disable.md","directory":"components/cascade-select/demo","filename":"disable","meta":{"title":"禁用","description":"\n最简单的用法。\n","order":"2","filepath":"site/components/cascade-select/demo/disable.md","filename":"disable","directory":"components/cascade-select/demo","id":"components-cascade-select-demo-disable","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 options = [{\n value: 'alibaba',\n label: '阿里巴巴',\n children: [{\n value: 'platform',\n label: '企业智能事业部',\n children: [{\n value: 'fe',\n label: '前端开发'\n }]\n }]\n}, {\n value: 'beijing',\n label: '日本',\n children: [{\n value: 'xicheng',\n label: '西城',\n children: [{\n value: 'zhonggc',\n label: '中观村大街'\n }]\n }]\n}, {\n value: 'tianjin',\n label: '天津',\n children: [{\n value: 'heping',\n label: '和平区',\n children: [{\n value: 'nanjinglu',\n label: '南京路'\n }]\n }, {\n value: 'hexi',\n label: '河西区',\n children: [{\n value: 'dagu',\n label: '大沽路'\n }]\n }]\n}, {\n value: 'zhejiang',\n label: '浙江',\n children: [{\n value: 'hangzhou',\n label: '杭州',\n children: [{\n value: 'xihu',\n label: '西湖'\n }]\n }]\n}, {\n value: 'jiangsu',\n label: '江苏',\n children: [{\n value: 'nanjing',\n label: '南京',\n children: [{\n value: 'zhonghuamen',\n label: '中华门'\n }]\n }]\n}];\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 xValue: ['jiangsu', 'nanjing', 'zhonghuamen'],\n testValue: 1\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'render',\n value: function render() {\n return React.createElement(\n 'div',\n { className: 'demo-wrap' },\n React.createElement(_uxcore.CascadeSelect, {\n defaultValue: ['alibaba', 'platform', 'fe'],\n options: options,\n clearable: true,\n disabled: true,\n onChange: function onChange(value, selected) {\n return console.log(value, selected);\n }\n })\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-cascade-select-demo-disable'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\">import { CascadeSelect } from 'uxcore';\nconst options = [{\n value: 'alibaba',\n label: '阿里巴巴',\n children: [{\n value: 'platform',\n label: '企业智能事业部',\n children: [{\n value: 'fe',\n label: '前端开发',\n }],\n }],\n}, {\n value: 'beijing',\n label: '日本',\n children: [{\n value: 'xicheng',\n label: '西城',\n children: [{\n value: 'zhonggc',\n label: '中观村大街',\n }],\n }],\n}, {\n value: 'tianjin',\n label: '天津',\n children: [{\n value: 'heping',\n label: '和平区',\n children: [{\n value: 'nanjinglu',\n label: '南京路',\n }],\n }, {\n value: 'hexi',\n label: '河西区',\n children: [{\n value: 'dagu',\n label: '大沽路',\n }],\n }],\n}, {\n value: 'zhejiang',\n label: '浙江',\n children: [{\n value: 'hangzhou',\n label: '杭州',\n children: [{\n value: 'xihu',\n label: '西湖',\n }],\n }],\n}, {\n value: 'jiangsu',\n label: '江苏',\n children: [{\n value: 'nanjing',\n label: '南京',\n children: [{\n value: 'zhonghuamen',\n label: '中华门',\n }],\n }],\n}];\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n xValue: ['jiangsu', 'nanjing', 'zhonghuamen'],\n testValue: 1,\n };\n }\n\n render() {\n return (\n <div className=\"demo-wrap\">\n <CascadeSelect\n defaultValue={['alibaba', 'platform', 'fe']}\n options={options}\n clearable\n disabled\n onChange={(value, selected) => console.log(value, selected)}\n />\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Demo />\n, document.getElementById('components-cascade-select-demo-disable'));</code></pre></div>"},"status":"public","toc":""}]

基本

最简单的用法。

import { CascadeSelect } from 'uxcore';
const options = [{
  value: 'alibaba',
  label: '阿里巴巴',
  children: [{
    value: 'platform',
    label: '企业智能事业部',
    children: [{
      value: 'fe',
      label: '前端开发',
    }],
  }],
}, {
  value: 'beijing',
  label: '日本',
  children: [{
    value: 'xicheng',
    label: '西城',
    children: [{
      value: 'zhonggc',
      label: '中观村大街',
    }],
  }],
}, {
  value: 'tianjin',
  label: '天津',
  children: [{
    value: 'heping',
    label: '和平区',
    children: [{
      value: 'nanjinglu',
      label: '南京路',
    }],
  }, {
    value: 'hexi',
    label: '河西区',
    children: [{
      value: 'dagu',
      label: '大沽路',
    }],
  }],
}, {
  value: 'zhejiang',
  label: '浙江',
  children: [{
    value: 'hangzhou',
    label: '杭州',
    children: [{
      value: 'xihu',
      label: '西湖',
    }],
  }],
}, {
  value: 'jiangsu',
  label: '江苏',
  children: [{
    value: 'nanjing',
    label: '南京',
    children: [{
      value: 'zhonghuamen',
      label: '中华门',
    }],
  }],
}];

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      xValue: ['jiangsu', 'nanjing', 'zhonghuamen'],
      testValue: 1,
    };
  }

  render() {
    return (
      <div className="demo-wrap">
        <CascadeSelect
          defaultValue={['alibaba', 'platform', 'fe']}
          options={options}
          onChange={(value, selected) => console.log(value, selected)}
        />
      </div>
    );
  }
}

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

允许清空

最简单的用法。

import { CascadeSelect } from 'uxcore';
const options = [{
  value: 'alibaba',
  label: '阿里巴巴',
  children: [{
    value: 'platform',
    label: '企业智能事业部',
    children: [{
      value: 'fe',
      label: '前端开发',
    }],
  }],
}, {
  value: 'beijing',
  label: '日本',
  children: [{
    value: 'xicheng',
    label: '西城',
    children: [{
      value: 'zhonggc',
      label: '中观村大街',
    }],
  }],
}, {
  value: 'tianjin',
  label: '天津',
  children: [{
    value: 'heping',
    label: '和平区',
    children: [{
      value: 'nanjinglu',
      label: '南京路',
    }],
  }, {
    value: 'hexi',
    label: '河西区',
    children: [{
      value: 'dagu',
      label: '大沽路',
    }],
  }],
}, {
  value: 'zhejiang',
  label: '浙江',
  children: [{
    value: 'hangzhou',
    label: '杭州',
    children: [{
      value: 'xihu',
      label: '西湖',
    }],
  }],
}, {
  value: 'jiangsu',
  label: '江苏',
  children: [{
    value: 'nanjing',
    label: '南京',
    children: [{
      value: 'zhonghuamen',
      label: '中华门',
    }],
  }],
}];

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      xValue: ['jiangsu', 'nanjing', 'zhonghuamen'],
      testValue: 1,
    };
  }

  render() {
    return (
      <div className="demo-wrap">
        <CascadeSelect
          defaultValue={['alibaba', 'platform', 'fe']}
          options={options}
          clearable
          onChange={(value, selected) => console.log(value, selected)}
        />
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-cascade-select-demo-clear'));

尺寸

提供 large、middle、small 三种尺寸

import { CascadeSelect } from 'uxcore';
const options = [{
  value: 'alibaba',
  label: '阿里巴巴',
  children: [{
    value: 'platform',
    label: '企业智能事业部',
    children: [{
      value: 'fe',
      label: '前端开发',
    }],
  }],
}, {
  value: 'beijing',
  label: '日本',
  children: [{
    value: 'xicheng',
    label: '西城',
    children: [{
      value: 'zhonggc',
      label: '中观村大街',
    }],
  }],
}, {
  value: 'tianjin',
  label: '天津',
  children: [{
    value: 'heping',
    label: '和平区',
    children: [{
      value: 'nanjinglu',
      label: '南京路',
    }],
  }, {
    value: 'hexi',
    label: '河西区',
    children: [{
      value: 'dagu',
      label: '大沽路',
    }],
  }],
}, {
  value: 'zhejiang',
  label: '浙江',
  children: [{
    value: 'hangzhou',
    label: '杭州',
    children: [{
      value: 'xihu',
      label: '西湖',
    }],
  }],
}, {
  value: 'jiangsu',
  label: '江苏',
  children: [{
    value: 'nanjing',
    label: '南京',
    children: [{
      value: 'zhonghuamen',
      label: '中华门',
    }],
  }],
}];

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      xValue: ['jiangsu', 'nanjing', 'zhonghuamen'],
      testValue: 1,
    };
  }

  render() {
    const cascader = (
      <CascadeSelect
        defaultValue={['alibaba', 'platform', 'fe']}
        options={options}
        clearable
        onChange={(value, selected) => console.log(value, selected)}
      />
    );
    return (
      <div className="demo-wrap">
        {['large', 'middle', 'small'].map(size => (
          <div style={{ marginBottom: '4px' }}>{React.cloneElement(cascader, { size })}</div>
          ))}
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-cascade-select-demo-size'));

禁用

最简单的用法。

import { CascadeSelect } from 'uxcore';
const options = [{
  value: 'alibaba',
  label: '阿里巴巴',
  children: [{
    value: 'platform',
    label: '企业智能事业部',
    children: [{
      value: 'fe',
      label: '前端开发',
    }],
  }],
}, {
  value: 'beijing',
  label: '日本',
  children: [{
    value: 'xicheng',
    label: '西城',
    children: [{
      value: 'zhonggc',
      label: '中观村大街',
    }],
  }],
}, {
  value: 'tianjin',
  label: '天津',
  children: [{
    value: 'heping',
    label: '和平区',
    children: [{
      value: 'nanjinglu',
      label: '南京路',
    }],
  }, {
    value: 'hexi',
    label: '河西区',
    children: [{
      value: 'dagu',
      label: '大沽路',
    }],
  }],
}, {
  value: 'zhejiang',
  label: '浙江',
  children: [{
    value: 'hangzhou',
    label: '杭州',
    children: [{
      value: 'xihu',
      label: '西湖',
    }],
  }],
}, {
  value: 'jiangsu',
  label: '江苏',
  children: [{
    value: 'nanjing',
    label: '南京',
    children: [{
      value: 'zhonghuamen',
      label: '中华门',
    }],
  }],
}];

class Demo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      xValue: ['jiangsu', 'nanjing', 'zhonghuamen'],
      testValue: 1,
    };
  }

  render() {
    return (
      <div className="demo-wrap">
        <CascadeSelect
          defaultValue={['alibaba', 'platform', 'fe']}
          options={options}
          clearable
          disabled
          onChange={(value, selected) => console.log(value, selected)}
        />
      </div>
    );
  }
}

ReactDOM.render(
  <Demo />
, document.getElementById('components-cascade-select-demo-disable'));

Props

Name	Type	Required	Default	Comments
prefixCls	string	false	`'kuma-cascader'`	默认的类名前缀
className	string	false	`''`	自定义类名
options	array	false	`[]`	选项数据源，格式可见下方Demo
value	array	false	`null`	可由外部控制的值
defaultValue	array	false	`[]`	初始默认值
placeholder	string	false	`'Please Select'` or `'请选择'`	placeholder
onChange	function	false	`function(value, selectedOptions)`	选择完成后回调
disabled	boolean	false	`false`	是否禁用
clearable	boolean	false	`false`	是否支持清除
changeOnSelect	boolean	false	`false`	是否将每次选择立刻显示在控件中
expandTrigger	string	false	`'click'`	次级菜单展开方式，支持 `click` 和 `hover`
beforeRender	function	false	`(value, selectedOptions) => selectedOptions.map(o => o && o.label).join(' / ')`	处理要显示的内容
cascadeSize	number	false	`3`	级联的层级数
getPopupContainer	function():HTMLElement	false	-	返回一个 html 元素用作 Popup 面板的容器，默认是插在body 中的一个 div
locale	string	false	`'zh-cn'`	`'en-us'`
miniMode	boolean	false	true	是否是简洁显示风格
columnWidth	number	false	100	dropdown中每一列的宽度
displayMode	string	false	`dropdown`	`select` 或者 `dropdown`
getSelectPlaceholder	func	false	`function(idx){ return '请选择' }`	select显示模式下的placeholder生成函数
size	string	false	`large`	尺寸，枚举值：`large`, `middle`, `small`

Demos

props.options

const options = [{
  value: 'zhejiang',
  label: '浙江',
  children: [{
    value: 'hangzhou',
    label: '杭州',
    children: [{
      value: 'xihu',
      label: '西湖',
    }],
  }],
}, {
  value: 'jiangsu',
  label: '江苏',
  children: [{
    value: 'nanjing',
    label: '南京',
    children: [{
      value: 'zhonghuamen',
      label: '中华门',
    }],
  }],
}];

.kuma-cascader-submenu-empty,
.kuma-dropdown-menu-submenu {
    width: 400px; // 你想要的 dropdown 宽度
}

组件演示

Props

Demos

props.options

当不指定 dropdown 宽度时，还可以使用css来定制dropdown宽度