组件演示

[{"title":"基本使用","id":"components-select2-demo-basic","tags":[],"filepath":"site/components/select2/demo/basic.md","directory":"components/select2/demo","filename":"basic","meta":{"title":"基本使用","description":"\n<p>基本使用。</p>\n","order":"0","filepath":"site/components/select2/demo/basic.md","filename":"basic","directory":"components/select2/demo","id":"components-select2-demo-basic","template":"demos","html":"<script>(function(){\"use strict\";\n\nvar _uxcore = require(\"uxcore\");\n\nvar Option = _uxcore.Select.Option;\n\nReactDOM.render(React.createElement(\n _uxcore.Select,\n { defaultValue: \"lucy\", style: { width: 200 }, dropdownClassName: \"kuma-select2-selected-has-icon\" },\n React.createElement(\n Option,\n { value: \"jack\" },\n \"Jack\"\n ),\n React.createElement(\n Option,\n { value: \"lucy\" },\n \"Lucy\"\n ),\n React.createElement(\n Option,\n { value: \"disabled\", disabled: true },\n \"Disabled\"\n ),\n React.createElement(\n Option,\n { value: \"yiminghe\" },\n \"yiminghe\"\n )\n), document.getElementById('components-select2-demo-basic'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Select } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">const</span> Option = Select.Option;\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Select</span> <span class=\"hljs-attribute\">defaultValue</span>=<span class=\"hljs-value\">\"lucy\"</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">width:</span> <span class=\"hljs-attribute\">200</span> }} <span class=\"hljs-attribute\">dropdownClassName</span>=<span class=\"hljs-value\">\"kuma-select2-selected-has-icon\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Option</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"jack\"</span>&gt;</span>Jack<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Option</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Option</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"lucy\"</span>&gt;</span>Lucy<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Option</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Option</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"disabled\"</span> <span class=\"hljs-attribute\">disabled</span>&gt;</span>Disabled<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Option</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Option</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"yiminghe\"</span>&gt;</span>yiminghe<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Option</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Select</span>&gt;</span>\n, document.getElementById('components-select2-demo-basic'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"尺寸","id":"components-select2-demo-size","tags":[],"filepath":"site/components/select2/demo/size.md","directory":"components/select2/demo","filename":"size","meta":{"title":"尺寸","description":"\n<p>提供 large、middle、small 三种尺寸</p>\n","order":"1","filepath":"site/components/select2/demo/size.md","filename":"size","directory":"components/select2/demo","id":"components-select2-demo-size","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcore = require('uxcore');\n\nvar Option = _uxcore.Select.Option;\n\nfunction handleChange(value) {\n console.log('selected ' + value);\n}\n\nvar select = React.createElement(\n _uxcore.Select,\n { defaultValue: 'lucy', showSearch: false, style: { width: 200, display: 'block', marginBottom: '4px' }, onChange: handleChange, dropdownClassName: 'kuma-select2-selected-has-icon' },\n React.createElement(\n Option,\n { value: 'jack' },\n 'jack'\n ),\n React.createElement(\n Option,\n { value: 'lucy' },\n 'lucy'\n ),\n React.createElement(\n Option,\n { value: 'disabled', disabled: true },\n 'disabled'\n ),\n React.createElement(\n Option,\n { value: 'yiminghe' },\n 'yiminghe'\n )\n);\n\nReactDOM.render(React.createElement(\n 'div',\n null,\n ['large', 'middle', 'small'].map(function (size) {\n return React.cloneElement(select, {\n size: size\n });\n })\n), document.getElementById('components-select2-demo-size'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Select } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">const</span> Option = Select.Option;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> <span class=\"hljs-title\">handleChange</span>(<span class=\"hljs-params\">value</span>) </span>{\n <span class=\"hljs-built_in\">console</span>.log(<span class=\"hljs-string\">`selected <span class=\"hljs-subst\">${value}</span>`</span>);\n}\n\n<span class=\"hljs-keyword\">const</span> select = (\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Select</span> <span class=\"hljs-attribute\">defaultValue</span>=<span class=\"hljs-value\">\"lucy\"</span> <span class=\"hljs-attribute\">showSearch</span>=<span class=\"hljs-value\">{false}</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">width:</span> <span class=\"hljs-attribute\">200</span>, <span class=\"hljs-attribute\">display:</span> '<span class=\"hljs-attribute\">block</span>', <span class=\"hljs-attribute\">marginBottom:</span> '<span class=\"hljs-attribute\">4px</span>' }} <span class=\"hljs-attribute\">onChange</span>=<span class=\"hljs-value\">{handleChange}</span> <span class=\"hljs-attribute\">dropdownClassName</span>=<span class=\"hljs-value\">\"kuma-select2-selected-has-icon\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Option</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"jack\"</span>&gt;</span>jack<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Option</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Option</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"lucy\"</span>&gt;</span>lucy<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Option</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Option</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"disabled\"</span> <span class=\"hljs-attribute\">disabled</span>&gt;</span>disabled<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Option</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Option</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"yiminghe\"</span>&gt;</span>yiminghe<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Option</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Select</span>&gt;</span>\n)</span>;\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">div</span>&gt;</span>\n {['large', 'middle', 'small'].map(size =&gt; React.cloneElement(select, {\n size,\n }))}\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n, document.getElementById('components-select2-demo-size'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"不显示搜索框","id":"components-select2-demo-search","tags":[],"filepath":"site/components/select2/demo/search.md","directory":"components/select2/demo","filename":"search","meta":{"title":"不显示搜索框","description":"\n<p>当不需要搜索功能时,可以将 showSearch 置为 false</p>\n","order":"1","filepath":"site/components/select2/demo/search.md","filename":"search","directory":"components/select2/demo","id":"components-select2-demo-search","template":"demos","html":"<script>(function(){\"use strict\";\n\nvar _uxcore = require(\"uxcore\");\n\nvar Option = _uxcore.Select.Option;\n\nfunction handleChange(value) {\n console.log(\"selected \" + value);\n}\n\nReactDOM.render(React.createElement(\n _uxcore.Select,\n { defaultValue: \"lucy\", showSearch: false, style: { width: 200 }, onChange: handleChange, dropdownClassName: \"kuma-select2-selected-has-icon\" },\n React.createElement(\n Option,\n { value: \"jack\" },\n \"jack\"\n ),\n React.createElement(\n Option,\n { value: \"lucy\" },\n \"lucy\"\n ),\n React.createElement(\n Option,\n { value: \"disabled\", disabled: true },\n \"disabled\"\n ),\n React.createElement(\n Option,\n { value: \"yiminghe\" },\n \"yiminghe\"\n )\n), document.getElementById('components-select2-demo-search'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Select } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">const</span> Option = Select.Option;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> <span class=\"hljs-title\">handleChange</span>(<span class=\"hljs-params\">value</span>) </span>{\n <span class=\"hljs-built_in\">console</span>.log(<span class=\"hljs-string\">`selected <span class=\"hljs-subst\">${value}</span>`</span>);\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Select</span> <span class=\"hljs-attribute\">defaultValue</span>=<span class=\"hljs-value\">\"lucy\"</span> <span class=\"hljs-attribute\">showSearch</span>=<span class=\"hljs-value\">{false}</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">width:</span> <span class=\"hljs-attribute\">200</span> }} <span class=\"hljs-attribute\">onChange</span>=<span class=\"hljs-value\">{handleChange}</span> <span class=\"hljs-attribute\">dropdownClassName</span>=<span class=\"hljs-value\">\"kuma-select2-selected-has-icon\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Option</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"jack\"</span>&gt;</span>jack<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Option</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Option</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"lucy\"</span>&gt;</span>lucy<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Option</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Option</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"disabled\"</span> <span class=\"hljs-attribute\">disabled</span>&gt;</span>disabled<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Option</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Option</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"yiminghe\"</span>&gt;</span>yiminghe<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Option</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Select</span>&gt;</span>\n, document.getElementById('components-select2-demo-search'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"多选","id":"components-select2-demo-multiple","tags":[],"filepath":"site/components/select2/demo/multiple.md","directory":"components/select2/demo","filename":"multiple","meta":{"title":"多选","description":"\n<p>多选,从已有条目中选择(scroll the menu)</p>\n","order":"2","filepath":"site/components/select2/demo/multiple.md","filename":"multiple","directory":"components/select2/demo","id":"components-select2-demo-multiple","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcore = require('uxcore');\n\nvar Option = _uxcore.Select.Option;\n\nvar children = [];\nfor (var i = 10; i < 36; i++) {\n children.push(React.createElement(\n Option,\n { key: i.toString(36) + i },\n i.toString(36) + i\n ));\n}\n\nfunction handleChange(value) {\n console.log('selected ' + value);\n}\n\nReactDOM.render(React.createElement(\n _uxcore.Select,\n { multiple: true,\n style: { width: 400 },\n dropdownClassName: 'kuma-select2-selected-has-icon',\n defaultValue: ['a10', 'c12'], onChange: handleChange\n },\n children\n), document.getElementById('components-select2-demo-multiple'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Select } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">const</span> Option = Select.Option;\n\n<span class=\"hljs-keyword\">const</span> children = [];\n<span class=\"hljs-keyword\">for</span> (<span class=\"hljs-keyword\">let</span> i = <span class=\"hljs-number\">10</span>; i &lt; <span class=\"hljs-number\">36</span>; i++) {\n children.push(<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Option</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{i.toString(36)</span> + <span class=\"hljs-attribute\">i</span>}&gt;</span>{i.toString(36) + i}<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Option</span>&gt;</span>)</span>;\n}\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> <span class=\"hljs-title\">handleChange</span>(<span class=\"hljs-params\">value</span>) </span>{\n <span class=\"hljs-built_in\">console</span>.log(<span class=\"hljs-string\">`selected <span class=\"hljs-subst\">${value}</span>`</span>);\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Select</span> <span class=\"hljs-attribute\">multiple</span>\n <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">width:</span> <span class=\"hljs-attribute\">400</span> }}\n <span class=\"hljs-attribute\">dropdownClassName</span>=<span class=\"hljs-value\">\"kuma-select2-selected-has-icon\"</span>\n <span class=\"hljs-attribute\">defaultValue</span>=<span class=\"hljs-value\">{['a10',</span> '<span class=\"hljs-attribute\">c12</span>']} <span class=\"hljs-attribute\">onChange</span>=<span class=\"hljs-value\">{handleChange}</span>\n &gt;</span>\n {children}\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Select</span>&gt;</span>\n, document.getElementById('components-select2-demo-multiple'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"多选 - 单行展示","id":"components-select2-demo-multiple-singleline","tags":[],"filepath":"site/components/select2/demo/multiple-singleline.md","directory":"components/select2/demo","filename":"multiple-singleline","meta":{"title":"多选 - 单行展示","description":"\n<p>在少数情况下,可能不希望多选框展开,这时可以使用样式覆盖。<br>我们不推荐这种交互形式,因为选择区域的收缩,可能会损失一些功能。</p>\n","order":"3","filepath":"site/components/select2/demo/multiple-singleline.md","filename":"multiple-singleline","directory":"components/select2/demo","id":"components-select2-demo-multiple-singleline","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\nvar _classnames = require('classnames');\n\nvar _classnames2 = _interopRequireDefault(_classnames);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\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 Option = _uxcore.Select.Option;\n;\n\nvar children = [];\nfor (var i = 10; i < 36; i++) {\n children.push(React.createElement(\n Option,\n { key: i.toString(36) + i },\n i.toString(36) + i\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 value: ['a10', 'c12']\n };\n return _this;\n }\n\n _createClass(Demo, [{\n key: 'handleChange',\n value: function handleChange(value) {\n this.setState({\n value: value\n });\n }\n }, {\n key: 'render',\n value: function render() {\n return React.createElement(\n _uxcore.Select,\n { multiple: true,\n dropdownClassName: 'kuma-select2-selected-has-icon',\n className: (0, _classnames2.default)({\n 'single-line': this.state.value.length > 6\n }),\n style: { width: 400 },\n value: this.state.value, onChange: this.handleChange.bind(this)\n },\n children\n );\n }\n }]);\n\n return Demo;\n}(React.Component);\n\nReactDOM.render(React.createElement(Demo, null), document.getElementById('components-select2-demo-multiple-singleline'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Select } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">const</span> Option = Select.Option;\n<span class=\"hljs-keyword\">import</span> classnames <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'classnames'</span>;;\n\n<span class=\"hljs-keyword\">const</span> children = [];\n<span class=\"hljs-keyword\">for</span> (<span class=\"hljs-keyword\">let</span> i = <span class=\"hljs-number\">10</span>; i &lt; <span class=\"hljs-number\">36</span>; i++) {\n children.push(<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Option</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{i.toString(36)</span> + <span class=\"hljs-attribute\">i</span>}&gt;</span>{i.toString(36) + i}<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Option</span>&gt;</span>)</span>;\n}\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 constructor(props) {\n <span class=\"hljs-keyword\">super</span>(props);\n <span class=\"hljs-keyword\">this</span>.state = {\n value: [<span class=\"hljs-string\">'a10'</span>, <span class=\"hljs-string\">'c12'</span>],\n };\n }\n\n handleChange(value) {\n <span class=\"hljs-keyword\">this</span>.setState({\n value,\n });\n }\n\n render() {\n <span class=\"hljs-keyword\">return</span> (<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Select</span> <span class=\"hljs-attribute\">multiple</span>\n <span class=\"hljs-attribute\">dropdownClassName</span>=<span class=\"hljs-value\">\"kuma-select2-selected-has-icon\"</span>\n <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">{classnames({</span>\n '<span class=\"hljs-attribute\">single-line</span>'<span class=\"hljs-attribute\">:</span> <span class=\"hljs-attribute\">this.state.value.length</span> &gt;</span> 6,\n })}\n style={{ width: 400 }}\n value={this.state.value} onChange={this.handleChange.bind(this)}\n &gt;\n {children}\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Select</span>&gt;</span>)</span>;\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-select2-demo-multiple-singleline'));</span></code></pre></div><style type=\"text/css\">.single-line .kuma-select2-selection--multiple {\n position: relative;\n overflow: hidden;\n}\n\n.single-line .kuma-select2-selection--multiple .kuma-select2-selection__rendered {\n position: absolute;\n right: 20px;\n white-space: nowrap;\n}\n\n.single-line .kuma-select2-selection--multiple .kuma-select2-selection__rendered .kuma-select2-selection__choice {\n float: none;\n display: inline-block;\n}\n.single-line .kuma-select2-selection--multiple .kuma-select2-selection__rendered .kuma-select2-search--inline {\n float: none;\n display: inline-block;\n vertical-align: top\n}</style><div class=\"highlight\"><pre><code class=\"css\"><span class=\"hljs-class\">.single-line</span> <span class=\"hljs-class\">.kuma-select2-selection--multiple</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">position</span>:<span class=\"hljs-value\"> relative</span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">overflow</span>:<span class=\"hljs-value\"> hidden</span></span>;\n}</span>\n\n<span class=\"hljs-class\">.single-line</span> <span class=\"hljs-class\">.kuma-select2-selection--multiple</span> <span class=\"hljs-class\">.kuma-select2-selection__rendered</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">position</span>:<span class=\"hljs-value\"> absolute</span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">right</span>:<span class=\"hljs-value\"> <span class=\"hljs-number\">20px</span></span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">white-space</span>:<span class=\"hljs-value\"> nowrap</span></span>;\n}</span>\n\n<span class=\"hljs-class\">.single-line</span> <span class=\"hljs-class\">.kuma-select2-selection--multiple</span> <span class=\"hljs-class\">.kuma-select2-selection__rendered</span> <span class=\"hljs-class\">.kuma-select2-selection__choice</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">float</span>:<span class=\"hljs-value\"> none</span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">display</span>:<span class=\"hljs-value\"> inline-block</span></span>;\n}</span>\n<span class=\"hljs-class\">.single-line</span> <span class=\"hljs-class\">.kuma-select2-selection--multiple</span> <span class=\"hljs-class\">.kuma-select2-selection__rendered</span> <span class=\"hljs-class\">.kuma-select2-search--inline</span> <span class=\"hljs-rules\">{\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">float</span>:<span class=\"hljs-value\"> none</span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">display</span>:<span class=\"hljs-value\"> inline-block</span></span>;\n <span class=\"hljs-rule\"><span class=\"hljs-attribute\">vertical-align</span>:<span class=\"hljs-value\"> top\n</span></span></span>}</code></pre></div>"},"status":"public","toc":""},{"title":"标签","id":"components-select2-demo-tags","tags":[],"filepath":"site/components/select2/demo/tags.md","directory":"components/select2/demo","filename":"tags","meta":{"title":"标签","description":"\n<p>这种模式下可以让输入的值成为一个选项。</p>\n","order":"4","filepath":"site/components/select2/demo/tags.md","filename":"tags","directory":"components/select2/demo","id":"components-select2-demo-tags","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcore = require('uxcore');\n\nvar Option = _uxcore.Select.Option;\n\nvar children = [];\nfor (var i = 10; i < 36; i++) {\n children.push(React.createElement(\n Option,\n { key: i.toString(36) + i },\n i.toString(36) + i\n ));\n}\n\nfunction handleChange(value) {\n console.log('selected ' + value);\n}\n\nReactDOM.render(React.createElement(\n _uxcore.Select,\n {\n dropdownClassName: 'kuma-select2-selected-has-icon',\n style: { width: 400 },\n tags: true, defaultValue: ['name2', 'name3'], onChange: handleChange\n },\n children\n), document.getElementById('components-select2-demo-tags'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Select } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">const</span> Option = Select.Option;\n\n<span class=\"hljs-keyword\">const</span> children = [];\n<span class=\"hljs-keyword\">for</span> (<span class=\"hljs-keyword\">let</span> i = <span class=\"hljs-number\">10</span>; i &lt; <span class=\"hljs-number\">36</span>; i++) {\n children.push(<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Option</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{i.toString(36)</span> + <span class=\"hljs-attribute\">i</span>}&gt;</span>{i.toString(36) + i}<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Option</span>&gt;</span>)</span>;\n}\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> <span class=\"hljs-title\">handleChange</span>(<span class=\"hljs-params\">value</span>) </span>{\n <span class=\"hljs-built_in\">console</span>.log(<span class=\"hljs-string\">`selected <span class=\"hljs-subst\">${value}</span>`</span>);\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Select</span>\n <span class=\"hljs-attribute\">dropdownClassName</span>=<span class=\"hljs-value\">\"kuma-select2-selected-has-icon\"</span>\n <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">width:</span> <span class=\"hljs-attribute\">400</span> }}\n <span class=\"hljs-attribute\">tags</span> <span class=\"hljs-attribute\">defaultValue</span>=<span class=\"hljs-value\">{['name2',</span> '<span class=\"hljs-attribute\">name3</span>']} <span class=\"hljs-attribute\">onChange</span>=<span class=\"hljs-value\">{handleChange}</span>\n &gt;</span>\n {children}\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Select</span>&gt;</span>\n, document.getElementById('components-select2-demo-tags'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"智能提示","id":"components-select2-demo-combobox","tags":[],"filepath":"site/components/select2/demo/combobox.md","directory":"components/select2/demo","filename":"combobox","meta":{"title":"智能提示","description":"\n<p>输入框自动完成功能,下面是一个账号注册表单的例子。<br>同时这也是一个应用 combobox 模式的例子,除了提示的内容也可以将自己的输入作为选择,通常用于搜索。</p>\n","order":"5","filepath":"site/components/select2/demo/combobox.md","filename":"combobox","directory":"components/select2/demo","id":"components-select2-demo-combobox","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcore = require('uxcore');\n\nvar Option = _uxcore.Select.Option;\n\nvar Test = React.createClass({\n displayName: 'Test',\n getInitialState: function getInitialState() {\n return {\n options: []\n };\n },\n handleChange: function handleChange(value) {\n var options = void 0;\n if (!value || value.indexOf('@') >= 0) {\n options = [];\n } else {\n options = ['gmail.com', '163.com', 'qq.com'].map(function (domain) {\n var email = value + '@' + domain;\n return React.createElement(\n Option,\n { key: email },\n email\n );\n });\n }\n this.setState({\n options: options,\n value: value\n });\n },\n render: function render() {\n return React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Select,\n {\n combobox: true,\n dropdownClassName: 'kuma-select2-selected-has-icon',\n style: { width: 200 },\n onChange: this.handleChange,\n searchPlaceholder: '\\u8BF7\\u8F93\\u5165\\u8D26\\u6237\\u540D'\n },\n this.state.options\n ),\n React.createElement(\n 'span',\n { style: { marginLeft: '8px' } },\n '\\u9009\\u4E2D\\u7684\\u503C\\uFF1A',\n this.state.value\n )\n );\n }\n});\n\nReactDOM.render(React.createElement(Test, null), document.getElementById('components-select2-demo-combobox'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Select } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">const</span> Option = Select.Option;\n\n<span class=\"hljs-keyword\">const</span> Test = React.createClass({\n getInitialState() {\n <span class=\"hljs-keyword\">return</span> {\n options: [],\n };\n },\n handleChange(value) {\n <span class=\"hljs-keyword\">let</span> options;\n <span class=\"hljs-keyword\">if</span> (!value || value.indexOf(<span class=\"hljs-string\">'@'</span>) &gt;= <span class=\"hljs-number\">0</span>) {\n options = [];\n } <span class=\"hljs-keyword\">else</span> {\n options = [<span class=\"hljs-string\">'gmail.com'</span>, <span class=\"hljs-string\">'163.com'</span>, <span class=\"hljs-string\">'qq.com'</span>].map((domain) =&gt; {\n <span class=\"hljs-keyword\">const</span> email = <span class=\"hljs-string\">`<span class=\"hljs-subst\">${value}</span>@<span class=\"hljs-subst\">${domain}</span>`</span>;\n <span class=\"hljs-keyword\">return</span> <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Option</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{email}</span>&gt;</span>{email}<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Option</span>&gt;</span>;</span>\n });\n }\n <span class=\"hljs-keyword\">this</span>.setState({\n options,\n value,\n });\n },\n render() {\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\">Select</span>\n <span class=\"hljs-attribute\">combobox</span>\n <span class=\"hljs-attribute\">dropdownClassName</span>=<span class=\"hljs-value\">\"kuma-select2-selected-has-icon\"</span>\n <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">width:</span> <span class=\"hljs-attribute\">200</span> }}\n <span class=\"hljs-attribute\">onChange</span>=<span class=\"hljs-value\">{this.handleChange}</span>\n <span class=\"hljs-attribute\">searchPlaceholder</span>=<span class=\"hljs-value\">\"请输入账户名\"</span>\n &gt;</span>\n {this.state.options}\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Select</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">span</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">marginLeft:</span> '<span class=\"hljs-attribute\">8px</span>' }}&gt;</span>选中的值:{this.state.value}<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">span</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>\n )</span>;\n },\n});\n\nReactDOM.render(<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Test</span> /&gt;</span>, document.getElementById('components-select2-demo-combobox'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"分组","id":"components-select2-demo-group","tags":[],"filepath":"site/components/select2/demo/group.md","directory":"components/select2/demo","filename":"group","meta":{"title":"分组","description":"\n<p>option分组</p>\n","order":"6","filepath":"site/components/select2/demo/group.md","filename":"group","directory":"components/select2/demo","id":"components-select2-demo-group","template":"demos","html":"<script>(function(){\"use strict\";\n\nvar _uxcore = require(\"uxcore\");\n\nvar Option = _uxcore.Select.Option,\n OptGroup = _uxcore.Select.OptGroup;\n\n\nfunction handleChange(value) {\n console.log(\"selected \" + value);\n}\n\nReactDOM.render(React.createElement(\n _uxcore.Select,\n { defaultValue: \"lucy\",\n style: { width: 200 },\n dropdownClassName: \"kuma-select2-selected-has-icon\",\n showSearch: false,\n onChange: handleChange\n },\n React.createElement(\n OptGroup,\n { label: \"Manager\" },\n React.createElement(\n Option,\n { value: \"jack\" },\n \"jack\"\n ),\n React.createElement(\n Option,\n { value: \"lucy\" },\n \"lucy\"\n )\n ),\n React.createElement(\n OptGroup,\n { label: \"Engineer\" },\n React.createElement(\n Option,\n { value: \"yiminghe\" },\n \"yiminghe\"\n )\n )\n), document.getElementById('components-select2-demo-group'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Select } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">const</span> { Option, OptGroup } = Select;\n\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> <span class=\"hljs-title\">handleChange</span>(<span class=\"hljs-params\">value</span>) </span>{\n <span class=\"hljs-built_in\">console</span>.log(<span class=\"hljs-string\">`selected <span class=\"hljs-subst\">${value}</span>`</span>);\n}\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Select</span> <span class=\"hljs-attribute\">defaultValue</span>=<span class=\"hljs-value\">\"lucy\"</span>\n <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">width:</span> <span class=\"hljs-attribute\">200</span> }}\n <span class=\"hljs-attribute\">dropdownClassName</span>=<span class=\"hljs-value\">\"kuma-select2-selected-has-icon\"</span>\n <span class=\"hljs-attribute\">showSearch</span>=<span class=\"hljs-value\">{false}</span>\n <span class=\"hljs-attribute\">onChange</span>=<span class=\"hljs-value\">{handleChange}</span>\n &gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">OptGroup</span> <span class=\"hljs-attribute\">label</span>=<span class=\"hljs-value\">\"Manager\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Option</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"jack\"</span>&gt;</span>jack<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Option</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Option</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"lucy\"</span>&gt;</span>lucy<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Option</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">OptGroup</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">OptGroup</span> <span class=\"hljs-attribute\">label</span>=<span class=\"hljs-value\">\"Engineer\"</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Option</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"yiminghe\"</span>&gt;</span>yiminghe<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Option</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">OptGroup</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Select</span>&gt;</span>, document.getElementById('components-select2-demo-group'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"联动","id":"components-select2-demo-coordinate","tags":[],"filepath":"site/components/select2/demo/coordinate.md","directory":"components/select2/demo","filename":"coordinate","meta":{"title":"联动","description":"\n<p>省市联动是典型的例子。</p>\n","order":"7","filepath":"site/components/select2/demo/coordinate.md","filename":"coordinate","directory":"components/select2/demo","id":"components-select2-demo-coordinate","template":"demos","html":"<script>(function(){'use strict';\n\nvar _uxcore = require('uxcore');\n\nvar Option = _uxcore.Select.Option;\n\n\nvar provinceData = ['浙江', '江苏'];\nvar cityData = {\n 浙江: ['杭州', '宁波', '温州'],\n 江苏: ['南京', '苏州', '镇江']\n};\n\nvar App = React.createClass({\n displayName: 'App',\n getInitialState: function getInitialState() {\n return {\n cities: cityData[provinceData[0]],\n secondCity: cityData[provinceData[0]][0]\n };\n },\n handleProvinceChange: function handleProvinceChange(value) {\n this.setState({\n cities: cityData[value],\n secondCity: cityData[value][0]\n });\n },\n onSecondCityChange: function onSecondCityChange(value) {\n this.setState({\n secondCity: value\n });\n },\n render: function render() {\n var provinceOptions = provinceData.map(function (province) {\n return React.createElement(\n Option,\n { key: province },\n province\n );\n });\n var cityOptions = this.state.cities.map(function (city) {\n return React.createElement(\n Option,\n { key: city },\n city\n );\n });\n return React.createElement(\n 'div',\n null,\n React.createElement(\n _uxcore.Select,\n { defaultValue: provinceData[0], style: { width: 150 }, onChange: this.handleProvinceChange, dropdownClassName: 'kuma-select2-selected-has-icon' },\n provinceOptions\n ),\n '\\xA0',\n React.createElement(\n _uxcore.Select,\n { value: this.state.secondCity, style: { width: 150 }, onChange: this.onSecondCityChange, dropdownClassName: 'kuma-select2-selected-has-icon' },\n cityOptions\n )\n );\n }\n});\n\nReactDOM.render(React.createElement(App, null), document.getElementById('components-select2-demo-coordinate'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Select } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">const</span> { Option } = Select;\n\n<span class=\"hljs-keyword\">const</span> provinceData = [<span class=\"hljs-string\">'浙江'</span>, <span class=\"hljs-string\">'江苏'</span>];\n<span class=\"hljs-keyword\">const</span> cityData = {\n 浙江: [<span class=\"hljs-string\">'杭州'</span>, <span class=\"hljs-string\">'宁波'</span>, <span class=\"hljs-string\">'温州'</span>],\n 江苏: [<span class=\"hljs-string\">'南京'</span>, <span class=\"hljs-string\">'苏州'</span>, <span class=\"hljs-string\">'镇江'</span>],\n};\n\n<span class=\"hljs-keyword\">const</span> App = React.createClass({\n getInitialState() {\n <span class=\"hljs-keyword\">return</span> {\n cities: cityData[provinceData[<span class=\"hljs-number\">0</span>]],\n secondCity: cityData[provinceData[<span class=\"hljs-number\">0</span>]][<span class=\"hljs-number\">0</span>],\n };\n },\n handleProvinceChange(value) {\n <span class=\"hljs-keyword\">this</span>.setState({\n cities: cityData[value],\n secondCity: cityData[value][<span class=\"hljs-number\">0</span>],\n });\n },\n onSecondCityChange(value) {\n <span class=\"hljs-keyword\">this</span>.setState({\n secondCity: value,\n });\n },\n render() {\n <span class=\"hljs-keyword\">const</span> provinceOptions = provinceData.map(province =&gt; <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Option</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{province}</span>&gt;</span>{province}<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Option</span>&gt;</span>)</span>;\n <span class=\"hljs-keyword\">const</span> cityOptions = <span class=\"hljs-keyword\">this</span>.state.cities.map(city =&gt; <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Option</span> <span class=\"hljs-attribute\">key</span>=<span class=\"hljs-value\">{city}</span>&gt;</span>{city}<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Option</span>&gt;</span>)</span>;\n <span class=\"hljs-keyword\">return</span> (<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\">Select</span> <span class=\"hljs-attribute\">defaultValue</span>=<span class=\"hljs-value\">{provinceData[0]}</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">width:</span> <span class=\"hljs-attribute\">150</span> }} <span class=\"hljs-attribute\">onChange</span>=<span class=\"hljs-value\">{this.handleProvinceChange}</span> <span class=\"hljs-attribute\">dropdownClassName</span>=<span class=\"hljs-value\">\"kuma-select2-selected-has-icon\"</span>&gt;</span>\n {provinceOptions}\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Select</span>&gt;</span>\n &amp;nbsp;\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Select</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">{this.state.secondCity}</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">width:</span> <span class=\"hljs-attribute\">150</span> }} <span class=\"hljs-attribute\">onChange</span>=<span class=\"hljs-value\">{this.onSecondCityChange}</span> <span class=\"hljs-attribute\">dropdownClassName</span>=<span class=\"hljs-value\">\"kuma-select2-selected-has-icon\"</span>&gt;</span>\n {cityOptions}\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Select</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">div</span>&gt;</span>)</span>;\n },\n});\n\nReactDOM.render(<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">App</span> /&gt;</span>, document.getElementById('components-select2-demo-coordinate'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"禁用","id":"components-select2-demo-disabled","tags":[],"filepath":"site/components/select2/demo/disabled.md","directory":"components/select2/demo","filename":"disabled","meta":{"title":"禁用","description":"\n<p>基本使用。</p>\n","order":"7","filepath":"site/components/select2/demo/disabled.md","filename":"disabled","directory":"components/select2/demo","id":"components-select2-demo-disabled","template":"demos","html":"<script>(function(){\"use strict\";\n\nvar _uxcore = require(\"uxcore\");\n\nvar Option = _uxcore.Select.Option;\n\nReactDOM.render(React.createElement(\n _uxcore.Select,\n { defaultValue: \"lucy\", style: { width: 200 }, dropdownClassName: \"kuma-select2-selected-has-icon\", disabled: true },\n React.createElement(\n Option,\n { value: \"jack\" },\n \"Jack\"\n ),\n React.createElement(\n Option,\n { value: \"lucy\" },\n \"Lucy\"\n ),\n React.createElement(\n Option,\n { value: \"disabled\", disabled: true },\n \"Disabled\"\n ),\n React.createElement(\n Option,\n { value: \"yiminghe\" },\n \"yiminghe\"\n )\n), document.getElementById('components-select2-demo-disabled'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Select } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">const</span> Option = Select.Option;\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Select</span> <span class=\"hljs-attribute\">defaultValue</span>=<span class=\"hljs-value\">\"lucy\"</span> <span class=\"hljs-attribute\">style</span>=<span class=\"hljs-value\">{{</span> <span class=\"hljs-attribute\">width:</span> <span class=\"hljs-attribute\">200</span> }} <span class=\"hljs-attribute\">dropdownClassName</span>=<span class=\"hljs-value\">\"kuma-select2-selected-has-icon\"</span> <span class=\"hljs-attribute\">disabled</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Option</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"jack\"</span>&gt;</span>Jack<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Option</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Option</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"lucy\"</span>&gt;</span>Lucy<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Option</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Option</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"disabled\"</span> <span class=\"hljs-attribute\">disabled</span>&gt;</span>Disabled<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Option</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Option</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"yiminghe\"</span>&gt;</span>yiminghe<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Option</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Select</span>&gt;</span>\n, document.getElementById('components-select2-demo-disabled'));</span></code></pre></div>"},"status":"public","toc":""},{"title":"不带边框选择","id":"components-select2-demo-inline","tags":[],"filepath":"site/components/select2/demo/inline.md","directory":"components/select2/demo","filename":"inline","meta":{"title":"不带边框选择","description":"\n<p>不带边框选择。</p>\n","order":"8","filepath":"site/components/select2/demo/inline.md","filename":"inline","directory":"components/select2/demo","id":"components-select2-demo-inline","template":"demos","html":"<script>(function(){\"use strict\";\n\nvar _uxcore = require(\"uxcore\");\n\nvar Option = _uxcore.Select.Option;\n\nReactDOM.render(React.createElement(\n _uxcore.Select,\n {\n className: \"kuma-select2-inline\",\n placeholder: \"\\u8BF7\\u9009\\u62E9\",\n showSearch: false,\n dropdownClassName: \"kuma-select2-inline-dropdown\"\n },\n React.createElement(\n Option,\n { value: \"jack\" },\n \"Jack\"\n ),\n React.createElement(\n Option,\n { value: \"lucy\" },\n \"Lucy\"\n ),\n React.createElement(\n Option,\n { value: \"disabled\", disabled: true },\n \"Disabled\"\n ),\n React.createElement(\n Option,\n { value: \"yiminghe\" },\n \"yiminghe\"\n )\n), document.getElementById('components-select2-demo-inline'));})()</script><div class=\"highlight\"><pre><code class=\"javascript\"><span class=\"hljs-keyword\">import</span> { Select } <span class=\"hljs-keyword\">from</span> <span class=\"hljs-string\">'uxcore'</span>;\n<span class=\"hljs-keyword\">const</span> Option = Select.Option;\n\nReactDOM.render(\n <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Select</span>\n <span class=\"hljs-attribute\">className</span>=<span class=\"hljs-value\">\"kuma-select2-inline\"</span>\n <span class=\"hljs-attribute\">placeholder</span>=<span class=\"hljs-value\">\"请选择\"</span>\n <span class=\"hljs-attribute\">showSearch</span>=<span class=\"hljs-value\">{false}</span>\n <span class=\"hljs-attribute\">dropdownClassName</span>=<span class=\"hljs-value\">\"kuma-select2-inline-dropdown\"</span>\n &gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Option</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"jack\"</span>&gt;</span>Jack<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Option</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Option</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"lucy\"</span>&gt;</span>Lucy<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Option</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Option</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"disabled\"</span> <span class=\"hljs-attribute\">disabled</span>&gt;</span>Disabled<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Option</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;<span class=\"hljs-title\">Option</span> <span class=\"hljs-attribute\">value</span>=<span class=\"hljs-value\">\"yiminghe\"</span>&gt;</span>yiminghe<span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Option</span>&gt;</span>\n <span class=\"hljs-tag\">&lt;/<span class=\"hljs-title\">Select</span>&gt;</span>\n, document.getElementById('components-select2-demo-inline'));</span></code></pre></div>"},"status":"public","toc":""}]

基本使用。

import { Select } from 'uxcore';
const Option = Select.Option;

ReactDOM.render(
  <Select defaultValue="lucy" style={{ width: 200 }} dropdownClassName="kuma-select2-selected-has-icon">
    <Option value="jack">Jack</Option>
    <Option value="lucy">Lucy</Option>
    <Option value="disabled" disabled>Disabled</Option>
    <Option value="yiminghe">yiminghe</Option>
  </Select>
, document.getElementById('components-select2-demo-basic'));

提供 large、middle、small 三种尺寸

import { Select } from 'uxcore';
const Option = Select.Option;

function handleChange(value) {
  console.log(`selected ${value}`);
}

const select = (
  <Select defaultValue="lucy" showSearch={false} style={{ width: 200, display: 'block', marginBottom: '4px' }} onChange={handleChange} dropdownClassName="kuma-select2-selected-has-icon">
    <Option value="jack">jack</Option>
    <Option value="lucy">lucy</Option>
    <Option value="disabled" disabled>disabled</Option>
    <Option value="yiminghe">yiminghe</Option>
  </Select>
);

ReactDOM.render(
  <div>
    {['large', 'middle', 'small'].map(size => React.cloneElement(select, {
      size,
    }))}
  </div>
, document.getElementById('components-select2-demo-size'));

多选,从已有条目中选择(scroll the menu)

import { Select } from 'uxcore';
const Option = Select.Option;

const children = [];
for (let i = 10; i < 36; i++) {
  children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}

function handleChange(value) {
  console.log(`selected ${value}`);
}

ReactDOM.render(
  <Select multiple
    style={{ width: 400 }}
    dropdownClassName="kuma-select2-selected-has-icon"
    defaultValue={['a10', 'c12']} onChange={handleChange}
  >
    {children}
  </Select>
, document.getElementById('components-select2-demo-multiple'));

在少数情况下,可能不希望多选框展开,这时可以使用样式覆盖。
我们不推荐这种交互形式,因为选择区域的收缩,可能会损失一些功能。

import { Select } from 'uxcore';
const Option = Select.Option;
import classnames from 'classnames';;

const children = [];
for (let i = 10; i < 36; i++) {
  children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ['a10', 'c12'],
    };
  }

  handleChange(value) {
    this.setState({
      value,
    });
  }

  render() {
    return (<Select multiple
      dropdownClassName="kuma-select2-selected-has-icon"
      className={classnames({
        'single-line': this.state.value.length > 6,
      })}
      style={{ width: 400 }}
      value={this.state.value} onChange={this.handleChange.bind(this)}
    >
      {children}
    </Select>);
  }
}
ReactDOM.render(
  <Demo />
, document.getElementById('components-select2-demo-multiple-singleline'));
.single-line .kuma-select2-selection--multiple {
    position: relative;
    overflow: hidden;
}

.single-line .kuma-select2-selection--multiple .kuma-select2-selection__rendered {
    position: absolute;
    right: 20px;
    white-space: nowrap;
}

.single-line .kuma-select2-selection--multiple .kuma-select2-selection__rendered .kuma-select2-selection__choice {
    float: none;
    display: inline-block;
}
.single-line .kuma-select2-selection--multiple .kuma-select2-selection__rendered .kuma-select2-search--inline {
    float: none;
    display: inline-block;
    vertical-align: top
}

这种模式下可以让输入的值成为一个选项。

import { Select } from 'uxcore';
const Option = Select.Option;

const children = [];
for (let i = 10; i < 36; i++) {
  children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}

function handleChange(value) {
  console.log(`selected ${value}`);
}

ReactDOM.render(
  <Select
    dropdownClassName="kuma-select2-selected-has-icon"
    style={{ width: 400 }}
    tags defaultValue={['name2', 'name3']} onChange={handleChange}
  >
    {children}
  </Select>
, document.getElementById('components-select2-demo-tags'));

输入框自动完成功能,下面是一个账号注册表单的例子。
同时这也是一个应用 combobox 模式的例子,除了提示的内容也可以将自己的输入作为选择,通常用于搜索。

import { Select } from 'uxcore';
const Option = Select.Option;

const Test = React.createClass({
  getInitialState() {
    return {
      options: [],
    };
  },
  handleChange(value) {
    let options;
    if (!value || value.indexOf('@') >= 0) {
      options = [];
    } else {
      options = ['gmail.com', '163.com', 'qq.com'].map((domain) => {
        const email = `${value}@${domain}`;
        return <Option key={email}>{email}</Option>;
      });
    }
    this.setState({
      options,
      value,
    });
  },
  render() {
    return (
      <div>
        <Select
          combobox
          dropdownClassName="kuma-select2-selected-has-icon"
          style={{ width: 200 }}
          onChange={this.handleChange}
          searchPlaceholder="请输入账户名"
        >
          {this.state.options}
        </Select>
        <span style={{ marginLeft: '8px' }}>选中的值:{this.state.value}</span>
      </div>
    );
  },
});

ReactDOM.render(<Test />, document.getElementById('components-select2-demo-combobox'));

option分组

import { Select } from 'uxcore';
const { Option, OptGroup } = Select;

function handleChange(value) {
  console.log(`selected ${value}`);
}

ReactDOM.render(
  <Select defaultValue="lucy"
    style={{ width: 200 }}
    dropdownClassName="kuma-select2-selected-has-icon"
    showSearch={false}
    onChange={handleChange}
  >
    <OptGroup label="Manager">
      <Option value="jack">jack</Option>
      <Option value="lucy">lucy</Option>
    </OptGroup>
    <OptGroup label="Engineer">
      <Option value="yiminghe">yiminghe</Option>
    </OptGroup>
  </Select>, document.getElementById('components-select2-demo-group'));

省市联动是典型的例子。

import { Select } from 'uxcore';
const { Option } = Select;

const provinceData = ['浙江', '江苏'];
const cityData = {
  浙江: ['杭州', '宁波', '温州'],
  江苏: ['南京', '苏州', '镇江'],
};

const App = React.createClass({
  getInitialState() {
    return {
      cities: cityData[provinceData[0]],
      secondCity: cityData[provinceData[0]][0],
    };
  },
  handleProvinceChange(value) {
    this.setState({
      cities: cityData[value],
      secondCity: cityData[value][0],
    });
  },
  onSecondCityChange(value) {
    this.setState({
      secondCity: value,
    });
  },
  render() {
    const provinceOptions = provinceData.map(province => <Option key={province}>{province}</Option>);
    const cityOptions = this.state.cities.map(city => <Option key={city}>{city}</Option>);
    return (<div>
      <Select defaultValue={provinceData[0]} style={{ width: 150 }} onChange={this.handleProvinceChange} dropdownClassName="kuma-select2-selected-has-icon">
        {provinceOptions}
      </Select>
      &nbsp;
      <Select value={this.state.secondCity} style={{ width: 150 }} onChange={this.onSecondCityChange} dropdownClassName="kuma-select2-selected-has-icon">
        {cityOptions}
      </Select>
    </div>);
  },
});

ReactDOM.render(<App />, document.getElementById('components-select2-demo-coordinate'));

基本使用。

import { Select } from 'uxcore';
const Option = Select.Option;

ReactDOM.render(
  <Select defaultValue="lucy" style={{ width: 200 }} dropdownClassName="kuma-select2-selected-has-icon" disabled>
    <Option value="jack">Jack</Option>
    <Option value="lucy">Lucy</Option>
    <Option value="disabled" disabled>Disabled</Option>
    <Option value="yiminghe">yiminghe</Option>
  </Select>
, document.getElementById('components-select2-demo-disabled'));

不带边框选择。

import { Select } from 'uxcore';
const Option = Select.Option;

ReactDOM.render(
  <Select
    className="kuma-select2-inline"
    placeholder="请选择"
    showSearch={false}
    dropdownClassName="kuma-select2-inline-dropdown"
  >
    <Option value="jack">Jack</Option>
    <Option value="lucy">Lucy</Option>
    <Option value="disabled" disabled>Disabled</Option>
    <Option value="yiminghe">yiminghe</Option>
  </Select>
, document.getElementById('components-select2-demo-inline'));

类似 Select2 的选择器。

何时使用

弹出一个下拉菜单给用户选择操作,用于代替原生的选择器,或者需要一个更优雅的多选器时。

<Select>
  <Option value="lucy">lucy</Option>
</Select>

Props

Select props

参数 说明 类型 默认值
value 指定当前选中的条目 string/Array
defaultValue 指定默认选中的条目 string/Array
multiple 支持多选 bool false
filterOption 是否根据输入结果过滤选项,默认是使用 optionFilterProp 对应的 Option 属性来过滤 bool/function(inputValue, Option) true
showSearch 是否在单选模式下显示搜索 bool true
tags 可以把随意输入的条目作为tag,输入项不需要与下拉选项匹配 bool false
onSelect 被选中时调用,参数为选中的option value值 function(value, option:Option)
onDeselect 取消选中时调用,参数为选中的option value值,仅在multiple或tags模式下生效 function(value)
onChange 选中option,或input的value变化(combobox模式下)时,调用此函数 function
onSearch 搜索框值发生变化时调用 function(key) noop
allowClear 显示清除按钮 false
placeholder 选择框默认文字 string
searchPlaceholder 搜索框默认文字 string
optionFilterProp 输入项过滤对应的 option 属性 string value
combobox 输入框自动提示模式 bool false
optionLabelProp 选择 Option 的哪个 prop 作为选择框中的显示。 string 'children'
getPopupContainer 弹出的菜单渲染在哪个容器中 function(trigger:Node):Node function(){return document.body;}
dropdownMatchSelectWidth dropdown 部分是否和 select 部分同宽 boolean true
dropdownClassName dropdown 部分的定制类名 string -
notFoundContent 未找到选项时的提示文案 string not found
size 尺寸,枚举值 large, small, middle string large

Option props

参数 说明 类型 默认值
disabled 是否禁用 Boolean false
key 如果react需要你设置此项,此项值与value的值相同,然后可以省略value设置 String
value 默认根据此属性值进行筛选 String -
title 如果你不满意自动生成的 title,你可以用这个 prop 来修改 String -

OptGroup props

参数 说明 类型 默认值
label 组名 String/React.Element
key String -