@uiw/doc/web/static/js/3028.bb66791c.chunk.js

UIW documentation website.

(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3028],{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:()=>_});var r=n(8573),o=n(6320),u=n(8563),a=n(7622),i=n(7937);const l={docinfo:"index_docinfo__3Vx8S",markdown:"index_markdown__hcQCp",markdownWrap:"index_markdownWrap__t60jR"};var c=n(4760);function p(){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:l.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)(i.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)(i.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/uiwjs/uiw",children:"Github"}),(0,c.jsx)(i.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"https://github.com/kktjs/kkt",children:"kkt"}),(0,c.jsx)(i.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)(i.Divider,{type:"vertical"}),(0,c.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"http://uiw.gitee.io",children:"\u56fd\u5185\u955c\u50cf"})]})}const d=o.ZP.Preview,m=o.ZP.Code,s=o.ZP.Toolbar,f=e=>{var t,n;let{node:a,components:i,data:l,...p}=e;const f=(0,r.useRef)(null),{headings:_,headingsList:b,...v}=p;(0,r.useEffect)((()=>{if(f.current){const e=f.current.parentElement;e&&e.parentElement&&e.parentElement.replaceChild(f.current,e)}}),[f]);const g=null===a||void 0===a||null===(t=a.position)||void 0===t?void 0:t.start.line,y=null===a||void 0===a||null===(n=a.data)||void 0===n?void 0:n.meta,w=(0,u.Mx)(y)||String(g),E=i["".concat(w)];if(w&&"function"===typeof E){const e=l[w].value||"",t=(0,u.aE)(y||"");return(0,c.jsxs)(o.ZP,{ref:f,children:[(0,c.jsx)(d,{style:{background:t.bg||"transparent"},children:(0,c.jsx)(E,{})}),(0,c.jsx)(s,{text:e,children:t.title||"Example"}),(0,c.jsx)(m,{children:(0,c.jsx)("pre",{...v})})]})}return(0,c.jsx)("code",{...v})};function _(e){return(0,c.jsxs)(r.Fragment,{children:[(0,c.jsx)(a.Z,{className:l.markdownWrap,source:e.source||"",disableCopy:!0,wrapperElement:{"data-color-mode":"light"},components:{code:t=>(0,c.jsx)(f,{...e,...t})}}),(0,c.jsx)(p,{path:e.path})]})}},6053:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>a});const r={components:{19:function(){function e(t){return e="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},e(t)}var t,r=(t=n(8573))&&t.__esModule?t:{default:t},o=n(7937);function u(e,t){if(n=e,!(null!=(r=t)&&"undefined"!==typeof Symbol&&r[Symbol.hasInstance]?r[Symbol.hasInstance](n):n instanceof r))throw new TypeError("Cannot call a class as a function");var n,r}function a(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,i(r.key),r)}}function i(t){var n=function(t,n){if("object"!==e(t)||null===t)return t;var r=t[Symbol.toPrimitive];if(void 0!==r){var o=r.call(t,n||"default");if("object"!==e(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(t)}(t,"string");return"symbol"===e(n)?n:String(n)}function l(e,t){return l=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},l(e,t)}function c(t){var n=function(){if("undefined"===typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"===typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,o=p(t);if(n){var u=p(this).constructor;r=Reflect.construct(o,arguments,u)}else r=o.apply(this,arguments);return function(t,n){if(n&&("object"===e(n)||"function"===typeof n))return n;if(void 0!==n)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(t)}(this,r)}}function p(e){return p=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},p(e)}var d=r.default.createElement("div",null,r.default.createElement(o.Menu,{bordered:!0,style:{minWidth:120}},r.default.createElement(o.Menu.Item,{icon:"reload",text:"\u91cd\u65b0\u52a0\u8f7d"}),r.default.createElement(o.Menu.Item,{icon:"heart-on",text:"\u53e6\u5b58\u4e3a",active:!0}),r.default.createElement(o.Menu.Item,{icon:"appstore",text:"\u5e94\u7528\u5546\u57ce"}),r.default.createElement(o.Menu.Item,{icon:"bar-chart",text:"\u6708\u7edf\u8ba1\u62a5\u8868"}),r.default.createElement(o.Menu.Item,{icon:"setting",text:"\u504f\u597d\u8bbe\u7f6e"}))),m=function(e){!function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&l(e,t)}(m,e);var t,n,i,p=c(m);function m(){return u(this,m),p.apply(this,arguments)}return t=m,(n=[{key:"render",value:function(){return r.default.createElement("div",null,r.default.createElement(o.Dropdown,{menu:d},r.default.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"\u9f20\u6807\u7ecf\u8fc7\u51fa\u73b0\u83dc\u5355 ",r.default.createElement(o.Icon,{type:"down"}))),r.default.createElement(o.Dropdown,{trigger:"click",menu:d},r.default.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"\u70b9\u51fb\u6211\u51fa\u73b0\u4e0b\u62c9\u83dc\u5355 ",r.default.createElement(o.Icon,{type:"down"}))))}}])&&a(t.prototype,n),i&&a(t,i),Object.defineProperty(t,"prototype",{writable:!1}),m}(r.default.Component);return m}(),59:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},r=n(7937);var o=t.default.createElement("div",null,t.default.createElement(r.Menu,{bordered:!0,style:{maxWidth:200}},t.default.createElement(r.Menu.Item,{icon:"reload",text:"\u91cd\u65b0\u52a0\u8f7d"}),t.default.createElement(r.Menu.Divider,null),t.default.createElement(r.Menu.Item,{icon:"heart-on",text:"\u53e6\u5b58\u4e3a",active:!0}),t.default.createElement(r.Menu.Item,{icon:"appstore",text:"\u5e94\u7528\u5546\u57ce"}),t.default.createElement(r.Menu.Item,{icon:"bar-chart",text:"\u6708\u7edf\u8ba1\u62a5\u8868\u5bfc\u51fa"}),t.default.createElement(r.Menu.Item,{icon:"setting",text:"\u504f\u597d\u8bbe\u7f6e"})));return function(){return t.default.createElement("div",null,t.default.createElement(r.ButtonGroup,{style:{marginRight:5,display:"inline-block"}},t.default.createElement(r.Button,{disabled:!0,icon:"copy"},"\u70b9\u51fb\u53f3\u8fb9"),t.default.createElement(r.Dropdown,{disabled:!0,trigger:"click",placement:"bottomRight",menu:o},t.default.createElement(r.Button,{icon:"more"}))),t.default.createElement(r.Dropdown,{disabled:!0,menu:o},t.default.createElement(r.Button,{basic:!0,type:"link"}," (\u8d85\u8fde\u63a5\u6837\u5f0f)link ")),t.default.createElement(r.Dropdown,{disabled:!0,menu:o},t.default.createElement(r.Button,{type:"primary"},"\u4e3b\u8981\u6309\u94ae")),t.default.createElement(r.Dropdown,{disabled:!0,menu:o},t.default.createElement(r.Button,{type:"success"},"\u6210\u529f\u6309\u94ae")),t.default.createElement(r.Dropdown,{disabled:!0,menu:o},t.default.createElement(r.Button,{type:"warning"},"\u8b66\u544a\u6309\u94ae")),t.default.createElement(r.Dropdown,{disabled:!0,menu:o},t.default.createElement(r.Button,{type:"danger"},"\u9519\u8bef\u6309\u94ae")),t.default.createElement(r.Dropdown,{disabled:!0,menu:o},t.default.createElement(r.Button,{type:"light"},"\u4eae\u6309\u94ae")),t.default.createElement(r.Dropdown,{disabled:!0,menu:o},t.default.createElement(r.Button,{type:"dark"},"\u6697\u6309\u94ae")))}}(),113:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},r=n(7937);var o=t.default.createElement("div",null,t.default.createElement(r.Menu,{bordered:!0,style:{maxWidth:200}},t.default.createElement(r.Menu.Item,{icon:"reload",text:"\u91cd\u65b0\u52a0\u8f7d"}),t.default.createElement(r.Menu.Divider,null),t.default.createElement(r.Menu.Item,{icon:"heart-on",text:"\u53e6\u5b58\u4e3a",active:!0}),t.default.createElement(r.Menu.Item,{icon:"appstore",text:"\u5e94\u7528\u5546\u57ce"}),t.default.createElement(r.Menu.Item,{icon:"bar-chart",text:"\u6708\u7edf\u8ba1\u62a5\u8868\u5bfc\u51fa"}),t.default.createElement(r.Menu.Item,{icon:"setting",text:"\u504f\u597d\u8bbe\u7f6e"})));return function(){return t.default.createElement("div",null,t.default.createElement(r.ButtonGroup,{style:{marginRight:5,display:"inline-block"}},t.default.createElement(r.Button,{icon:"copy"},"top"),t.default.createElement(r.Dropdown,{trigger:"click",placement:"top",menu:o},t.default.createElement(r.Button,{icon:"more"}))),t.default.createElement(r.Dropdown,{menu:o,trigger:"click",placement:"topLeft"},t.default.createElement(r.Button,{type:"primary"},"topLeft")),t.default.createElement(r.Dropdown,{menu:o,trigger:"click",placement:"topRight"},t.default.createElement(r.Button,{type:"success"},"topRight")),t.default.createElement(r.Divider,null),t.default.createElement(r.Dropdown,{menu:o,trigger:"click",placement:"bottomRight"},t.default.createElement(r.Button,{type:"light"},"bottomRight")),t.default.createElement(r.Dropdown,{menu:o,trigger:"click",placement:"bottom"},t.default.createElement(r.Button,{type:"warning"},"bottom")),t.default.createElement(r.Dropdown,{menu:o,trigger:"click",placement:"bottomLeft"},t.default.createElement(r.Button,{type:"danger"},"bottomLeft")),t.default.createElement(r.Dropdown,{menu:o,trigger:"click",placement:"right"},t.default.createElement(r.Button,{type:"dark"},"right")))}}(),165:function(){var e,t=(e=n(8573))&&e.__esModule?e:{default:e},r=n(7937);function o(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,u,a,i=[],l=!0,c=!1;try{if(u=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=u.call(n)).done)&&(i.push(r.value),i.length!==t);l=!0);}catch(e){c=!0,o=e}finally{try{if(!l&&null!=n.return&&(a=n.return(),Object(a)!==a))return}finally{if(c)throw o}}return i}}(e,t)||function(e,t){if(!e)return;if("string"===typeof e)return u(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return u(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function a(e){var n=e.option,u=e.onChange,a=o(t.default.useState(!1),2),i=a[0],l=a[1],c=o(t.default.useState(e.value),2),p=c[0],d=c[1],m=n.find((function(e){return p===e.value}));return t.default.useEffect((function(){e.value!==p&&d(e.value)}),[e.value]),t.default.createElement(r.Dropdown,{trigger:"click",onVisibleChange:function(e){return l(e)},isOpen:i,menu:t.default.createElement("div",null,t.default.createElement(r.Menu,{bordered:!0,style:{minWidth:120}},n.map((function(e,n){var o=p===e.value;return t.default.createElement(r.Menu.Item,{key:n,active:o,text:e.label,onClick:function(t){d(e.value),l(!1),u&&u(e.value,t)}})}))))},t.default.createElement(r.Button,{type:"link"},m.label,t.default.createElement(r.Icon,{type:i?"up":"down"})))}var i=[{label:"\u5f80\u8fd4",value:1},{label:"\u5355\u7a0b",value:2},{label:"\u8054\u7a0b",value:3},{label:"Nomad",value:4}],l=[{label:"\u7ecf\u6d4e\u8231",value:1},{label:"\u8c6a\u534e\u7ecf\u6d4e\u8231",value:2},{label:"\u5546\u52a1\u8231",value:3},{label:"\u5934\u7b49\u8231",value:4}];return function(){return t.default.createElement("div",null,t.default.createElement(a,{option:i,value:1,onChange:function(e){console.log("item",e)}}),t.default.createElement(a,{option:l,value:2,onChange:function(e){console.log("item",e)}}))}}()},data:{19:{name:19,meta:{bg:"#fff"},code:'"use strict";\n\nfunction _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }\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); }\nvar _react = _interopRequireDefault(require("react"));\nvar _uiw = require("uiw");\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\nfunction _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }\nfunction _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, _toPropertyKey(descriptor.key), descriptor); } }\nfunction _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }\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); }\nfunction _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }\nfunction _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }\nfunction _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }\nfunction _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }\nfunction _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn\'t been initialised - super() hasn\'t been called"); } return self; }\nfunction _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }\nfunction _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }\nvar menu = /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Menu, {\n  bordered: true,\n  style: {\n    minWidth: 120\n  }\n}, /*#__PURE__*/_react["default"].createElement(_uiw.Menu.Item, {\n  icon: "reload",\n  text: "\\u91CD\\u65B0\\u52A0\\u8F7D"\n}), /*#__PURE__*/_react["default"].createElement(_uiw.Menu.Item, {\n  icon: "heart-on",\n  text: "\\u53E6\\u5B58\\u4E3A",\n  active: true\n}), /*#__PURE__*/_react["default"].createElement(_uiw.Menu.Item, {\n  icon: "appstore",\n  text: "\\u5E94\\u7528\\u5546\\u57CE"\n}), /*#__PURE__*/_react["default"].createElement(_uiw.Menu.Item, {\n  icon: "bar-chart",\n  text: "\\u6708\\u7EDF\\u8BA1\\u62A5\\u8868"\n}), /*#__PURE__*/_react["default"].createElement(_uiw.Menu.Item, {\n  icon: "setting",\n  text: "\\u504F\\u597D\\u8BBE\\u7F6E"\n})));\nvar Demo = /*#__PURE__*/function (_React$Component) {\n  _inherits(Demo, _React$Component);\n  var _super = _createSuper(Demo);\n  function Demo() {\n    _classCallCheck(this, Demo);\n    return _super.apply(this, arguments);\n  }\n  _createClass(Demo, [{\n    key: "render",\n    value: function render() {\n      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Dropdown, {\n        menu: menu\n      }, /*#__PURE__*/_react["default"].createElement("a", {\n        href: "#",\n        onClick: function onClick(e) {\n          return e.preventDefault();\n        }\n      }, "\\u9F20\\u6807\\u7ECF\\u8FC7\\u51FA\\u73B0\\u83DC\\u5355 ", /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n        type: "down"\n      }))), /*#__PURE__*/_react["default"].createElement(_uiw.Dropdown, {\n        trigger: "click",\n        menu: menu\n      }, /*#__PURE__*/_react["default"].createElement("a", {\n        href: "#",\n        onClick: function onClick(e) {\n          return e.preventDefault();\n        }\n      }, "\\u70B9\\u51FB\\u6211\\u51FA\\u73B0\\u4E0B\\u62C9\\u83DC\\u5355 ", /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n        type: "down"\n      }))));\n    }\n  }]);\n  return Demo;\n}(_react["default"].Component);\nreturn Demo;',language:"jsx",value:'import React from \'react\';\nimport { Dropdown, Menu, ButtonGroup, Button, Divider, Icon } from \'uiw\';\n\nconst menu = (\n  <div>\n    <Menu bordered style={{ minWidth: 120 }}>\n      <Menu.Item icon="reload" text="\u91cd\u65b0\u52a0\u8f7d" />\n      <Menu.Item icon="heart-on" text="\u53e6\u5b58\u4e3a" active />\n      <Menu.Item icon="appstore" text="\u5e94\u7528\u5546\u57ce" />\n      <Menu.Item icon="bar-chart" text="\u6708\u7edf\u8ba1\u62a5\u8868" />\n      <Menu.Item icon="setting" text="\u504f\u597d\u8bbe\u7f6e" />\n    </Menu>\n  </div>\n);\n\nclass Demo extends React.Component {\n  render() {\n    return (\n      <div>\n        <Dropdown menu={menu}>\n          <a href=\'#\' onClick={e => e.preventDefault()}>\n            \u9f20\u6807\u7ecf\u8fc7\u51fa\u73b0\u83dc\u5355 <Icon type="down" />\n          </a>\n        </Dropdown>\n        <Dropdown trigger="click" menu={menu}>\n          <a href=\'#\' onClick={e => e.preventDefault()}>\n            \u70b9\u51fb\u6211\u51fa\u73b0\u4e0b\u62c9\u83dc\u5355 <Icon type="down" />\n          </a>\n        </Dropdown>\n      </div>\n    )\n  }\n}\n\nexport default Demo;'},59:{name:59,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 menu = /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Menu, {\n  bordered: true,\n  style: {\n    maxWidth: 200\n  }\n}, /*#__PURE__*/_react["default"].createElement(_uiw.Menu.Item, {\n  icon: "reload",\n  text: "\\u91CD\\u65B0\\u52A0\\u8F7D"\n}), /*#__PURE__*/_react["default"].createElement(_uiw.Menu.Divider, null), /*#__PURE__*/_react["default"].createElement(_uiw.Menu.Item, {\n  icon: "heart-on",\n  text: "\\u53E6\\u5B58\\u4E3A",\n  active: true\n}), /*#__PURE__*/_react["default"].createElement(_uiw.Menu.Item, {\n  icon: "appstore",\n  text: "\\u5E94\\u7528\\u5546\\u57CE"\n}), /*#__PURE__*/_react["default"].createElement(_uiw.Menu.Item, {\n  icon: "bar-chart",\n  text: "\\u6708\\u7EDF\\u8BA1\\u62A5\\u8868\\u5BFC\\u51FA"\n}), /*#__PURE__*/_react["default"].createElement(_uiw.Menu.Item, {\n  icon: "setting",\n  text: "\\u504F\\u597D\\u8BBE\\u7F6E"\n})));\nreturn function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.ButtonGroup, {\n    style: {\n      marginRight: 5,\n      display: \'inline-block\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    disabled: true,\n    icon: "copy"\n  }, "\\u70B9\\u51FB\\u53F3\\u8FB9"), /*#__PURE__*/_react["default"].createElement(_uiw.Dropdown, {\n    disabled: true,\n    trigger: "click",\n    placement: "bottomRight",\n    menu: menu\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    icon: "more"\n  }))), /*#__PURE__*/_react["default"].createElement(_uiw.Dropdown, {\n    disabled: true,\n    menu: menu\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    basic: true,\n    type: "link"\n  }, " (\\u8D85\\u8FDE\\u63A5\\u6837\\u5F0F)link ")), /*#__PURE__*/_react["default"].createElement(_uiw.Dropdown, {\n    disabled: true,\n    menu: menu\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    type: "primary"\n  }, "\\u4E3B\\u8981\\u6309\\u94AE")), /*#__PURE__*/_react["default"].createElement(_uiw.Dropdown, {\n    disabled: true,\n    menu: menu\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    type: "success"\n  }, "\\u6210\\u529F\\u6309\\u94AE")), /*#__PURE__*/_react["default"].createElement(_uiw.Dropdown, {\n    disabled: true,\n    menu: menu\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    type: "warning"\n  }, "\\u8B66\\u544A\\u6309\\u94AE")), /*#__PURE__*/_react["default"].createElement(_uiw.Dropdown, {\n    disabled: true,\n    menu: menu\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    type: "danger"\n  }, "\\u9519\\u8BEF\\u6309\\u94AE")), /*#__PURE__*/_react["default"].createElement(_uiw.Dropdown, {\n    disabled: true,\n    menu: menu\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    type: "light"\n  }, "\\u4EAE\\u6309\\u94AE")), /*#__PURE__*/_react["default"].createElement(_uiw.Dropdown, {\n    disabled: true,\n    menu: menu\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    type: "dark"\n  }, "\\u6697\\u6309\\u94AE")));\n};',language:"jsx",value:'import React from \'react\';\nimport { Dropdown, Menu, ButtonGroup, Button } from \'uiw\';\n\nconst menu = (\n  <div>\n    <Menu bordered style={{ maxWidth: 200 }}>\n      <Menu.Item icon="reload" text="\u91cd\u65b0\u52a0\u8f7d" />\n      <Menu.Divider />\n      <Menu.Item icon="heart-on" text="\u53e6\u5b58\u4e3a" active />\n      <Menu.Item icon="appstore" text="\u5e94\u7528\u5546\u57ce" />\n      <Menu.Item icon="bar-chart" text="\u6708\u7edf\u8ba1\u62a5\u8868\u5bfc\u51fa" />\n      <Menu.Item icon="setting" text="\u504f\u597d\u8bbe\u7f6e" />\n    </Menu>\n  </div>\n);\n\nexport default function Demo() {\n  return(\n    <div>\n      <ButtonGroup style={{ marginRight: 5, display: \'inline-block\' }}>\n        <Button disabled icon="copy">\u70b9\u51fb\u53f3\u8fb9</Button>\n        <Dropdown disabled trigger="click" placement="bottomRight" menu={menu}>\n          <Button icon="more" />\n        </Dropdown>\n      </ButtonGroup>\n      <Dropdown disabled menu={menu}>\n        <Button basic type="link"> (\u8d85\u8fde\u63a5\u6837\u5f0f)link </Button>\n      </Dropdown>\n      <Dropdown disabled menu={menu}>\n        <Button type="primary">\u4e3b\u8981\u6309\u94ae</Button>\n      </Dropdown>\n      <Dropdown disabled menu={menu}>\n        <Button type="success">\u6210\u529f\u6309\u94ae</Button>\n      </Dropdown>\n      <Dropdown disabled menu={menu}>\n        <Button type="warning">\u8b66\u544a\u6309\u94ae</Button>\n      </Dropdown>\n      <Dropdown disabled menu={menu}>\n        <Button type="danger">\u9519\u8bef\u6309\u94ae</Button>\n      </Dropdown>\n      <Dropdown disabled menu={menu}>\n        <Button type="light">\u4eae\u6309\u94ae</Button>\n      </Dropdown>\n      <Dropdown disabled menu={menu}>\n        <Button type="dark">\u6697\u6309\u94ae</Button>\n      </Dropdown>\n    </div>\n  );\n}'},113:{name:113,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 menu = /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Menu, {\n  bordered: true,\n  style: {\n    maxWidth: 200\n  }\n}, /*#__PURE__*/_react["default"].createElement(_uiw.Menu.Item, {\n  icon: "reload",\n  text: "\\u91CD\\u65B0\\u52A0\\u8F7D"\n}), /*#__PURE__*/_react["default"].createElement(_uiw.Menu.Divider, null), /*#__PURE__*/_react["default"].createElement(_uiw.Menu.Item, {\n  icon: "heart-on",\n  text: "\\u53E6\\u5B58\\u4E3A",\n  active: true\n}), /*#__PURE__*/_react["default"].createElement(_uiw.Menu.Item, {\n  icon: "appstore",\n  text: "\\u5E94\\u7528\\u5546\\u57CE"\n}), /*#__PURE__*/_react["default"].createElement(_uiw.Menu.Item, {\n  icon: "bar-chart",\n  text: "\\u6708\\u7EDF\\u8BA1\\u62A5\\u8868\\u5BFC\\u51FA"\n}), /*#__PURE__*/_react["default"].createElement(_uiw.Menu.Item, {\n  icon: "setting",\n  text: "\\u504F\\u597D\\u8BBE\\u7F6E"\n})));\nreturn function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.ButtonGroup, {\n    style: {\n      marginRight: 5,\n      display: \'inline-block\'\n    }\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    icon: "copy"\n  }, "top"), /*#__PURE__*/_react["default"].createElement(_uiw.Dropdown, {\n    trigger: "click",\n    placement: "top",\n    menu: menu\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    icon: "more"\n  }))), /*#__PURE__*/_react["default"].createElement(_uiw.Dropdown, {\n    menu: menu,\n    trigger: "click",\n    placement: "topLeft"\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    type: "primary"\n  }, "topLeft")), /*#__PURE__*/_react["default"].createElement(_uiw.Dropdown, {\n    menu: menu,\n    trigger: "click",\n    placement: "topRight"\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    type: "success"\n  }, "topRight")), /*#__PURE__*/_react["default"].createElement(_uiw.Divider, null), /*#__PURE__*/_react["default"].createElement(_uiw.Dropdown, {\n    menu: menu,\n    trigger: "click",\n    placement: "bottomRight"\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    type: "light"\n  }, "bottomRight")), /*#__PURE__*/_react["default"].createElement(_uiw.Dropdown, {\n    menu: menu,\n    trigger: "click",\n    placement: "bottom"\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    type: "warning"\n  }, "bottom")), /*#__PURE__*/_react["default"].createElement(_uiw.Dropdown, {\n    menu: menu,\n    trigger: "click",\n    placement: "bottomLeft"\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    type: "danger"\n  }, "bottomLeft")), /*#__PURE__*/_react["default"].createElement(_uiw.Dropdown, {\n    menu: menu,\n    trigger: "click",\n    placement: "right"\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    type: "dark"\n  }, "right")));\n};',language:"jsx",value:'import React from \'react\';\nimport { Dropdown, Menu, Divider, ButtonGroup, Button } from \'uiw\';\n\nconst menu = (\n  <div>\n    <Menu bordered style={{ maxWidth: 200 }}>\n      <Menu.Item icon="reload" text="\u91cd\u65b0\u52a0\u8f7d" />\n      <Menu.Divider />\n      <Menu.Item icon="heart-on" text="\u53e6\u5b58\u4e3a" active />\n      <Menu.Item icon="appstore" text="\u5e94\u7528\u5546\u57ce" />\n      <Menu.Item icon="bar-chart" text="\u6708\u7edf\u8ba1\u62a5\u8868\u5bfc\u51fa" />\n      <Menu.Item icon="setting" text="\u504f\u597d\u8bbe\u7f6e" />\n    </Menu>\n  </div>\n);\n\nexport default function Demo() {\n  return(\n    <div>\n      <ButtonGroup style={{ marginRight: 5, display: \'inline-block\' }}>\n        <Button icon="copy">top</Button>\n        <Dropdown trigger="click" placement="top" menu={menu}>\n          <Button icon="more" />\n        </Dropdown>\n      </ButtonGroup>\n      <Dropdown menu={menu} trigger="click" placement="topLeft">\n        <Button type="primary">topLeft</Button>\n      </Dropdown>\n      <Dropdown menu={menu} trigger="click" placement="topRight">\n        <Button type="success">topRight</Button>\n      </Dropdown>\n      <Divider />\n      <Dropdown menu={menu} trigger="click" placement="bottomRight">\n        <Button type="light">bottomRight</Button>\n      </Dropdown>\n      <Dropdown menu={menu} trigger="click" placement="bottom">\n        <Button type="warning">bottom</Button>\n      </Dropdown>\n      <Dropdown menu={menu} trigger="click" placement="bottomLeft">\n        <Button type="danger">bottomLeft</Button>\n      </Dropdown>\n      <Dropdown menu={menu} trigger="click" placement="right">\n        <Button type="dark">right</Button>\n      </Dropdown>\n    </div>\n  );\n}'},165:{name:165,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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }\nfunction _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }\nfunction _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }\nfunction _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }\nfunction _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\nfunction Select(props) {\n  var option = props.option,\n    onChange = props.onChange;\n  var _React$useState = _react["default"].useState(false),\n    _React$useState2 = _slicedToArray(_React$useState, 2),\n    open = _React$useState2[0],\n    setOpen = _React$useState2[1];\n  var _React$useState3 = _react["default"].useState(props.value),\n    _React$useState4 = _slicedToArray(_React$useState3, 2),\n    value = _React$useState4[0],\n    setValue = _React$useState4[1];\n  var label = option.find(function (item) {\n    return value === item.value;\n  });\n  _react["default"].useEffect(function () {\n    if (props.value !== value) {\n      setValue(props.value);\n    }\n  }, [props.value]);\n  return /*#__PURE__*/_react["default"].createElement(_uiw.Dropdown, {\n    trigger: "click",\n    onVisibleChange: function onVisibleChange(isOpen) {\n      return setOpen(isOpen);\n    },\n    isOpen: open,\n    menu: /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_uiw.Menu, {\n      bordered: true,\n      style: {\n        minWidth: 120\n      }\n    }, option.map(function (item, idx) {\n      var active = value === item.value;\n      return /*#__PURE__*/_react["default"].createElement(_uiw.Menu.Item, {\n        key: idx,\n        active: active,\n        text: item.label,\n        onClick: function onClick(e) {\n          setValue(item.value);\n          setOpen(false);\n          onChange && onChange(item.value, e);\n        }\n      });\n    })))\n  }, /*#__PURE__*/_react["default"].createElement(_uiw.Button, {\n    type: "link"\n  }, label.label, /*#__PURE__*/_react["default"].createElement(_uiw.Icon, {\n    type: open ? \'up\' : \'down\'\n  })));\n}\nvar option = [{\n  label: \'\u5f80\u8fd4\',\n  value: 1\n}, {\n  label: \'\u5355\u7a0b\',\n  value: 2\n}, {\n  label: \'\u8054\u7a0b\',\n  value: 3\n}, {\n  label: \'Nomad\',\n  value: 4\n}];\nvar option2 = [{\n  label: \'\u7ecf\u6d4e\u8231\',\n  value: 1\n}, {\n  label: \'\u8c6a\u534e\u7ecf\u6d4e\u8231\',\n  value: 2\n}, {\n  label: \'\u5546\u52a1\u8231\',\n  value: 3\n}, {\n  label: \'\u5934\u7b49\u8231\',\n  value: 4\n}];\nreturn function Demo() {\n  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(Select, {\n    option: option,\n    value: 1,\n    onChange: function onChange(item) {\n      console.log(\'item\', item);\n    }\n  }), /*#__PURE__*/_react["default"].createElement(Select, {\n    option: option2,\n    value: 2,\n    onChange: function onChange(item) {\n      console.log(\'item\', item);\n    }\n  }));\n};',language:"jsx",value:"import React from 'react';\nimport { Dropdown, Menu, Button, Icon } from 'uiw';\n\nfunction Select(props) {\n  const { option, onChange } = props;\n  const [open, setOpen] = React.useState(false);\n  const [value, setValue] = React.useState(props.value);\n  const label = option.find(item => value === item.value);\n\n  React.useEffect(() => {\n    if (props.value !== value) {\n      setValue(props.value);\n    }\n  }, [props.value]);\n\n  return (\n    <Dropdown\n      trigger=\"click\"\n      onVisibleChange={(isOpen) => setOpen(isOpen)}\n      isOpen={open}\n      menu={\n        <div>\n          <Menu bordered style={{ minWidth: 120 }}>\n            {option.map((item, idx) => {\n              const active = value === item.value;\n              return (\n                <Menu.Item\n                  key={idx}\n                  active={active}\n                  text={item.label}\n                  onClick={(e) => {\n                    setValue(item.value)\n                    setOpen(false)\n                    onChange && onChange(item.value, e)\n                  }}\n                />\n              );\n            })}\n          </Menu>\n        </div>\n      }\n    >\n      <Button type=\"link\">{label.label}<Icon type={open ? 'up' : 'down'} /></Button>\n    </Dropdown>\n  )\n}\n\nconst option = [\n  { label: '\u5f80\u8fd4', value: 1 },\n  { label: '\u5355\u7a0b', value: 2 },\n  { label: '\u8054\u7a0b', value: 3 },\n  { label: 'Nomad', value: 4 },\n];\n\nconst option2 = [\n  { label: '\u7ecf\u6d4e\u8231', value: 1 },\n  { label: '\u8c6a\u534e\u7ecf\u6d4e\u8231', value: 2 },\n  { label: '\u5546\u52a1\u8231', value: 3 },\n  { label: '\u5934\u7b49\u8231', value: 4 },\n];\n\n\nexport default function Demo() {\n  return(\n    <div>\n      <Select option={option} value={1} onChange={(item) => { console.log('item', item); }} />\n      <Select option={option2} value={2} onChange={(item) => { console.log('item', item); }} />\n    </div>\n  );\n}"}},source:'Dropdown \u4e0b\u62c9\u83dc\u5355\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-dropdown/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-dropdown.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-dropdown)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-dropdown.svg?label=@uiw/react-dropdown)](https://npmjs.com/@uiw/react-dropdown)\n\n\u5411\u4e0b\u5f39\u51fa\u7684\u5217\u8868\u3002\n\n```jsx\nimport { Dropdown } from \'uiw\';\n// or\nimport Dropdown from \'@uiw/react-dropdown\';\n```\n\n### \u57fa\u672c\u7528\u6cd5\n\n```jsx mdx:preview&bg=#fff\nimport React from \'react\';\nimport { Dropdown, Menu, ButtonGroup, Button, Divider, Icon } from \'uiw\';\n\nconst menu = (\n  <div>\n    <Menu bordered style={{ minWidth: 120 }}>\n      <Menu.Item icon="reload" text="\u91cd\u65b0\u52a0\u8f7d" />\n      <Menu.Item icon="heart-on" text="\u53e6\u5b58\u4e3a" active />\n      <Menu.Item icon="appstore" text="\u5e94\u7528\u5546\u57ce" />\n      <Menu.Item icon="bar-chart" text="\u6708\u7edf\u8ba1\u62a5\u8868" />\n      <Menu.Item icon="setting" text="\u504f\u597d\u8bbe\u7f6e" />\n    </Menu>\n  </div>\n);\n\nclass Demo extends React.Component {\n  render() {\n    return (\n      <div>\n        <Dropdown menu={menu}>\n          <a href=\'#\' onClick={e => e.preventDefault()}>\n            \u9f20\u6807\u7ecf\u8fc7\u51fa\u73b0\u83dc\u5355 <Icon type="down" />\n          </a>\n        </Dropdown>\n        <Dropdown trigger="click" menu={menu}>\n          <a href=\'#\' onClick={e => e.preventDefault()}>\n            \u70b9\u51fb\u6211\u51fa\u73b0\u4e0b\u62c9\u83dc\u5355 <Icon type="down" />\n          </a>\n        </Dropdown>\n      </div>\n    )\n  }\n}\n\nexport default Demo;\n```\n\n### \u88ab\u7981\u7528\n\n```jsx mdx:preview&bg=#fff\nimport React from \'react\';\nimport { Dropdown, Menu, ButtonGroup, Button } from \'uiw\';\n\nconst menu = (\n  <div>\n    <Menu bordered style={{ maxWidth: 200 }}>\n      <Menu.Item icon="reload" text="\u91cd\u65b0\u52a0\u8f7d" />\n      <Menu.Divider />\n      <Menu.Item icon="heart-on" text="\u53e6\u5b58\u4e3a" active />\n      <Menu.Item icon="appstore" text="\u5e94\u7528\u5546\u57ce" />\n      <Menu.Item icon="bar-chart" text="\u6708\u7edf\u8ba1\u62a5\u8868\u5bfc\u51fa" />\n      <Menu.Item icon="setting" text="\u504f\u597d\u8bbe\u7f6e" />\n    </Menu>\n  </div>\n);\n\nexport default function Demo() {\n  return(\n    <div>\n      <ButtonGroup style={{ marginRight: 5, display: \'inline-block\' }}>\n        <Button disabled icon="copy">\u70b9\u51fb\u53f3\u8fb9</Button>\n        <Dropdown disabled trigger="click" placement="bottomRight" menu={menu}>\n          <Button icon="more" />\n        </Dropdown>\n      </ButtonGroup>\n      <Dropdown disabled menu={menu}>\n        <Button basic type="link"> (\u8d85\u8fde\u63a5\u6837\u5f0f)link </Button>\n      </Dropdown>\n      <Dropdown disabled menu={menu}>\n        <Button type="primary">\u4e3b\u8981\u6309\u94ae</Button>\n      </Dropdown>\n      <Dropdown disabled menu={menu}>\n        <Button type="success">\u6210\u529f\u6309\u94ae</Button>\n      </Dropdown>\n      <Dropdown disabled menu={menu}>\n        <Button type="warning">\u8b66\u544a\u6309\u94ae</Button>\n      </Dropdown>\n      <Dropdown disabled menu={menu}>\n        <Button type="danger">\u9519\u8bef\u6309\u94ae</Button>\n      </Dropdown>\n      <Dropdown disabled menu={menu}>\n        <Button type="light">\u4eae\u6309\u94ae</Button>\n      </Dropdown>\n      <Dropdown disabled menu={menu}>\n        <Button type="dark">\u6697\u6309\u94ae</Button>\n      </Dropdown>\n    </div>\n  );\n}\n```\n\n### \u5f39\u51fa\u4f4d\u7f6e\n\n```jsx mdx:preview&bg=#fff\nimport React from \'react\';\nimport { Dropdown, Menu, Divider, ButtonGroup, Button } from \'uiw\';\n\nconst menu = (\n  <div>\n    <Menu bordered style={{ maxWidth: 200 }}>\n      <Menu.Item icon="reload" text="\u91cd\u65b0\u52a0\u8f7d" />\n      <Menu.Divider />\n      <Menu.Item icon="heart-on" text="\u53e6\u5b58\u4e3a" active />\n      <Menu.Item icon="appstore" text="\u5e94\u7528\u5546\u57ce" />\n      <Menu.Item icon="bar-chart" text="\u6708\u7edf\u8ba1\u62a5\u8868\u5bfc\u51fa" />\n      <Menu.Item icon="setting" text="\u504f\u597d\u8bbe\u7f6e" />\n    </Menu>\n  </div>\n);\n\nexport default function Demo() {\n  return(\n    <div>\n      <ButtonGroup style={{ marginRight: 5, display: \'inline-block\' }}>\n        <Button icon="copy">top</Button>\n        <Dropdown trigger="click" placement="top" menu={menu}>\n          <Button icon="more" />\n        </Dropdown>\n      </ButtonGroup>\n      <Dropdown menu={menu} trigger="click" placement="topLeft">\n        <Button type="primary">topLeft</Button>\n      </Dropdown>\n      <Dropdown menu={menu} trigger="click" placement="topRight">\n        <Button type="success">topRight</Button>\n      </Dropdown>\n      <Divider />\n      <Dropdown menu={menu} trigger="click" placement="bottomRight">\n        <Button type="light">bottomRight</Button>\n      </Dropdown>\n      <Dropdown menu={menu} trigger="click" placement="bottom">\n        <Button type="warning">bottom</Button>\n      </Dropdown>\n      <Dropdown menu={menu} trigger="click" placement="bottomLeft">\n        <Button type="danger">bottomLeft</Button>\n      </Dropdown>\n      <Dropdown menu={menu} trigger="click" placement="right">\n        <Button type="dark">right</Button>\n      </Dropdown>\n    </div>\n  );\n}\n```\n\n### \u9009\u62e9\u5668\n\n```jsx mdx:preview&bg=#fff\nimport React from \'react\';\nimport { Dropdown, Menu, Button, Icon } from \'uiw\';\n\nfunction Select(props) {\n  const { option, onChange } = props;\n  const [open, setOpen] = React.useState(false);\n  const [value, setValue] = React.useState(props.value);\n  const label = option.find(item => value === item.value);\n\n  React.useEffect(() => {\n    if (props.value !== value) {\n      setValue(props.value);\n    }\n  }, [props.value]);\n\n  return (\n    <Dropdown\n      trigger="click"\n      onVisibleChange={(isOpen) => setOpen(isOpen)}\n      isOpen={open}\n      menu={\n        <div>\n          <Menu bordered style={{ minWidth: 120 }}>\n            {option.map((item, idx) => {\n              const active = value === item.value;\n              return (\n                <Menu.Item\n                  key={idx}\n                  active={active}\n                  text={item.label}\n                  onClick={(e) => {\n                    setValue(item.value)\n                    setOpen(false)\n                    onChange && onChange(item.value, e)\n                  }}\n                />\n              );\n            })}\n          </Menu>\n        </div>\n      }\n    >\n      <Button type="link">{label.label}<Icon type={open ? \'up\' : \'down\'} /></Button>\n    </Dropdown>\n  )\n}\n\nconst option = [\n  { label: \'\u5f80\u8fd4\', value: 1 },\n  { label: \'\u5355\u7a0b\', value: 2 },\n  { label: \'\u8054\u7a0b\', value: 3 },\n  { label: \'Nomad\', value: 4 },\n];\n\nconst option2 = [\n  { label: \'\u7ecf\u6d4e\u8231\', value: 1 },\n  { label: \'\u8c6a\u534e\u7ecf\u6d4e\u8231\', value: 2 },\n  { label: \'\u5546\u52a1\u8231\', value: 3 },\n  { label: \'\u5934\u7b49\u8231\', value: 4 },\n];\n\n\nexport default function Demo() {\n  return(\n    <div>\n      <Select option={option} value={1} onChange={(item) => { console.log(\'item\', item); }} />\n      <Select option={option2} value={2} onChange={(item) => { console.log(\'item\', item); }} />\n    </div>\n  );\n}\n```\n\n## Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n| -------- | -------- | -------- | -------- |\n| menu | \u83dc\u5355 | [`<Menu>`](#/components/menu) | - |\n| disabled | \u83dc\u5355\u662f\u5426\u7981\u7528 | Boolean | - |\n| trigger[`<OverlayTrigger>`](#/components/overlay-trigger) | \u60ac\u505c/\u70b9\u51fb\u5f39\u51fa\u7a97\u53e3 | Enum{`hover`, `click`, `focus`} | `hover` |\n| placement[`<OverlayTrigger>`](#/components/overlay-trigger) | \u6307\u5b9a\u5f39\u51fa\u6846\u4f4d\u7f6e\uff0c\u652f\u6301 12 \u4e2a\u8bbf\u95ee\u5c55\u793a\u83dc\u5355\u3002 | Enum{} | `bottomLeft` |\n\n\u66f4\u591a\u5c5e\u6027\u6587\u6863\u8bf7\u53c2\u8003 [OverlayTrigger](#/components/overlay-trigger)\u3002',headings:[],headingsList:[]};var o=n(5301),u=n(4760);function a(){return(0,u.jsx)(o.Z,{...r,path:"https://github.com/uiwjs/uiw/tree/master/packages/react-dropdown/README.md"})}}}]);
//# sourceMappingURL=3028.bb66791c.chunk.js.map