UNPKG

@uiw/doc

Version:

UIW documentation website.

2 lines 41.1 kB
(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[8586],{4934:e=>{function t(e){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}t.keys=()=>[],t.resolve=t,t.id=4934,e.exports=t},5301:(e,t,n)=>{"use strict";n.d(t,{Z:()=>s});var l=n(8573),r=n(6320),o=n(8563),a=n(7622),u=n(7937);const i={docinfo:"index_docinfo__3Vx8S",markdown:"index_markdown__hcQCp",markdownWrap:"index_markdownWrap__t60jR"};var c=n(4760);function _(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const{path:t}=e,n=/^http/.test(t||"")?t:"https://github.com/uiwjs/uiw/blob/master/".concat(t);return(0,c.jsxs)("div",{className:i.docinfo,children:["\u72af\u4e86\u9519\u8bef\u8fd8\u662f\u60f3\u5bf9\u6587\u4ef6\u505a\u51fa\u8d21\u732e\uff1f",n&&(0,c.jsx)("a",{href:n,target:"_blank",rel:"noopener noreferrer",children:"\u5728Github\u4e0a\u7f16\u8f91\u672c\u9875\uff01"}),(0,c.jsx)("br",{}),(0,c.jsx)("a",{href:"https://github.com/uiwjs/uiw/issues",target:"_blank",rel:"noopener noreferrer",children:"\u53cd\u9988\u5efa\u8bae"}),(0,c.jsx)(u.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw/issues/new",children:"\u63d0\u4ea4bug"}),(0,c.jsx)(u.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw",children:"Github"}),(0,c.jsx)(u.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt",children:"kkt"}),(0,c.jsx)(u.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt-ssr",children:"@kkt/ssr"}),(0,c.jsx)(u.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"http://uiw.gitee.io",children:"\u56fd\u5185\u955c\u50cf"})]})}const f=r.ZP.Preview,p=r.ZP.Code,d=r.ZP.Toolbar,m=e=>{var t,n;let{node:a,components:u,data:i,..._}=e;const m=(0,l.useRef)(null),{headings:s,headingsList:w,...O}=_;(0,l.useEffect)((()=>{if(m.current){const e=m.current.parentElement;e&&e.parentElement&&e.parentElement.replaceChild(m.current,e)}}),[m]);const v=null===a||void 0===a||null===(t=a.position)||void 0===t?void 0:t.start.line,S=null===a||void 0===a||null===(n=a.data)||void 0===n?void 0:n.meta,E=(0,o.Mx)(S)||String(v),b=u["".concat(E)];if(E&&"function"===typeof b){const e=i[E].value||"",t=(0,o.aE)(S||"");return(0,c.jsxs)(r.ZP,{ref:m,children:[(0,c.jsx)(f,{style:{background:t.bg||"transparent"},children:(0,c.jsx)(b,{})}),(0,c.jsx)(d,{text:e,children:t.title||"Example"}),(0,c.jsx)(p,{children:(0,c.jsx)("pre",{...O})})]})}return(0,c.jsx)("code",{...O})};function s(e){return(0,c.jsxs)(l.Fragment,{children:[(0,c.jsx)(a.Z,{className:i.markdownWrap,source:e.source||"",disableCopy:!0,wrapperElement:{"data-color-mode":"light"},components:{code:t=>(0,c.jsx)(m,{...e,...t})}}),(0,c.jsx)(_,{path:e.path})]})}},5462:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>a});const l={components:{21:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},l=n(7937);return function(){return t.default.createElement(l.Row,null,t.default.createElement(l.Col,{fixed:!0},t.default.createElement(l.Select,{defaultValue:"w"},t.default.createElement(l.Select.Option,{value:"w"},"Choose an item..."),t.default.createElement(l.Select.Option,{value:"1"},"One"),t.default.createElement(l.Select.Option,{value:"2"},"Two"),t.default.createElement(l.Select.Option,{value:"3"},"Three"),t.default.createElement(l.Select.Option,{value:"4"},"Four"))))}}(),45:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},l=n(7937);return function(){return t.default.createElement(l.Row,null,t.default.createElement(l.Col,{fixed:!0},t.default.createElement(l.Select,{disabled:!0,defaultValue:"3"},t.default.createElement(l.Select.Option,{value:"w"},"Choose an item..."),t.default.createElement(l.Select.Option,{value:"1"},"One"),t.default.createElement(l.Select.Option,{value:"2"},"Two"),t.default.createElement(l.Select.Option,{value:"3"},"Three"),t.default.createElement(l.Select.Option,{value:"4"},"Four"))))}}(),71:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},l=n(7937);var r={marginBottom:10};return function(){return t.default.createElement("div",null,t.default.createElement(l.Row,{gutter:10},t.default.createElement(l.Col,{fixed:!0},t.default.createElement(l.Select,{size:"small",disabled:!0,defaultValue:"3",style:r},t.default.createElement(l.Select.Option,{value:"w"},"Choose an item..."),t.default.createElement(l.Select.Option,{value:"1"},"One"),t.default.createElement(l.Select.Option,{value:"2"},"Two"),t.default.createElement(l.Select.Option,{value:"3"},"Three"),t.default.createElement(l.Select.Option,{value:"4"},"Four"))),t.default.createElement(l.Col,{fixed:!0},t.default.createElement(l.Button,{size:"small"},"\u5c0f\u5c3a\u5bf8"))),t.default.createElement(l.Row,{gutter:10,style:r},t.default.createElement(l.Col,{fixed:!0},t.default.createElement(l.Select,{defaultValue:"3"},t.default.createElement(l.Select.Option,{value:"w"},"Choose an item..."),t.default.createElement(l.Select.Option,{value:"1"},"One"),t.default.createElement(l.Select.Option,{value:"2"},"Two"),t.default.createElement(l.Select.Option,{value:"3"},"Three"),t.default.createElement(l.Select.Option,{value:"4"},"Four"))),t.default.createElement(l.Col,{fixed:!0},t.default.createElement(l.Button,{size:"default"},"\u9ed8\u8ba4\u5c3a\u5bf8"))),t.default.createElement(l.Row,{gutter:10},t.default.createElement(l.Col,{fixed:!0},t.default.createElement(l.Select,{size:"large",defaultValue:"3"},t.default.createElement(l.Select.Option,{value:"w"},"Choose an item..."),t.default.createElement(l.Select.Option,{value:"1"},"One"),t.default.createElement(l.Select.Option,{value:"2"},"Two"),t.default.createElement(l.Select.Option,{value:"3"},"Three"),t.default.createElement(l.Select.Option,{value:"4"},"Four"))),t.default.createElement(l.Col,{fixed:!0},t.default.createElement(l.Button,{size:"large"},"\u5927\u5c3a\u5bf8"))))}}(),129:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},l=n(7937);var r=l.Select.Option,o=l.Select.Group;return function(){return t.default.createElement(l.Row,null,t.default.createElement(l.Col,{fixed:!0},t.default.createElement(l.Select,{defaultValue:"w"},t.default.createElement(r,{value:"w"},"Choose an item..."),t.default.createElement(o,{label:"Group 1"},t.default.createElement(r,{value:"1"},"One"),t.default.createElement(r,{value:"2"},"Two")),t.default.createElement(o,{label:"Group 2"},t.default.createElement(r,{value:"3"},"Three"),t.default.createElement(r,{value:"4"},"Four")))))}}(),161:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},l=n(7937);function r(e){return r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r(e)}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);t&&(l=l.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,l)}return n}function a(e,t,n){return(t=function(e){var t=function(e,t){if("object"!==r(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var l=n.call(e,t||"default");if("object"!==r(l))return l;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"===r(t)?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}return function(){return t.default.createElement("div",null,t.default.createElement(l.Form,{onSubmitError:function(e){return e.filed?function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({},e.filed):null},onSubmit:function(e){e.initial;var t=e.current,n={};if(t.selectField||(n.selectField="\u9ed8\u8ba4\u9700\u8981\u9009\u62e9\u5185\u5bb9\uff0c\u9009\u62e9\u5165\u5185\u5bb9"),Object.keys(n).length>0){var r=new Error;throw r.filed=n,l.Notify.error({title:"\u63d0\u4ea4\u5931\u8d25\uff01",description:"\u8bf7\u786e\u8ba4\u63d0\u4ea4\u8868\u5355\u662f\u5426\u6b63\u786e\uff01"}),r}l.Notify.success({title:"\u63d0\u4ea4\u6210\u529f\uff01",description:"\u8868\u5355\u63d0\u4ea4\u6210\u529f\uff0c\u9009\u62e9\u503c\u4e3a\uff1a".concat(t.selectField,"\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01")})},fields:{selectField:{children:t.default.createElement(l.Select,null,t.default.createElement(l.Select.Option,{value:"w"},"Choose an item..."),t.default.createElement(l.Select.Option,{value:"1"},"One"),t.default.createElement(l.Select.Option,{value:"2"},"Two"),t.default.createElement(l.Select.Option,{value:"3"},"Three"),t.default.createElement(l.Select.Option,{value:"4"},"Four"))}}},(function(e){var n=e.fields,r=e.state,o=e.canSubmit;return t.default.createElement("div",null,t.default.createElement(l.Row,null,t.default.createElement(l.Col,{fixed:!0},n.selectField)),t.default.createElement(l.Row,null,t.default.createElement(l.Col,{fixed:!0},t.default.createElement(l.Button,{disabled:!o(),type:"primary",htmlType:"submit"},"\u63d0\u4ea4"))),t.default.createElement(l.Row,null,t.default.createElement(l.Col,null,t.default.createElement("pre",{style:{padding:10,marginTop:10}},JSON.stringify(r.current,null,2)))))})))}}(),240:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},l=n(7937);return function(){return t.default.createElement(l.Row,{style:{backgroundColor:"#fff",margin:-15,padding:15,borderRadius:"5px 5px 0 0"},gutter:10},t.default.createElement(l.Col,{fixed:!0},t.default.createElement("select",{className:"w-select",defaultValue:"w"},t.default.createElement("option",{value:"w"},"Choose an item..."),t.default.createElement("option",{value:"1"},"One"),t.default.createElement("option",{value:"2"},"Two"),t.default.createElement("option",{value:"3"},"Three"),t.default.createElement("option",{value:"4"},"Four"))),t.default.createElement(l.Col,{fixed:!0},t.default.createElement("select",{disabled:!0,className:"w-select",defaultValue:"w"},t.default.createElement("option",{value:"w"},"Choose an item..."),t.default.createElement("option",{value:"1"},"One"),t.default.createElement("option",{value:"2"},"Two"),t.default.createElement("option",{value:"3"},"Three"),t.default.createElement("option",{value:"4"},"Four"))))}}()},data:{21:{name:21,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nreturn function Demo() {\n return /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n fixed: true\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Select, {\n defaultValue: "w"\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "w"\n }, "Choose an item..."), /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "1"\n }, "One"), /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "2"\n }, "Two"), /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "3"\n }, "Three"), /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "4"\n }, "Four"))));\n};',language:"jsx",value:'import React from \'react\';\nimport { Row, Col, Select } from \'uiw\';\n\nexport default function Demo() {\n return (\n <Row>\n <Col fixed>\n <Select defaultValue="w">\n <Select.Option value="w">Choose an item...</Select.Option>\n <Select.Option value="1">One</Select.Option>\n <Select.Option value="2">Two</Select.Option>\n <Select.Option value="3">Three</Select.Option>\n <Select.Option value="4">Four</Select.Option>\n </Select>\n </Col>\n </Row>\n );\n}'},45:{name:45,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nreturn function Demo() {\n return /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n fixed: true\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Select, {\n disabled: true,\n defaultValue: "3"\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "w"\n }, "Choose an item..."), /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "1"\n }, "One"), /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "2"\n }, "Two"), /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "3"\n }, "Three"), /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "4"\n }, "Four"))));\n};',language:"jsx",value:'import React from \'react\';\nimport { Row, Col, Select } from \'uiw\';\n\nexport default function Demo() {\n return (\n <Row>\n <Col fixed>\n <Select disabled defaultValue="3">\n <Select.Option value="w">Choose an item...</Select.Option>\n <Select.Option value="1">One</Select.Option>\n <Select.Option value="2">Two</Select.Option>\n <Select.Option value="3">Three</Select.Option>\n <Select.Option value="4">Four</Select.Option>\n </Select>\n </Col>\n </Row>\n );\n}'},71:{name:71,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nvar rowSty = {\n marginBottom: 10\n};\nreturn function Demo() {\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Row, {\n gutter: 10\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n fixed: true\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Select, {\n size: "small",\n disabled: true,\n defaultValue: "3",\n style: rowSty\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "w"\n }, "Choose an item..."), /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "1"\n }, "One"), /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "2"\n }, "Two"), /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "3"\n }, "Three"), /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "4"\n }, "Four"))), /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n fixed: true\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n size: "small"\n }, "\\u5C0F\\u5C3A\\u5BF8"))), /*#__PURE__*/_react["default"].createElement(_uiw.Row, {\n gutter: 10,\n style: rowSty\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n fixed: true\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Select, {\n defaultValue: "3"\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "w"\n }, "Choose an item..."), /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "1"\n }, "One"), /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "2"\n }, "Two"), /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "3"\n }, "Three"), /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "4"\n }, "Four"))), /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n fixed: true\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n size: "default"\n }, "\\u9ED8\\u8BA4\\u5C3A\\u5BF8"))), /*#__PURE__*/_react["default"].createElement(_uiw.Row, {\n gutter: 10\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n fixed: true\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Select, {\n size: "large",\n defaultValue: "3"\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "w"\n }, "Choose an item..."), /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "1"\n }, "One"), /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "2"\n }, "Two"), /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "3"\n }, "Three"), /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "4"\n }, "Four"))), /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n fixed: true\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n size: "large"\n }, "\\u5927\\u5C3A\\u5BF8"))));\n};',language:"jsx",value:'import React from \'react\';\nimport { Row, Col, Select, Button } from \'uiw\';\n\nconst rowSty = { marginBottom: 10 };\n\nexport default function Demo() {\n return (\n <div>\n <Row gutter={10}>\n <Col fixed>\n <Select size="small" disabled defaultValue="3" style={rowSty}>\n <Select.Option value="w">Choose an item...</Select.Option>\n <Select.Option value="1">One</Select.Option>\n <Select.Option value="2">Two</Select.Option>\n <Select.Option value="3">Three</Select.Option>\n <Select.Option value="4">Four</Select.Option>\n </Select>\n </Col>\n <Col fixed>\n <Button size="small">\u5c0f\u5c3a\u5bf8</Button>\n </Col>\n </Row>\n <Row gutter={10} style={rowSty}>\n <Col fixed>\n <Select defaultValue="3">\n <Select.Option value="w">Choose an item...</Select.Option>\n <Select.Option value="1">One</Select.Option>\n <Select.Option value="2">Two</Select.Option>\n <Select.Option value="3">Three</Select.Option>\n <Select.Option value="4">Four</Select.Option>\n </Select>\n </Col>\n <Col fixed>\n <Button size="default">\u9ed8\u8ba4\u5c3a\u5bf8</Button>\n </Col>\n </Row>\n <Row gutter={10}>\n <Col fixed>\n <Select size="large" defaultValue="3">\n <Select.Option value="w">Choose an item...</Select.Option>\n <Select.Option value="1">One</Select.Option>\n <Select.Option value="2">Two</Select.Option>\n <Select.Option value="3">Three</Select.Option>\n <Select.Option value="4">Four</Select.Option>\n </Select>\n </Col>\n <Col fixed>\n <Button size="large">\u5927\u5c3a\u5bf8</Button>\n </Col>\n </Row>\n </div>\n );\n}'},129:{name:129,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nvar Option = _uiw.Select.Option;\nvar Group = _uiw.Select.Group;\nreturn function Demo() {\n return /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n fixed: true\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Select, {\n defaultValue: "w"\n }, /*#__PURE__*/_react["default"].createElement(Option, {\n value: "w"\n }, "Choose an item..."), /*#__PURE__*/_react["default"].createElement(Group, {\n label: "Group 1"\n }, /*#__PURE__*/_react["default"].createElement(Option, {\n value: "1"\n }, "One"), /*#__PURE__*/_react["default"].createElement(Option, {\n value: "2"\n }, "Two")), /*#__PURE__*/_react["default"].createElement(Group, {\n label: "Group 2"\n }, /*#__PURE__*/_react["default"].createElement(Option, {\n value: "3"\n }, "Three"), /*#__PURE__*/_react["default"].createElement(Option, {\n value: "4"\n }, "Four")))));\n};',language:"jsx",value:'import React from \'react\';\nimport { Row, Col, Select } from \'uiw\';\n\nconst Option = Select.Option;\nconst Group = Select.Group;\n\nexport default function Demo() {\n return (\n <Row>\n <Col fixed>\n <Select defaultValue="w">\n <Option value="w">Choose an item...</Option>\n <Group label="Group 1">\n <Option value="1">One</Option>\n <Option value="2">Two</Option>\n </Group>\n <Group label="Group 2">\n <Option value="3">Three</Option>\n <Option value="4">Four</Option>\n </Group>\n </Select>\n </Col>\n </Row>\n );\n}'},161:{name:161,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }\nfunction ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }\nfunction _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }\nfunction _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\nfunction _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }\nfunction _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }\nreturn function Demo() {\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Form, {\n onSubmitError: function onSubmitError(error) {\n if (error.filed) {\n return _objectSpread({}, error.filed);\n }\n return null;\n },\n onSubmit: function onSubmit(_ref) {\n var initial = _ref.initial,\n current = _ref.current;\n var errorObj = {};\n if (!current.selectField) {\n errorObj.selectField = \'\u9ed8\u8ba4\u9700\u8981\u9009\u62e9\u5185\u5bb9\uff0c\u9009\u62e9\u5165\u5185\u5bb9\';\n }\n if (Object.keys(errorObj).length > 0) {\n var err = new Error();\n err.filed = errorObj;\n _uiw.Notify.error({\n title: \'\u63d0\u4ea4\u5931\u8d25\uff01\',\n description: \'\u8bf7\u786e\u8ba4\u63d0\u4ea4\u8868\u5355\u662f\u5426\u6b63\u786e\uff01\'\n });\n throw err;\n }\n _uiw.Notify.success({\n title: \'\u63d0\u4ea4\u6210\u529f\uff01\',\n description: "\\u8868\\u5355\\u63D0\\u4EA4\\u6210\\u529F\\uFF0C\\u9009\\u62E9\\u503C\\u4E3A\\uFF1A".concat(current.selectField, "\\uFF0C\\u5C06\\u81EA\\u52A8\\u586B\\u5145\\u521D\\u59CB\\u5316\\u503C\\uFF01")\n });\n },\n fields: {\n selectField: {\n children: /*#__PURE__*/_react["default"].createElement(_uiw.Select, null, /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "w"\n }, "Choose an item..."), /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "1"\n }, "One"), /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "2"\n }, "Two"), /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "3"\n }, "Three"), /*#__PURE__*/_react["default"].createElement(_uiw.Select.Option, {\n value: "4"\n }, "Four"))\n }\n }\n }, function (_ref2) {\n var fields = _ref2.fields,\n state = _ref2.state,\n canSubmit = _ref2.canSubmit;\n return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n fixed: true\n }, fields.selectField)), /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n fixed: true\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n disabled: !canSubmit(),\n type: "primary",\n htmlType: "submit"\n }, "\\u63D0\\u4EA4"))), /*#__PURE__*/_react["default"].createElement(_uiw.Row, null, /*#__PURE__*/_react["default"].createElement(_uiw.Col, null, /*#__PURE__*/_react["default"].createElement("pre", {\n style: {\n padding: 10,\n marginTop: 10\n }\n }, JSON.stringify(state.current, null, 2)))));\n }));\n};',language:"jsx",value:'import React from \'react\';\nimport { Form, Row, Col, Select, Button, Notify } from \'uiw\';\n\nexport default function Demo() {\n return (\n <div>\n <Form\n onSubmitError={(error) => {\n if (error.filed) {\n return { ...error.filed };\n }\n return null;\n }}\n onSubmit={({initial, current}) => {\n const errorObj = {};\n if (!current.selectField) {\n errorObj.selectField = \'\u9ed8\u8ba4\u9700\u8981\u9009\u62e9\u5185\u5bb9\uff0c\u9009\u62e9\u5165\u5185\u5bb9\';\n }\n if(Object.keys(errorObj).length > 0) {\n const err = new Error();\n err.filed = errorObj;\n Notify.error({ title: \'\u63d0\u4ea4\u5931\u8d25\uff01\', description: \'\u8bf7\u786e\u8ba4\u63d0\u4ea4\u8868\u5355\u662f\u5426\u6b63\u786e\uff01\' });\n throw err;\n }\n Notify.success({\n title: \'\u63d0\u4ea4\u6210\u529f\uff01\',\n description: `\u8868\u5355\u63d0\u4ea4\u6210\u529f\uff0c\u9009\u62e9\u503c\u4e3a\uff1a${current.selectField}\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01`,\n });\n }}\n fields={{\n selectField: {\n children: (\n <Select>\n <Select.Option value="w">Choose an item...</Select.Option>\n <Select.Option value="1">One</Select.Option>\n <Select.Option value="2">Two</Select.Option>\n <Select.Option value="3">Three</Select.Option>\n <Select.Option value="4">Four</Select.Option>\n </Select>\n )\n },\n }}\n >\n {({ fields, state, canSubmit }) => {\n return (\n <div>\n <Row>\n <Col fixed>{fields.selectField}</Col>\n </Row>\n <Row>\n <Col fixed>\n <Button disabled={!canSubmit()} type="primary" htmlType="submit">\u63d0\u4ea4</Button>\n </Col>\n </Row>\n <Row>\n <Col>\n <pre style={{ padding: 10, marginTop: 10 }}>\n {JSON.stringify(state.current, null, 2)}\n </pre>\n </Col>\n </Row>\n </div>\n )\n }}\n </Form>\n </div>\n )\n}'},240:{name:240,meta:{bg:"#fff"},code:'"use strict";\n\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nreturn function Demo() {\n return /*#__PURE__*/_react["default"].createElement(_uiw.Row, {\n style: {\n backgroundColor: \'#fff\',\n margin: -15,\n padding: 15,\n borderRadius: \'5px 5px 0 0\'\n },\n gutter: 10\n }, /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n fixed: true\n }, /*#__PURE__*/_react["default"].createElement("select", {\n className: "w-select",\n defaultValue: "w"\n }, /*#__PURE__*/_react["default"].createElement("option", {\n value: "w"\n }, "Choose an item..."), /*#__PURE__*/_react["default"].createElement("option", {\n value: "1"\n }, "One"), /*#__PURE__*/_react["default"].createElement("option", {\n value: "2"\n }, "Two"), /*#__PURE__*/_react["default"].createElement("option", {\n value: "3"\n }, "Three"), /*#__PURE__*/_react["default"].createElement("option", {\n value: "4"\n }, "Four"))), /*#__PURE__*/_react["default"].createElement(_uiw.Col, {\n fixed: true\n }, /*#__PURE__*/_react["default"].createElement("select", {\n disabled: true,\n className: "w-select",\n defaultValue: "w"\n }, /*#__PURE__*/_react["default"].createElement("option", {\n value: "w"\n }, "Choose an item..."), /*#__PURE__*/_react["default"].createElement("option", {\n value: "1"\n }, "One"), /*#__PURE__*/_react["default"].createElement("option", {\n value: "2"\n }, "Two"), /*#__PURE__*/_react["default"].createElement("option", {\n value: "3"\n }, "Three"), /*#__PURE__*/_react["default"].createElement("option", {\n value: "4"\n }, "Four"))));\n};',language:"jsx",value:'import React from \'react\';\nimport { Row, Col, Select } from \'uiw\';\n\nexport default function Demo() {\n return (\n <Row style={{ backgroundColor: \'#fff\', margin: -15, padding: 15, borderRadius: \'5px 5px 0 0\' }} gutter={10}>\n <Col fixed>\n <select className="w-select" defaultValue="w">\n <option value="w">Choose an item...</option>\n <option value="1">One</option>\n <option value="2">Two</option>\n <option value="3">Three</option>\n <option value="4">Four</option>\n </select>\n </Col>\n <Col fixed>\n <select disabled className="w-select" defaultValue="w">\n <option value="w">Choose an item...</option>\n <option value="1">One</option>\n <option value="2">Two</option>\n <option value="3">Three</option>\n <option value="4">Four</option>\n </select>\n </Col>\n </Row>\n );\n}'}},source:'Select \u9009\u62e9\u5668\n===\n\n[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-select/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-select.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-select)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-select.svg?label=@uiw/react-select)](https://npmjs.com/@uiw/react-select)\n\n\u5f53\u9009\u9879\u8fc7\u591a\u65f6\uff0c\u4f7f\u7528\u4e0b\u62c9\u83dc\u5355\u5c55\u793a\u5e76\u9009\u62e9\u5185\u5bb9\u3002\n\n```jsx\nimport { Select } from \'uiw\';\n// or\nimport Select from \'@uiw/react-select\';\n```\n\n### \u57fa\u7840\u7528\u6cd5\n\n\u9002\u7528\u5e7f\u6cdb\u7684\u57fa\u7840\u5355\u9009 `value` \u7684\u503c\u4e3a\u5f53\u524d\u88ab\u9009\u4e2d\u7684 `Option` \u7684 `value` \u5c5e\u6027\u503c\u3002\u81ea\u5b9a\u4e49 `Select` \u8bf7\u67e5\u770b [`<Dropdown />`](#/components/dropdown) \u7ec4\u4ef6\u5b9e\u4f8b\u3002\n\n```jsx mdx:preview&bg=#fff\nimport React from \'react\';\nimport { Row, Col, Select } from \'uiw\';\n\nexport default function Demo() {\n return (\n <Row>\n <Col fixed>\n <Select defaultValue="w">\n <Select.Option value="w">Choose an item...</Select.Option>\n <Select.Option value="1">One</Select.Option>\n <Select.Option value="2">Two</Select.Option>\n <Select.Option value="3">Three</Select.Option>\n <Select.Option value="4">Four</Select.Option>\n </Select>\n </Col>\n </Row>\n );\n}\n```\n\n\n### \u7981\u7528\u9009\u62e9\u5668\n\n```jsx mdx:preview&bg=#fff\nimport React from \'react\';\nimport { Row, Col, Select } from \'uiw\';\n\nexport default function Demo() {\n return (\n <Row>\n <Col fixed>\n <Select disabled defaultValue="3">\n <Select.Option value="w">Choose an item...</Select.Option>\n <Select.Option value="1">One</Select.Option>\n <Select.Option value="2">Two</Select.Option>\n <Select.Option value="3">Three</Select.Option>\n <Select.Option value="4">Four</Select.Option>\n </Select>\n </Col>\n </Row>\n );\n}\n```\n\n\n### \u5c3a\u5bf8\n\n\u901a\u8fc7 `size` \u5c5e\u6027\u8bbe\u7f6e\u9009\u62e9\u5668\u7684\u5c3a\u5bf8\uff0c\u63d0\u4f9b\u4e09\u4e2a\u5c3a\u5bf8\u53c2\u6570\u8bbe\u7f6e\u3002\n\n```jsx mdx:preview&bg=#fff\nimport React from \'react\';\nimport { Row, Col, Select, Button } from \'uiw\';\n\nconst rowSty = { marginBottom: 10 };\n\nexport default function Demo() {\n return (\n <div>\n <Row gutter={10}>\n <Col fixed>\n <Select size="small" disabled defaultValue="3" style={rowSty}>\n <Select.Option value="w">Choose an item...</Select.Option>\n <Select.Option value="1">One</Select.Option>\n <Select.Option value="2">Two</Select.Option>\n <Select.Option value="3">Three</Select.Option>\n <Select.Option value="4">Four</Select.Option>\n </Select>\n </Col>\n <Col fixed>\n <Button size="small">\u5c0f\u5c3a\u5bf8</Button>\n </Col>\n </Row>\n <Row gutter={10} style={rowSty}>\n <Col fixed>\n <Select defaultValue="3">\n <Select.Option value="w">Choose an item...</Select.Option>\n <Select.Option value="1">One</Select.Option>\n <Select.Option value="2">Two</Select.Option>\n <Select.Option value="3">Three</Select.Option>\n <Select.Option value="4">Four</Select.Option>\n </Select>\n </Col>\n <Col fixed>\n <Button size="default">\u9ed8\u8ba4\u5c3a\u5bf8</Button>\n </Col>\n </Row>\n <Row gutter={10}>\n <Col fixed>\n <Select size="large" defaultValue="3">\n <Select.Option value="w">Choose an item...</Select.Option>\n <Select.Option value="1">One</Select.Option>\n <Select.Option value="2">Two</Select.Option>\n <Select.Option value="3">Three</Select.Option>\n <Select.Option value="4">Four</Select.Option>\n </Select>\n </Col>\n <Col fixed>\n <Button size="large">\u5927\u5c3a\u5bf8</Button>\n </Col>\n </Row>\n </div>\n );\n}\n```\n\n### \u9009\u9879\u7ec4\n\n```jsx mdx:preview&bg=#fff\nimport React from \'react\';\nimport { Row, Col, Select } from \'uiw\';\n\nconst Option = Select.Option;\nconst Group = Select.Group;\n\nexport default function Demo() {\n return (\n <Row>\n <Col fixed>\n <Select defaultValue="w">\n <Option value="w">Choose an item...</Option>\n <Group label="Group 1">\n <Option value="1">One</Option>\n <Option value="2">Two</Option>\n </Group>\n <Group label="Group 2">\n <Option value="3">Three</Option>\n <Option value="4">Four</Option>\n </Group>\n </Select>\n </Col>\n </Row>\n );\n}\n```\n\n### \u5728\u8868\u5355\u4e2d\u4f7f\u7528\n\n\u5728 [`<Form />`](#/components/form) \u8868\u5355\u4e2d\u5e94\u7528 [`<Select />`](#/components/select) \u7ec4\u4ef6\n\n```jsx mdx:preview&bg=#fff\nimport React from \'react\';\nimport { Form, Row, Col, Select, Button, Notify } from \'uiw\';\n\nexport default function Demo() {\n return (\n <div>\n <Form\n onSubmitError={(error) => {\n if (error.filed) {\n return { ...error.filed };\n }\n return null;\n }}\n onSubmit={({initial, current}) => {\n const errorObj = {};\n if (!current.selectField) {\n errorObj.selectField = \'\u9ed8\u8ba4\u9700\u8981\u9009\u62e9\u5185\u5bb9\uff0c\u9009\u62e9\u5165\u5185\u5bb9\';\n }\n if(Object.keys(errorObj).length > 0) {\n const err = new Error();\n err.filed = errorObj;\n Notify.error({ title: \'\u63d0\u4ea4\u5931\u8d25\uff01\', description: \'\u8bf7\u786e\u8ba4\u63d0\u4ea4\u8868\u5355\u662f\u5426\u6b63\u786e\uff01\' });\n throw err;\n }\n Notify.success({\n title: \'\u63d0\u4ea4\u6210\u529f\uff01\',\n description: `\u8868\u5355\u63d0\u4ea4\u6210\u529f\uff0c\u9009\u62e9\u503c\u4e3a\uff1a${current.selectField}\uff0c\u5c06\u81ea\u52a8\u586b\u5145\u521d\u59cb\u5316\u503c\uff01`,\n });\n }}\n fields={{\n selectField: {\n children: (\n <Select>\n <Select.Option value="w">Choose an item...</Select.Option>\n <Select.Option value="1">One</Select.Option>\n <Select.Option value="2">Two</Select.Option>\n <Select.Option value="3">Three</Select.Option>\n <Select.Option value="4">Four</Select.Option>\n </Select>\n )\n },\n }}\n >\n {({ fields, state, canSubmit }) => {\n return (\n <div>\n <Row>\n <Col fixed>{fields.selectField}</Col>\n </Row>\n <Row>\n <Col fixed>\n <Button disabled={!canSubmit()} type="primary" htmlType="submit">\u63d0\u4ea4</Button>\n </Col>\n </Row>\n <Row>\n <Col>\n <pre style={{ padding: 10, marginTop: 10 }}>\n {JSON.stringify(state.current, null, 2)}\n </pre>\n </Col>\n </Row>\n </div>\n )\n }}\n </Form>\n </div>\n )\n}\n```\n\n### HTML select\n\n\u8fd9\u4e2a\u7ec4\u4ef6\u662f\u6700\u7b80\u5355\u7684\u57fa\u7840\u6837\u5f0f\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u76f4\u63a5\u5f15\u7528\u6837\u5f0f\uff0c\u4f7f\u7528 `w-select` \u7eaf\u6837\u5f0f\u5373\u53ef\u8fbe\u5230\u6548\u679c\uff0c\u4e0b\u62c9\u6846\u53f3\u8fb9\u7bad\u5934\u6548\u679c\u901a\u8fc7\u6837\u5f0f\u66f4\u6539\uff0c\u901a\u8fc7 [`b64`](http://b64.io/) \u5de5\u5177\uff0c\u8f6c\u6362\u6210 `base64` \u683c\u5f0f\u3002\n\n```jsx\nimport \'uiw/lib/esm/select/style/index.less\';\n```\n\n```jsx mdx:preview&bg=#fff\nimport React from \'react\';\nimport { Row, Col, Select } from \'uiw\';\n\nexport default function Demo() {\n return (\n <Row style={{ backgroundColor: \'#fff\', margin: -15, padding: 15, borderRadius: \'5px 5px 0 0\' }} gutter={10}>\n <Col fixed>\n <select className="w-select" defaultValue="w">\n <option value="w">Choose an item...</option>\n <option value="1">One</option>\n <option value="2">Two</option>\n <option value="3">Three</option>\n <option value="4">Four</option>\n </select>\n </Col>\n <Col fixed>\n <select disabled className="w-select" defaultValue="w">\n <option value="w">Choose an item...</option>\n <option value="1">One</option>\n <option value="2">Two</option>\n <option value="3">Three</option>\n <option value="4">Four</option>\n </select>\n </Col>\n </Row>\n );\n}\n```\n\n## Select\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| value | \u63a7\u5236\u65f6 `select` \u7684\u503c\u5fc5\u987b\u4e0e `onChange` \u51fd\u6570\u4e00\u8d77\u4f7f\u7528\u624d\u80fd\u66f4\u65b0 `select` \u7684\u503c | Any | - |\n| disabled | \u7981\u7528\u9009\u62e9\u5668 | Boolean | `false` |\n| defaultValue | \u6839\u636e `value` \u8fdb\u884c\u6bd4\u8f83\uff0c\u5224\u65ad\u662f\u5426\u9009\u4e2d | Any | - |\n| size | \u9009\u62e9\u6846\u5c3a\u5bf8 | Enum {`large`, `default`, `small` } | `default` |\n',headings:[],headingsList:[]};var r=n(5301),o=n(4760);function a(){return(0,o.jsx)(r.Z,{...l,path:"https://github.com/uiwjs/uiw/tree/master/packages/react-select/README.md"})}}}]); //# sourceMappingURL=8586.3948c5ab.chunk.js.map