uxcore.js - React UI Component Set

组件演示

[{"title":"基本使用","id":"components-select2-demo-basic","tags":[],"filepath":"site/components/select2/demo/basic.md","directory":"components/select2/demo","filename":"basic","meta":{"title":"基本使用","description":"\n基本使用。\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\">import { Select } from 'uxcore';\nconst Option = Select.Option;\n\nReactDOM.render(\n <Select defaultValue=\"lucy\" style={{ width: 200 }} dropdownClassName=\"kuma-select2-selected-has-icon\">\n <Option value=\"jack\">Jack</Option>\n <Option value=\"lucy\">Lucy</Option>\n <Option value=\"disabled\" disabled>Disabled</Option>\n <Option value=\"yiminghe\">yiminghe</Option>\n </Select>\n, document.getElementById('components-select2-demo-basic'));</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提供 large、middle、small 三种尺寸\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\">import { Select } from 'uxcore';\nconst Option = Select.Option;\n\nfunction handleChange(value) {\n console.log(`selected ${value}`);\n}\n\nconst select = (\n <Select defaultValue=\"lucy\" showSearch={false} style={{ width: 200, display: 'block', marginBottom: '4px' }} onChange={handleChange} dropdownClassName=\"kuma-select2-selected-has-icon\">\n <Option value=\"jack\">jack</Option>\n <Option value=\"lucy\">lucy</Option>\n <Option value=\"disabled\" disabled>disabled</Option>\n <Option value=\"yiminghe\">yiminghe</Option>\n </Select>\n);\n\nReactDOM.render(\n <div>\n {['large', 'middle', 'small'].map(size => React.cloneElement(select, {\n size,\n }))}\n </div>\n, document.getElementById('components-select2-demo-size'));</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当不需要搜索功能时，可以将 showSearch 置为 false\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\">import { Select } from 'uxcore';\nconst Option = Select.Option;\n\nfunction handleChange(value) {\n console.log(`selected ${value}`);\n}\n\nReactDOM.render(\n <Select defaultValue=\"lucy\" showSearch={false} style={{ width: 200 }} onChange={handleChange} dropdownClassName=\"kuma-select2-selected-has-icon\">\n <Option value=\"jack\">jack</Option>\n <Option value=\"lucy\">lucy</Option>\n <Option value=\"disabled\" disabled>disabled</Option>\n <Option value=\"yiminghe\">yiminghe</Option>\n </Select>\n, document.getElementById('components-select2-demo-search'));</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多选，从已有条目中选择（scroll the menu）\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\">import { Select } from 'uxcore';\nconst Option = Select.Option;\n\nconst children = [];\nfor (let i = 10; i < 36; i++) {\n children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);\n}\n\nfunction handleChange(value) {\n console.log(`selected ${value}`);\n}\n\nReactDOM.render(\n <Select multiple\n style={{ width: 400 }}\n dropdownClassName=\"kuma-select2-selected-has-icon\"\n defaultValue={['a10', 'c12']} onChange={handleChange}\n >\n {children}\n </Select>\n, document.getElementById('components-select2-demo-multiple'));</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在少数情况下，可能不希望多选框展开，这时可以使用样式覆盖。 我们不推荐这种交互形式，因为选择区域的收缩，可能会损失一些功能。\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\">import { Select } from 'uxcore';\nconst Option = Select.Option;\nimport classnames from 'classnames';;\n\nconst children = [];\nfor (let i = 10; i < 36; i++) {\n children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);\n}\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: ['a10', 'c12'],\n };\n }\n\n handleChange(value) {\n this.setState({\n value,\n });\n }\n\n render() {\n return (<Select multiple\n dropdownClassName=\"kuma-select2-selected-has-icon\"\n className={classnames({\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 </Select>);\n }\n}\nReactDOM.render(\n <Demo />\n, document.getElementById('components-select2-demo-multiple-singleline'));</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\">.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}</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这种模式下可以让输入的值成为一个选项。\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\">import { Select } from 'uxcore';\nconst Option = Select.Option;\n\nconst children = [];\nfor (let i = 10; i < 36; i++) {\n children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);\n}\n\nfunction handleChange(value) {\n console.log(`selected ${value}`);\n}\n\nReactDOM.render(\n <Select\n dropdownClassName=\"kuma-select2-selected-has-icon\"\n style={{ width: 400 }}\n tags defaultValue={['name2', 'name3']} onChange={handleChange}\n >\n {children}\n </Select>\n, document.getElementById('components-select2-demo-tags'));</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输入框自动完成功能，下面是一个账号注册表单的例子。 同时这也是一个应用 combobox 模式的例子，除了提示的内容也可以将自己的输入作为选择，通常用于搜索。\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\">import { Select } from 'uxcore';\nconst Option = Select.Option;\n\nconst Test = React.createClass({\n getInitialState() {\n return {\n options: [],\n };\n },\n handleChange(value) {\n let options;\n if (!value || value.indexOf('@') >= 0) {\n options = [];\n } else {\n options = ['gmail.com', '163.com', 'qq.com'].map((domain) => {\n const email = `${value}@${domain}`;\n return <Option key={email}>{email}</Option>;\n });\n }\n this.setState({\n options,\n value,\n });\n },\n render() {\n return (\n <div>\n <Select\n combobox\n dropdownClassName=\"kuma-select2-selected-has-icon\"\n style={{ width: 200 }}\n onChange={this.handleChange}\n searchPlaceholder=\"请输入账户名\"\n >\n {this.state.options}\n </Select>\n <span style={{ marginLeft: '8px' }}>选中的值：{this.state.value}</span>\n </div>\n );\n },\n});\n\nReactDOM.render(<Test />, document.getElementById('components-select2-demo-combobox'));</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":"\noption分组\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\">import { Select } from 'uxcore';\nconst { Option, OptGroup } = Select;\n\nfunction handleChange(value) {\n console.log(`selected ${value}`);\n}\n\nReactDOM.render(\n <Select defaultValue=\"lucy\"\n style={{ width: 200 }}\n dropdownClassName=\"kuma-select2-selected-has-icon\"\n showSearch={false}\n onChange={handleChange}\n >\n <OptGroup label=\"Manager\">\n <Option value=\"jack\">jack</Option>\n <Option value=\"lucy\">lucy</Option>\n </OptGroup>\n <OptGroup label=\"Engineer\">\n <Option value=\"yiminghe\">yiminghe</Option>\n </OptGroup>\n </Select>, document.getElementById('components-select2-demo-group'));</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省市联动是典型的例子。\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\">import { Select } from 'uxcore';\nconst { Option } = Select;\n\nconst provinceData = ['浙江', '江苏'];\nconst cityData = {\n 浙江: ['杭州', '宁波', '温州'],\n 江苏: ['南京', '苏州', '镇江'],\n};\n\nconst App = React.createClass({\n getInitialState() {\n return {\n cities: cityData[provinceData[0]],\n secondCity: cityData[provinceData[0]][0],\n };\n },\n handleProvinceChange(value) {\n this.setState({\n cities: cityData[value],\n secondCity: cityData[value][0],\n });\n },\n onSecondCityChange(value) {\n this.setState({\n secondCity: value,\n });\n },\n render() {\n const provinceOptions = provinceData.map(province => <Option key={province}>{province}</Option>);\n const cityOptions = this.state.cities.map(city => <Option key={city}>{city}</Option>);\n return (<div>\n <Select defaultValue={provinceData[0]} style={{ width: 150 }} onChange={this.handleProvinceChange} dropdownClassName=\"kuma-select2-selected-has-icon\">\n {provinceOptions}\n </Select>\n &nbsp;\n <Select value={this.state.secondCity} style={{ width: 150 }} onChange={this.onSecondCityChange} dropdownClassName=\"kuma-select2-selected-has-icon\">\n {cityOptions}\n </Select>\n </div>);\n },\n});\n\nReactDOM.render(<App />, document.getElementById('components-select2-demo-coordinate'));</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基本使用。\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\">import { Select } from 'uxcore';\nconst Option = Select.Option;\n\nReactDOM.render(\n <Select defaultValue=\"lucy\" style={{ width: 200 }} dropdownClassName=\"kuma-select2-selected-has-icon\" disabled>\n <Option value=\"jack\">Jack</Option>\n <Option value=\"lucy\">Lucy</Option>\n <Option value=\"disabled\" disabled>Disabled</Option>\n <Option value=\"yiminghe\">yiminghe</Option>\n </Select>\n, document.getElementById('components-select2-demo-disabled'));</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不带边框选择。\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\">import { Select } from 'uxcore';\nconst Option = Select.Option;\n\nReactDOM.render(\n <Select\n className=\"kuma-select2-inline\"\n placeholder=\"请选择\"\n showSearch={false}\n dropdownClassName=\"kuma-select2-inline-dropdown\"\n >\n <Option value=\"jack\">Jack</Option>\n <Option value=\"lucy\">Lucy</Option>\n <Option value=\"disabled\" disabled>Disabled</Option>\n <Option value=\"yiminghe\">yiminghe</Option>\n </Select>\n, document.getElementById('components-select2-demo-inline'));</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'));

不显示搜索框

当不需要搜索功能时，可以将 showSearch 置为 false

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

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

ReactDOM.render(
  <Select defaultValue="lucy" showSearch={false} style={{ width: 200 }} 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>
, document.getElementById('components-select2-demo-search'));

多选

多选，从已有条目中选择（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
rcRef	对react-select的引用，方便直接调用rcSelect的API	function	(r) => {}

Option props

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

OptGroup props

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