@uiw/doc 4.16.1 → 4.16.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/package.json +1 -1
  2. package/web/CONTRIBUTORS.svg +3 -3
  3. package/web/asset-manifest.json +12 -12
  4. package/web/index.html +1 -1
  5. package/web/static/css/main.1ccc09ce.css +2 -0
  6. package/web/static/css/main.1ccc09ce.css.map +1 -0
  7. package/web/static/js/{6019.add10037.chunk.js → 6019.2d06a6af.chunk.js} +2 -2
  8. package/web/static/js/{6019.add10037.chunk.js.map → 6019.2d06a6af.chunk.js.map} +1 -1
  9. package/web/static/js/782.9ec6f1b3.chunk.js +3 -0
  10. package/web/static/js/{782.9f9f392a.chunk.js.LICENSE.txt → 782.9ec6f1b3.chunk.js.LICENSE.txt} +0 -0
  11. package/web/static/js/782.9ec6f1b3.chunk.js.map +1 -0
  12. package/web/static/js/{9137.f4e2b7b0.chunk.js → 9137.fdbcd423.chunk.js} +2 -2
  13. package/web/static/js/{9137.f4e2b7b0.chunk.js.map → 9137.fdbcd423.chunk.js.map} +1 -1
  14. package/web/static/js/main.45c2dcc5.js +2 -0
  15. package/web/static/js/main.45c2dcc5.js.map +1 -0
  16. package/web/static/css/main.b6a99127.css +0 -2
  17. package/web/static/css/main.b6a99127.css.map +0 -1
  18. package/web/static/js/782.9f9f392a.chunk.js +0 -3
  19. package/web/static/js/782.9f9f392a.chunk.js.map +0 -1
  20. package/web/static/js/main.f48891cc.js +0 -2
  21. package/web/static/js/main.f48891cc.js.map +0 -1
package/web/static/js/{9137.f4e2b7b0.chunk.js → 9137.fdbcd423.chunk.js} RENAMED
@@ -1,2 +1,2 @@
1
- "use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9137],{29137:function(n,e,t){t.r(e),e.default='Menu \u83dc\u5355\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-menu/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-menu.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-menu)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-menu.svg?label=@uiw/react-menu)](https://www.npmjs.com/package/@uiw/react-menu)\n\n\u4e3a\u9875\u9762\u548c\u529f\u80fd\u63d0\u4f9b\u5bfc\u822a\u7684\u83dc\u5355\u5217\u8868\u3002\n\n```jsx\nimport { Menu } from \'uiw\';\nimport { MenuItem, MenuDivider, SubMenu } from \'uiw\'; // @ v4.10.0+\n// or\nimport Menu, { MenuItem, MenuDivider, SubMenu } from \'@uiw/react-menu\'; // @ v4.10.0+\n\n// Menu.Item === MenuItem\n// Menu.Divider === MenuDivider\n// Menu.SubMenu === SubMenu\n```\n\n### \u57fa\u672c\u7528\u6cd5\n\n\n\x3c!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from \'react-dom\';\nimport { Menu, MenuItem, Row, Col } from \'uiw\';\n\nconst Demo = () => (\n <Row justify="flex-start" gutter={10}>\n <Col fixed>\n <Menu bordered>\n <MenuItem 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.Divider />\n <Menu.Item icon="map" text="\u8c37\u6b4c\u5730\u56fe" />\n <Menu.Item icon="map" text="\u767e\u5ea6\u5730\u56fe" href="https://map.baidu.com" target="_blank" />\n </Menu>\n </Col>\n <Col fixed>\n <Menu bordered>\n <Menu.Divider title="\u7f16\u8f91" />\n <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n <Menu.Item icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939" />\n <Menu.Item icon="copy" text="\u62f7\u8d1d" />\n <Menu.Item icon="delete" disabled text="\u5220\u9664" />\n <Menu.SubMenu icon="setting-o" text="\u9009\u9879" collapse>\n <Menu.Item icon="dot-chart" text="\u663e\u793a\u8fb9\u680f" />\n <Menu.Item icon="date" text="\u6dfb\u52a0\u65e5\u671f" />\n <Menu.Item icon="tags-o" text="\u6807\u7b7e\u540d\u79f0" />\n </Menu.SubMenu>\n <Menu.Divider title="\u5176\u5b83" />\n <Menu.SubMenu icon="bar-chart" text="\u6708\u7edf\u8ba1\u62a5\u8868\u5bfc\u51fa">\n <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n <Menu.Item icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939" />\n <Menu.Divider title="\u7c7b\u522b" />\n <Menu.Item icon="copy" text="\u62f7\u8d1d" />\n <Menu.SubMenu icon="bar-chart" text="\u62a5\u8868" collapse>\n <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n <Menu.SubMenu icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939">\n <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n <Menu.Item icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939" />\n </Menu.SubMenu>\n </Menu.SubMenu>\n </Menu.SubMenu>\n <Menu.SubMenu icon="setting" disabled text="\u504f\u597d\u8bbe\u7f6e">\n <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n <Menu.Item icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939" />\n </Menu.SubMenu>\n <Menu.Item icon="map" text="\u8c37\u6b4c\u5730\u56fe" />\n </Menu>\n </Col>\n <Col fixed>\n <Menu bordered>\n <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n <Menu.Item icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939" />\n <Menu.SubMenu icon="bar-chart" text="\u6708\u7edf\u8ba1\u62a5\u8868\u5bfc\u51fa"\n overlayProps={{\n isOpen: true\n }}\n >\n <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n <Menu.Divider title="\u7c7b\u522b" />\n <Menu.Item icon="copy" text="\u62f7\u8d1d" />\n <Menu.SubMenu icon="bar-chart" text="\u62a5\u8868" collapse>\n <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n <Menu.SubMenu icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939">\n <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n <Menu.Item icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939" />\n </Menu.SubMenu>\n </Menu.SubMenu>\n </Menu.SubMenu>\n <Menu.Item icon="map" text="\u8c37\u6b4c\u5730\u56fe" />\n </Menu>\n </Col>\n </Row>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u4e0b\u62c9\u83dc\u5355\n\n\x3c!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from \'react-dom\';\nimport { Menu, Popover, Button, Row, Col } from \'uiw\';\n\nconst btnStl = {position: \'relative\', width: 70 }\nconst content = (\n <Menu>\n <Menu.Divider title="\u7f16\u8f91" />\n <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n <Menu.Item icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939" />\n <Menu.Item icon="copy" text="\u62f7\u8d1d" />\n <Menu.Item icon="delete" disabled text="\u5220\u9664" />\n <Menu.Divider title="\u5176\u5b83" />\n <Menu.Item icon="bar-chart" text="\u6708\u7edf\u8ba1\u62a5\u8868\u5bfc\u51fa" />\n <Menu.Item icon="setting" disabled text="\u504f\u597d\u8bbe\u7f6e" />\n <Menu.Item icon="map" text="\u8c37\u6b4c\u5730\u56fe" />\n </Menu>\n)\nconst Demo = () => (\n <div>\n <div style={{ position: \'relative\' }}>\n\n <Popover trigger="click" placement="topLeft" content={content}>\n <Button style={{ ...btnStl, left: 70 }}>TL</Button>\n </Popover>\n <Popover trigger="click" placement="top" content={content}>\n <Button style={{ ...btnStl, left: 70}}>Top</Button>\n </Popover>\n <Popover trigger="click" placement="topRight" content={content}>\n <Button style={{ ...btnStl, left: 70 }}>TR</Button>\n </Popover>\n\n </div>\n <div style={{ position: \'relative\', paddingTop: 10 }}>\n\n <Popover trigger="click" placement="leftTop" content={content}>\n <Button style={{ ...btnStl }}>LT</Button>\n </Popover>\n <Popover trigger="click" placement="rightTop" content={content}>\n <Button style={{ ...btnStl, left: 216 }}>RT</Button>\n </Popover>\n\n </div>\n <div style={{ position: \'relative\', paddingTop: 10 }}>\n\n <Popover trigger="click" placement="left" content={content}>\n <Button style={{ ...btnStl }}>Left</Button>\n </Popover>\n <Popover trigger="click" placement="right" content={content}>\n <Button style={{ ...btnStl, left: 216 }}>Right</Button>\n </Popover>\n\n </div>\n <div style={{ position: \'relative\', paddingTop: 10 }}>\n\n <Popover trigger="click" placement="leftBottom" content={content}>\n <Button style={{ ...btnStl }}>LB</Button>\n </Popover>\n <Popover trigger="click" placement="rightBottom" content={content}>\n <Button style={{ ...btnStl, left: 216 }}>RB</Button>\n </Popover>\n\n </div>\n <div style={{ position: \'relative\', paddingTop: 10 }}>\n\n <Popover trigger="click" placement="bottomLeft" content={content}>\n <Button style={{ ...btnStl, left: 70 }}>BL</Button>\n </Popover>\n <Popover trigger="click" placement="bottom" content={content}>\n <Button style={{ ...btnStl, left: 70 }}>Bottom</Button>\n </Popover>\n <Popover trigger="click" placement="bottomRight" content={content}>\n <Button style={{ ...btnStl, left: 70 }}>BR</Button>\n </Popover>\n\n </div>\n </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u5185\u5d4c\u83dc\u5355\n\n\u901a\u8fc7\u8bbe\u7f6e `overlayProps={ isOpen: true }`\uff0c\u8ba9\u83dc\u5355\u9ed8\u8ba4\u5c55\u5f00\u3002\n\n\x3c!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from \'react-dom\';\nimport { Menu, Row, Col } from \'uiw\';\n\nconst Demo = () => (\n <Row justify="flex-start" gutter={10}>\n <Col fixed>\n <Menu bordered style={{ maxWidth: 200 }}>\n <Menu.Item icon="delete" disabled text="\u5220\u9664" />\n <Menu.SubMenu icon="setting-o" text="\u9009\u9879" disabled collapse>\n <Menu.Item icon="dot-chart" text="\u663e\u793a\u8fb9\u680f" />\n <Menu.Item icon="date" text="\u6dfb\u52a0\u65e5\u671f" />\n <Menu.Item icon="tags-o" text="\u6807\u7b7e\u540d\u79f0" />\n </Menu.SubMenu>\n <Menu.Divider title="\u5176\u5b83" />\n <Menu.SubMenu\n icon="bar-chart" text="\u6bcf\u5e742019\u5e74\u7edf\u8ba1\u62a5\u8868\u5bfc\u51fa" collapse\n // overlayProps={{ isOpen: true }}\n >\n <Menu.Item text="\u6dfb\u52a0\u6587\u4ef6" />\n <Menu.Item text="\u6dfb\u52a0\u6587\u4ef6\u5939" />\n <Menu.Divider title="\u7c7b\u522b" />\n <Menu.Item icon="copy" text="\u62f7\u8d1d" />\n <Menu.SubMenu icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939" collapse>\n <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n <Menu.Item icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939" />\n </Menu.SubMenu>\n </Menu.SubMenu>\n <Menu.Item icon="setting" disabled text="\u504f\u597d\u8bbe\u7f6e" />\n <Menu.Item icon="map" text="\u8c37\u6b4c\u5730\u56fe" />\n </Menu>\n </Col>\n </Row>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u4e3b\u9898\n\n\u5185\u5efa\u4e86\u4e24\u5957\u4e3b\u9898 `light`\u3001`dark`\uff0c\u9ed8\u8ba4 `light`\u3002\n\n\x3c!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from \'react-dom\';\nimport { Menu, Row, Col, Switch } from \'uiw\';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n theme: \'dark\',\n }\n }\n render() {\n return (\n <div>\n <Row justify="flex-start" gutter={10}>\n <Col style={{ paddingBottom: 5 }}>\n <Switch\n checked\n style={{ marginRight: 10 }}\n onChange={(e) => {\n this.setState({ theme: e.target.checked ? \'dark\' : \'light\' });\n }}\n />\n </Col>\n </Row>\n <Row justify="flex-start" gutter={10}>\n <Col fixed>\n <Menu theme={this.state.theme} bordered style={{ maxWidth: 200 }}>\n <Menu.Item icon="delete" disabled text="\u5220\u9664" />\n <Menu.SubMenu icon="setting-o" text="\u9009\u9879" disabled collapse>\n <Menu.Item icon="dot-chart" text="\u663e\u793a\u8fb9\u680f" />\n <Menu.Item icon="date" text="\u6dfb\u52a0\u65e5\u671f" />\n <Menu.Item icon="tags-o" text="\u6807\u7b7e\u540d\u79f0" />\n </Menu.SubMenu>\n <Menu.Divider title="\u5176\u5b83" />\n <Menu.Item active icon="map" text="\u8c37\u6b4c\u5730\u56fe" />\n <Menu.SubMenu icon="bar-chart" text="\u6bcf\u5e742019\u5e74\u7edf\u8ba1\u62a5\u8868\u5bfc\u51fa">\n <Menu.Item text="\u6dfb\u52a0\u6587\u4ef6" />\n <Menu.Item text="\u6dfb\u52a0\u6587\u4ef6\u5939" />\n <Menu.Divider title="\u7c7b\u522b" />\n <Menu.SubMenu icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939" collapse>\n <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n <Menu.Item icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939" />\n </Menu.SubMenu>\n <Menu.Item icon="copy" text="\u62f7\u8d1d" />\n </Menu.SubMenu>\n <Menu.Item icon="setting" disabled text="\u504f\u597d\u8bbe\u7f6e" />\n <Menu.SubMenu icon="setting-o" text="\u9009\u9879" collapse>\n <Menu.Item icon="dot-chart" text="\u663e\u793a\u8fb9\u680f" />\n <Menu.Item icon="date" text="\u6dfb\u52a0\u65e5\u671f" />\n <Menu.Item icon="tags-o" text="\u6807\u7b7e\u540d\u79f0" />\n </Menu.SubMenu>\n </Menu>\n </Col>\n </Row>\n </div>\n );\n }\n}\n\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u5b8c\u6574\u83dc\u5355\u5c55\u793a\n\n\u5305\u62ec\u70b9\u51fb\u9009\u4e2d\u6548\u679c\uff0c\u4e8b\u4ef6\u7b49\u64cd\u4f5c\uff0c\u5b8c\u6574\u7684\u5b9e\u4f8b\u5c55\u793a\u3002\n\n\x3c!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport { Menu, Row, Col, Switch } from \'uiw\';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n theme: \'light\',\n menus: [\n { key: \'1\', icon: \'delete\', label: \'\u5220\u9664\' },\n {\n icon: \'setting-o\',\n label: \'\u9009\u9879\',\n childrend: [\n { key: \'1-1\', icon: \'dot-chart\', label: \'\u663e\u793a\u8fb9\u680f\' },\n { key: \'1-2\', icon: \'date\', disabled: true, label: \'\u6dfb\u52a0\u65e5\u671f\' },\n { key: \'1-3\', icon: \'tags-o\', label: \'\u6807\u7b7e\u540d\u79f0\' },\n ],\n },\n { divider: true },\n { key: \'2\', icon: \'map\', label: \'\u8c37\u6b4c\u5730\u56fe\' },\n {\n icon: \'bar-chart\',\n label: \'\u6bcf\u5e742019\u5e74\u7edf\u8ba1\u62a5\u8868\u5bfc\u51fa\',\n childrend: [\n { key: \'2-1\', label: \'\u7edf\u8ba1\u6dfb\u52a0\u6587\u4ef6\' },\n { key: \'2-2\', label: \'\u7edf\u8ba1\u6dfb\u52a0\u6587\u4ef6\u5939\' },\n { key: \'2-3\', icon: \'tags-o\', label: \'\u7c7b\u522b\', divider: true },\n {\n icon: \'folder-add\',\n label: \'\u6dfb\u52a0\u6587\u4ef6\u5939\',\n childrend: [\n { key: \'2-3-1\', label: \'\u6dfb\u52a0\u6587\u4ef6\u5939\' },\n { key: \'2-3-2\', label: \'\u6dfb\u52a0\u6587\u4ef6\' },\n { key: \'2-3-3\', label: \'\u6dfb\u52a0\u6587\u4ef6\u5939\' },\n ],\n },\n ],\n },\n ],\n active: \'1\',\n }\n }\n\n onClickItem(key) {\n this.setState({ active: key });\n }\n\n renderMenu(menus, k) {\n const { active } = this.state;\n const items = [];\n menus.forEach((item, key) => {\n if (item.childrend) {\n items.push(\n <Menu.SubMenu key={key} icon={item.icon} text={item.label} collapse\n // \u53c2\u6570 usePortal \u5bb9\u6613\u51fa\u95ee\u9898\n // overlayProps={{ usePortal: true }}\n >\n {this.renderMenu(item.childrend, `${k}${key}`)}\n </Menu.SubMenu>\n );\n } else if (item.divider) {\n items.push(<Menu.Divider key={`${k}${key}`} title={item.label} />);\n } else {\n items.push(\n <Menu.Item\n onClick={this.onClickItem.bind(this, item.key)}\n active={active === item.key} key={`${k}${key}`}\n icon={item.icon}\n text={item.label}\n />\n );\n }\n });\n return items;\n }\n\n render() {\n return (\n <div>\n <Row justify="flex-start" gutter={10}>\n <Col style={{ paddingBottom: 5 }}>\n <Switch\n checked={this.state.theme === \'dark\'}\n style={{ marginRight: 10 }}\n onChange={(e) => {\n this.setState({ theme: e.target.checked ? \'dark\' : \'light\' });\n }}\n />\n </Col>\n </Row>\n <Row justify="flex-start" gutter={10}>\n <Col fixed>\n <Menu inlineIndent={13} theme={this.state.theme} bordered style={{ maxWidth: 200 }}>\n {this.renderMenu(this.state.menus, \'k\')}\n </Menu>\n </Col>\n </Row>\n </div>\n );\n }\n}\n\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u7f29\u8d77\u5185\u5d4c\u83dc\u5355\n\n\u5185\u5d4c\u83dc\u5355\u53ef\u4ee5\u88ab\u7f29\u8d77/\u5c55\u5f00\uff0c\u9700\u8981 `SubMenu` \u7684\u53c2\u6570 `collapse` \u548c `inlineCollapsed` \u914d\u5408\u4f7f\u7528\u3002\n\n\x3c!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport { Menu, Row, Col, Icon, Button } from \'uiw\';\n\nconst menusData = [\n { key: \'1\', icon: \'delete\', label: \'\u5220\u9664\' },\n {\n icon: \'setting-o\',\n label: \'\u9009\u9879\',\n childrend: [\n { key: \'1-1\', icon: \'dot-chart\', label: \'\u663e\u793a\u8fb9\u680f\' },\n { key: \'1-2\', icon: \'date\', disabled: true, label: \'\u6dfb\u52a0\u65e5\u671f\' },\n { key: \'1-3\', icon: \'tags-o\', label: \'\u6807\u7b7e\u540d\u79f0\' },\n ],\n },\n { key: \'2\', icon: \'map\', label: \'\u8c37\u6b4c\u5730\u56fe\' },\n {\n icon: \'bar-chart\',\n label: \'\u6bcf\u5e742019\u5e74\u7edf\u8ba1\u62a5\u8868\u5bfc\u51fa\',\n childrend: [\n { key: \'2-1\', label: \'\u7edf\u8ba1\u6dfb\u52a0\u6587\u4ef6\' },\n { key: \'2-2\', label: \'\u7edf\u8ba1\u6dfb\u52a0\u6587\u4ef6\u5939\' },\n { key: \'2-3\', icon: \'tags-o\', label: \'\u7c7b\u522b\', divider: true },\n {\n icon: \'folder-add\',\n label: \'\u6dfb\u52a0\u6587\u4ef6\u5939\',\n childrend: [\n { key: \'2-3-1\', label: \'\u6dfb\u52a0\u6587\u4ef6\u5939\' },\n { key: \'2-3-2\', label: \'\u6dfb\u52a0\u6587\u4ef6\' },\n { key: \'2-3-3\', label: \'\u6dfb\u52a0\u6587\u4ef6\u5939\' },\n ],\n },\n ],\n },\n];\n\nconst Demo = () => {\n const [theme, setTheme] = React.useState(\'dark\');\n const [collapse, setCollapse] = React.useState(false);\n const menuRef = React.useRef();\n function onClickItem() {\n console.log(\';;;;>>>\')\n }\n function renderMenu(menus) {\n const items = [];\n menus.forEach((item, key) => {\n if (item.childrend) {\n items.push(\n <Menu.SubMenu key={key} icon={item.icon} text={item.label}\n collapse={collapse}\n >\n {renderMenu(item.childrend)}\n </Menu.SubMenu>\n );\n } else if (item.divider) {\n items.push(<Menu.Divider key={key} title={item.label} />);\n } else {\n items.push(\n <Menu.Item\n onClick={onClickItem.bind(this, item.key)}\n key={key}\n icon={item.icon}\n text={item.label}\n />\n );\n }\n });\n return items;\n }\n return (\n <div style={{ maxWidth: 200}}>\n <Button type="primary" size="small" onClick={() => setCollapse(!collapse)} style={{ marginBottom: 10 }}>\n <Icon type={collapse ? \'menu-fold\' : \'menu-unfold\' } />\n </Button>\n <Switch\n size="large"\n data-checked="light"\n data-unchecked="dark"\n checked={theme === \'dark\'}\n style={{ marginLeft: 10, marginBottom: 10, display: \'inline-block\' }}\n onChange={(e) => setTheme(e.target.checked ? \'dark\' : \'light\')}\n />\n <Menu\n theme={theme}\n ref={menuRef}\n inlineCollapsed={collapse}\n inlineIndent={13}\n bordered\n // style={{ maxWidth: 200 }}\n >\n {renderMenu(menusData)}\n </Menu>\n </div>\n )\n}\n\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Menu.Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| className | \u8bbe\u7f6e\u7c7b\u7684\u540d\u79f0 | String | - |\n| style | \u5143\u7d20\u7684\u884c\u5185\u6837\u5f0f | Object | - |\n| inlineIndent | \u83dc\u5355\u7f29\u8fdb\u5bbd\u5ea6 | Number | `10` |\n| theme | \u4e3b\u9898\u989c\u8272 | Enum{`light`, `dark`} | - |\n| bordered | \u662f\u5426\u6709\u8fb9\u6846 | Boolean | `false` |\n\n\n## Menu.Item.Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| icon | \u83dc\u5355\u56fe\u6807 [`<Icon />`](#/components/icon) \u7684 `type` \u5c5e\u6027 | ReactNode/String | - |\n| text | \u83dc\u5355\u6807\u9898\u5185\u5bb9 | ReactNode | - |\n| addonAfter | \u83dc\u5355\u6807\u9898\u540e\u9762\u63d2\u5165\u5185\u5bb9 | ReactNode | - |\n| ~~isSubMenuItem~~ | \u4e0d\u53ef\u7528\uff0cSubMenu \u7ec4\u4ef6\u4f20\u9012\u7ed9 Item \u7ec4\u4ef6\u7684**\u6807\u8bb0**\u5c5e\u6027\uff0c\u8fd9\u662f\u4e00\u4e2a\u5185\u90e8\u53c2\u6570\u3002 | Boolean | - |\n| tagName | \u8bbe\u7f6e\u5b50\u8282\u70b9\u6807\u7b7e\u540d\uff0c\u9ed8\u8ba4 `<a />` \u6807\u7b7e\uff0c\u4e5f\u53ef\u4ee5\u6307\u5b9a\u8def\u7531 [`<Link />`](https://reacttraining.com/react-router/web/api/Link) | String | `a` |\n| active | \u6fc0\u6d3b\u9009\u4e2d\u72b6\u6001 | Boolean | `false` |\n| inlineCollapsed | \u83dc\u5355\u662f\u5426\u6536\u8d77\u72b6\u6001 | Boolean | `false` |\n| disabled | \u7981\u7528\u72b6\u6001 | Boolean | `false` |\n\n\u5176\u5b83\u53c2\u6570\u53ef\u6839\u636e `tagName` \u6765\u8bbe\u7f6e\uff0c\u9ed8\u8ba4 `<a />` \u6807\u7b7e\u65f6\uff0c\u53ef\u8bbe\u7f6e `href="https://wwww.google.com"` \u6216\u8005 `target="_blank"` \u7b49\u53c2\u6570\uff0c\u4f60\u53ef\u4ee5\u8bbe\u7f6e [react-router-dom](https://github.com/ReactTraining/react-router) \u8def\u7531 `<Link>`\uff0c\u4f8b\u5982\uff1a\n\n```jsx\nimport { Menu } from \'uiw\';\nimport { Link } from \'react-router-dom\';\n\nconst Demo = () => {\n return (\n <Menu style={{ maxWidth: 200 }}>\n <Menu.Item tagName={Link} to="/home" icon="reload" text="\u8df3\u8f6c\u9996\u9875" />\n <Menu.Item icon="map" text="\u767e\u5ea6\u5730\u56fe" href="https://map.baidu.com" target="_blank" />\n </Menu>\n )\n}\n```\n\n## Menu.SubMenu.Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| icon | \u83dc\u5355\u56fe\u6807 [`<Icon />`](#/components/icon) \u7684 `type` \u5c5e\u6027 | String | - |\n| text | \u83dc\u5355\u6807\u9898\u5185\u5bb9 | ReactNode | - |\n| disabled | \u7981\u7528\u72b6\u6001 | Boolean | `false` |\n| collapse | \u9ed8\u8ba4\u5b50\u83dc\u5355\u662f OverlayTrigger \u7684\u5f39\u51fa\u5c42\uff0c\u901a\u8fc7\u8bbe\u7f6e `collapse={true}` \u53d8\u4e3a~~\u6298\u53e0~~(\u5f39\u51fa\u6846\u5f0f `@v4.2.0+`)\u83dc\u5355 | Boolean | `false` |\n| overlayProps | \u5bf9\u8c61\u5c06\u4f20\u9012\u5230 `OverlayTrigger` \u7ec4\u4ef6\uff0c\u4fee\u6539\u90e8\u5206\u53c2\u6570\uff0c\u76f8\u5173\u53c2\u6570\u53c2\u8003 [`OverlayTrigger`](#/components/overlay-trigger) | Object | - |\n\n## Menu.Divider.Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| className | \u8bbe\u7f6e\u7c7b\u7684\u540d\u79f0 | String | - |\n| style | \u5143\u7d20\u7684\u884c\u5185\u6837\u5f0f | Object | - |\n| title | \u6807\u9898 | String | - |\n'}}]);
2
- //# sourceMappingURL=9137.f4e2b7b0.chunk.js.map
1
+ "use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9137],{29137:function(n,e,t){t.r(e),e.default='Menu \u83dc\u5355\n===\n\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-menu/file/README.md)\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-menu.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-menu)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-menu.svg?label=@uiw/react-menu)](https://www.npmjs.com/package/@uiw/react-menu)\n\n\u4e3a\u9875\u9762\u548c\u529f\u80fd\u63d0\u4f9b\u5bfc\u822a\u7684\u83dc\u5355\u5217\u8868\u3002\n\n```jsx\nimport { Menu } from \'uiw\';\nimport { MenuItem, MenuDivider, SubMenu } from \'uiw\'; // @ v4.10.0+\n// or\nimport Menu, { MenuItem, MenuDivider, SubMenu } from \'@uiw/react-menu\'; // @ v4.10.0+\n\n// Menu.Item === MenuItem\n// Menu.Divider === MenuDivider\n// Menu.SubMenu === SubMenu\n```\n\n### \u57fa\u672c\u7528\u6cd5\n\n\n\x3c!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from \'react-dom\';\nimport { Menu, MenuItem, Row, Col } from \'uiw\';\n\nconst Demo = () => (\n <Row justify="flex-start" gutter={10}>\n <Col fixed>\n <Menu bordered>\n <MenuItem 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.Divider />\n <Menu.Item icon="map" text="\u8c37\u6b4c\u5730\u56fe" />\n <Menu.Item icon="map" text="\u767e\u5ea6\u5730\u56fe" href="https://map.baidu.com" target="_blank" />\n </Menu>\n </Col>\n <Col fixed>\n <Menu bordered>\n <Menu.Divider title="\u7f16\u8f91" />\n <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n <Menu.Item icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939" />\n <Menu.Item icon="copy" text="\u62f7\u8d1d" />\n <Menu.Item icon="delete" disabled text="\u5220\u9664" />\n <Menu.SubMenu icon="setting-o" text="\u9009\u9879" collapse>\n <Menu.Item icon="dot-chart" text="\u663e\u793a\u8fb9\u680f" />\n <Menu.Item icon="date" text="\u6dfb\u52a0\u65e5\u671f" />\n <Menu.Item icon="tags-o" text="\u6807\u7b7e\u540d\u79f0" />\n </Menu.SubMenu>\n <Menu.Divider title="\u5176\u5b83" />\n <Menu.SubMenu icon="bar-chart" text="\u6708\u7edf\u8ba1\u62a5\u8868\u5bfc\u51fa">\n <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n <Menu.Item icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939" />\n <Menu.Divider title="\u7c7b\u522b" />\n <Menu.Item icon="copy" text="\u62f7\u8d1d" />\n <Menu.SubMenu icon="bar-chart" text="\u62a5\u8868" collapse>\n <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n <Menu.SubMenu icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939">\n <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n <Menu.Item icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939" />\n </Menu.SubMenu>\n </Menu.SubMenu>\n </Menu.SubMenu>\n <Menu.SubMenu icon="setting" disabled text="\u504f\u597d\u8bbe\u7f6e">\n <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n <Menu.Item icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939" />\n </Menu.SubMenu>\n <Menu.Item icon="map" text="\u8c37\u6b4c\u5730\u56fe" />\n </Menu>\n </Col>\n <Col fixed>\n <Menu bordered>\n <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n <Menu.Item icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939" />\n <Menu.SubMenu icon="bar-chart" text="\u6708\u7edf\u8ba1\u62a5\u8868\u5bfc\u51fa"\n overlayProps={{\n isOpen: true\n }}\n >\n <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n <Menu.Divider title="\u7c7b\u522b" />\n <Menu.Item icon="copy" text="\u62f7\u8d1d" />\n <Menu.SubMenu icon="bar-chart" text="\u62a5\u8868" collapse>\n <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n <Menu.SubMenu icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939">\n <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n <Menu.Item icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939" />\n </Menu.SubMenu>\n </Menu.SubMenu>\n </Menu.SubMenu>\n <Menu.Item icon="map" text="\u8c37\u6b4c\u5730\u56fe" />\n </Menu>\n </Col>\n </Row>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u4e0b\u62c9\u83dc\u5355\n\n\x3c!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from \'react-dom\';\nimport { Menu, Popover, Button, Row, Col } from \'uiw\';\n\nconst btnStl = {position: \'relative\', width: 70 }\nconst content = (\n <Menu>\n <Menu.Divider title="\u7f16\u8f91" />\n <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n <Menu.Item icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939" />\n <Menu.Item icon="copy" text="\u62f7\u8d1d" />\n <Menu.Item icon="delete" disabled text="\u5220\u9664" />\n <Menu.Divider title="\u5176\u5b83" />\n <Menu.Item icon="bar-chart" text="\u6708\u7edf\u8ba1\u62a5\u8868\u5bfc\u51fa" />\n <Menu.Item icon="setting" disabled text="\u504f\u597d\u8bbe\u7f6e" />\n <Menu.Item icon="map" text="\u8c37\u6b4c\u5730\u56fe" />\n </Menu>\n)\nconst Demo = () => (\n <div>\n <div style={{ position: \'relative\' }}>\n\n <Popover trigger="click" placement="topLeft" content={content}>\n <Button style={{ ...btnStl, left: 70 }}>TL</Button>\n </Popover>\n <Popover trigger="click" placement="top" content={content}>\n <Button style={{ ...btnStl, left: 70}}>Top</Button>\n </Popover>\n <Popover trigger="click" placement="topRight" content={content}>\n <Button style={{ ...btnStl, left: 70 }}>TR</Button>\n </Popover>\n\n </div>\n <div style={{ position: \'relative\', paddingTop: 10 }}>\n\n <Popover trigger="click" placement="leftTop" content={content}>\n <Button style={{ ...btnStl }}>LT</Button>\n </Popover>\n <Popover trigger="click" placement="rightTop" content={content}>\n <Button style={{ ...btnStl, left: 216 }}>RT</Button>\n </Popover>\n\n </div>\n <div style={{ position: \'relative\', paddingTop: 10 }}>\n\n <Popover trigger="click" placement="left" content={content}>\n <Button style={{ ...btnStl }}>Left</Button>\n </Popover>\n <Popover trigger="click" placement="right" content={content}>\n <Button style={{ ...btnStl, left: 216 }}>Right</Button>\n </Popover>\n\n </div>\n <div style={{ position: \'relative\', paddingTop: 10 }}>\n\n <Popover trigger="click" placement="leftBottom" content={content}>\n <Button style={{ ...btnStl }}>LB</Button>\n </Popover>\n <Popover trigger="click" placement="rightBottom" content={content}>\n <Button style={{ ...btnStl, left: 216 }}>RB</Button>\n </Popover>\n\n </div>\n <div style={{ position: \'relative\', paddingTop: 10 }}>\n\n <Popover trigger="click" placement="bottomLeft" content={content}>\n <Button style={{ ...btnStl, left: 70 }}>BL</Button>\n </Popover>\n <Popover trigger="click" placement="bottom" content={content}>\n <Button style={{ ...btnStl, left: 70 }}>Bottom</Button>\n </Popover>\n <Popover trigger="click" placement="bottomRight" content={content}>\n <Button style={{ ...btnStl, left: 70 }}>BR</Button>\n </Popover>\n\n </div>\n </div>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u5185\u5d4c\u83dc\u5355\n\n\u901a\u8fc7\u8bbe\u7f6e `overlayProps={ isOpen: true }`\uff0c\u8ba9\u83dc\u5355\u9ed8\u8ba4\u5c55\u5f00\u3002\n\n\x3c!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from \'react-dom\';\nimport { Menu, Row, Col } from \'uiw\';\n\nconst Demo = () => (\n <Row justify="flex-start" gutter={10}>\n <Col fixed>\n <Menu bordered style={{ maxWidth: 200 }}>\n <Menu.Item icon="delete" disabled text="\u5220\u9664" />\n <Menu.SubMenu icon="setting-o" text="\u9009\u9879" disabled collapse>\n <Menu.Item icon="dot-chart" text="\u663e\u793a\u8fb9\u680f" />\n <Menu.Item icon="date" text="\u6dfb\u52a0\u65e5\u671f" />\n <Menu.Item icon="tags-o" text="\u6807\u7b7e\u540d\u79f0" />\n </Menu.SubMenu>\n <Menu.Divider title="\u5176\u5b83" />\n <Menu.SubMenu\n icon="bar-chart" text="\u6bcf\u5e742019\u5e74\u7edf\u8ba1\u62a5\u8868\u5bfc\u51fa" collapse\n // overlayProps={{ isOpen: true }}\n >\n <Menu.Item text="\u6dfb\u52a0\u6587\u4ef6" />\n <Menu.Item text="\u6dfb\u52a0\u6587\u4ef6\u5939" />\n <Menu.Divider title="\u7c7b\u522b" />\n <Menu.Item icon="copy" text="\u62f7\u8d1d" />\n <Menu.SubMenu icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939" collapse>\n <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n <Menu.Item icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939" />\n </Menu.SubMenu>\n </Menu.SubMenu>\n <Menu.Item icon="setting" disabled text="\u504f\u597d\u8bbe\u7f6e" />\n <Menu.Item icon="map" text="\u8c37\u6b4c\u5730\u56fe" />\n </Menu>\n </Col>\n </Row>\n)\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u4e3b\u9898\n\n\u5185\u5efa\u4e86\u4e24\u5957\u4e3b\u9898 `light`\u3001`dark`\uff0c\u9ed8\u8ba4 `light`\u3002\n\n\x3c!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport ReactDOM from \'react-dom\';\nimport { Menu, Row, Col, Switch } from \'uiw\';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n theme: \'dark\',\n }\n }\n render() {\n return (\n <div>\n <Row justify="flex-start" gutter={10}>\n <Col style={{ paddingBottom: 5 }}>\n <Switch\n checked\n style={{ marginRight: 10 }}\n onChange={(e) => {\n this.setState({ theme: e.target.checked ? \'dark\' : \'light\' });\n }}\n />\n </Col>\n </Row>\n <Row justify="flex-start" gutter={10}>\n <Col fixed>\n <Menu theme={this.state.theme} bordered style={{ maxWidth: 200 }}>\n <Menu.Item icon="delete" disabled text="\u5220\u9664" />\n <Menu.SubMenu icon="setting-o" text="\u9009\u9879" disabled collapse>\n <Menu.Item icon="dot-chart" text="\u663e\u793a\u8fb9\u680f" />\n <Menu.Item icon="date" text="\u6dfb\u52a0\u65e5\u671f" />\n <Menu.Item icon="tags-o" text="\u6807\u7b7e\u540d\u79f0" />\n </Menu.SubMenu>\n <Menu.Divider title="\u5176\u5b83" />\n <Menu.Item active icon="map" text="\u8c37\u6b4c\u5730\u56fe" />\n <Menu.SubMenu icon="bar-chart" text="\u6bcf\u5e742019\u5e74\u7edf\u8ba1\u62a5\u8868\u5bfc\u51fa">\n <Menu.Item text="\u6dfb\u52a0\u6587\u4ef6" />\n <Menu.Item text="\u6dfb\u52a0\u6587\u4ef6\u5939" />\n <Menu.Divider title="\u7c7b\u522b" />\n <Menu.SubMenu icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939" collapse>\n <Menu.Item icon="file-add" text="\u6dfb\u52a0\u6587\u4ef6" />\n <Menu.Item icon="folder-add" text="\u6dfb\u52a0\u6587\u4ef6\u5939" />\n </Menu.SubMenu>\n <Menu.Item icon="copy" text="\u62f7\u8d1d" />\n </Menu.SubMenu>\n <Menu.Item icon="setting" disabled text="\u504f\u597d\u8bbe\u7f6e" />\n <Menu.SubMenu icon="setting-o" text="\u9009\u9879" collapse>\n <Menu.Item icon="dot-chart" text="\u663e\u793a\u8fb9\u680f" />\n <Menu.Item icon="date" text="\u6dfb\u52a0\u65e5\u671f" />\n <Menu.Item icon="tags-o" text="\u6807\u7b7e\u540d\u79f0" />\n </Menu.SubMenu>\n </Menu>\n </Col>\n </Row>\n </div>\n );\n }\n}\n\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u5b8c\u6574\u83dc\u5355\u5c55\u793a\n\n\u5305\u62ec\u70b9\u51fb\u9009\u4e2d\u6548\u679c\uff0c\u4e8b\u4ef6\u7b49\u64cd\u4f5c\uff0c\u5b8c\u6574\u7684\u5b9e\u4f8b\u5c55\u793a\u3002\n\n\x3c!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport { Menu, Row, Col, Switch } from \'uiw\';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n theme: \'light\',\n menus: [\n { key: \'1\', icon: \'delete\', label: \'\u5220\u9664\' },\n {\n icon: \'setting-o\',\n label: \'\u9009\u9879\',\n childrend: [\n { key: \'1-1\', icon: \'dot-chart\', label: \'\u663e\u793a\u8fb9\u680f\' },\n { key: \'1-2\', icon: \'date\', disabled: true, label: \'\u6dfb\u52a0\u65e5\u671f\' },\n { key: \'1-3\', icon: \'tags-o\', label: \'\u6807\u7b7e\u540d\u79f0\' },\n ],\n },\n { divider: true },\n { key: \'2\', icon: \'map\', label: \'\u8c37\u6b4c\u5730\u56fe\' },\n {\n icon: \'bar-chart\',\n label: \'\u6bcf\u5e742019\u5e74\u7edf\u8ba1\u62a5\u8868\u5bfc\u51fa\',\n childrend: [\n { key: \'2-1\', label: \'\u7edf\u8ba1\u6dfb\u52a0\u6587\u4ef6\' },\n { key: \'2-2\', label: \'\u7edf\u8ba1\u6dfb\u52a0\u6587\u4ef6\u5939\' },\n { key: \'2-3\', icon: \'tags-o\', label: \'\u7c7b\u522b\', divider: true },\n {\n icon: \'folder-add\',\n label: \'\u6dfb\u52a0\u6587\u4ef6\u5939\',\n childrend: [\n { key: \'2-3-1\', label: \'\u6dfb\u52a0\u6587\u4ef6\u5939\' },\n { key: \'2-3-2\', label: \'\u6dfb\u52a0\u6587\u4ef6\' },\n { key: \'2-3-3\', label: \'\u6dfb\u52a0\u6587\u4ef6\u5939\' },\n ],\n },\n ],\n },\n ],\n active: \'1\',\n }\n }\n\n onClickItem(key) {\n this.setState({ active: key });\n }\n\n renderMenu(menus, k) {\n const { active } = this.state;\n const items = [];\n menus.forEach((item, key) => {\n if (item.childrend) {\n items.push(\n <Menu.SubMenu key={key} icon={item.icon} text={item.label} collapse\n // \u53c2\u6570 usePortal \u5bb9\u6613\u51fa\u95ee\u9898\n // overlayProps={{ usePortal: true }}\n >\n {this.renderMenu(item.childrend, `${k}${key}`)}\n </Menu.SubMenu>\n );\n } else if (item.divider) {\n items.push(<Menu.Divider key={`${k}${key}`} title={item.label} />);\n } else {\n items.push(\n <Menu.Item\n onClick={this.onClickItem.bind(this, item.key)}\n active={active === item.key} key={`${k}${key}`}\n icon={item.icon}\n text={item.label}\n />\n );\n }\n });\n return items;\n }\n\n render() {\n return (\n <div>\n <Row justify="flex-start" gutter={10}>\n <Col style={{ paddingBottom: 5 }}>\n <Switch\n checked={this.state.theme === \'dark\'}\n style={{ marginRight: 10 }}\n onChange={(e) => {\n this.setState({ theme: e.target.checked ? \'dark\' : \'light\' });\n }}\n />\n </Col>\n </Row>\n <Row justify="flex-start" gutter={10}>\n <Col fixed>\n <Menu inlineIndent={13} theme={this.state.theme} bordered style={{ maxWidth: 200 }}>\n {this.renderMenu(this.state.menus, \'k\')}\n </Menu>\n </Col>\n </Row>\n </div>\n );\n }\n}\n\nReactDOM.render(<Demo />, _mount_);\n```\n\n### \u7f29\u8d77\u5185\u5d4c\u83dc\u5355\n\n\u5185\u5d4c\u83dc\u5355\u53ef\u4ee5\u88ab\u7f29\u8d77/\u5c55\u5f00\uff0c\u9700\u8981 `SubMenu` \u7684\u53c2\u6570 `collapse` \u548c `inlineCollapsed` \u914d\u5408\u4f7f\u7528\u3002\n\n\x3c!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true--\x3e\n```jsx\nimport React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport { Menu, Row, Col, Icon, Button } from \'uiw\';\n\nconst menusData = [\n { key: \'1\', icon: \'delete\', label: \'\u5220\u9664\' },\n {\n icon: \'setting-o\',\n label: \'\u9009\u9879\',\n childrend: [\n { key: \'1-1\', icon: \'dot-chart\', label: \'\u663e\u793a\u8fb9\u680f\' },\n { key: \'1-2\', icon: \'date\', disabled: true, label: \'\u6dfb\u52a0\u65e5\u671f\' },\n { key: \'1-3\', icon: \'tags-o\', label: \'\u6807\u7b7e\u540d\u79f0\' },\n ],\n },\n { key: \'2\', icon: \'map\', label: \'\u8c37\u6b4c\u5730\u56fe\' },\n {\n icon: \'bar-chart\',\n label: \'\u6bcf\u5e742019\u5e74\u7edf\u8ba1\u62a5\u8868\u5bfc\u51fa\',\n childrend: [\n { key: \'2-1\', label: \'\u7edf\u8ba1\u6dfb\u52a0\u6587\u4ef6\' },\n { key: \'2-2\', label: \'\u7edf\u8ba1\u6dfb\u52a0\u6587\u4ef6\u5939\' },\n { key: \'2-3\', icon: \'tags-o\', label: \'\u7c7b\u522b\', divider: true },\n {\n icon: \'folder-add\',\n label: \'\u6dfb\u52a0\u6587\u4ef6\u5939\',\n childrend: [\n { key: \'2-3-1\', label: \'\u6dfb\u52a0\u6587\u4ef6\u5939\' },\n { key: \'2-3-2\', label: \'\u6dfb\u52a0\u6587\u4ef6\' },\n { key: \'2-3-3\', label: \'\u6dfb\u52a0\u6587\u4ef6\u5939\' },\n ],\n },\n ],\n },\n];\n\nconst Demo = () => {\n const [theme, setTheme] = React.useState(\'dark\');\n const [collapse, setCollapse] = React.useState(false);\n const menuRef = React.useRef();\n function onClickItem() {\n console.log(\';;;;>>>\')\n }\n function renderMenu(menus) {\n const items = [];\n menus.forEach((item, key) => {\n if (item.childrend) {\n items.push(\n <Menu.SubMenu key={key} icon={item.icon} text={item.label}\n collapse={collapse}\n >\n {renderMenu(item.childrend)}\n </Menu.SubMenu>\n );\n } else if (item.divider) {\n items.push(<Menu.Divider key={key} title={item.label} />);\n } else {\n items.push(\n <Menu.Item\n onClick={onClickItem.bind(this, item.key)}\n key={key}\n icon={item.icon}\n text={item.label}\n />\n );\n }\n });\n return items;\n }\n return (\n <div style={{ maxWidth: 200}}>\n <Button type="primary" size="small" onClick={() => setCollapse(!collapse)} style={{ marginBottom: 10 }}>\n <Icon type={collapse ? \'menu-fold\' : \'menu-unfold\' } />\n </Button>\n <Switch\n size="large"\n data-checked="light"\n data-unchecked="dark"\n checked={theme === \'dark\'}\n style={{ marginLeft: 10, marginBottom: 10, display: \'inline-block\' }}\n onChange={(e) => setTheme(e.target.checked ? \'dark\' : \'light\')}\n />\n <Menu\n theme={theme}\n ref={menuRef}\n inlineCollapsed={collapse}\n inlineIndent={13}\n bordered\n // style={{ maxWidth: 200 }}\n >\n {renderMenu(menusData)}\n </Menu>\n </div>\n )\n}\n\nReactDOM.render(<Demo />, _mount_);\n```\n\n## Menu.Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| className | \u8bbe\u7f6e\u7c7b\u7684\u540d\u79f0 | String | - |\n| style | \u5143\u7d20\u7684\u884c\u5185\u6837\u5f0f | Object | - |\n| inlineIndent | \u83dc\u5355\u7f29\u8fdb\u5bbd\u5ea6 | Number | `10` |\n| theme | \u4e3b\u9898\u989c\u8272 | Enum{`light`, `dark`} | - |\n| bordered | \u662f\u5426\u6709\u8fb9\u6846 | Boolean | `false` |\n| inlineCollapsed | \u83dc\u5355\u662f\u5426\u6536\u8d77\u72b6\u6001 | Boolean | `false` |\n\n\n## Menu.Item.Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| icon | \u83dc\u5355\u56fe\u6807 [`<Icon />`](#/components/icon) \u7684 `type` \u5c5e\u6027 | ReactNode/String | - |\n| text | \u83dc\u5355\u6807\u9898\u5185\u5bb9 | ReactNode | - |\n| addonAfter | \u83dc\u5355\u6807\u9898\u540e\u9762\u63d2\u5165\u5185\u5bb9 | ReactNode | - |\n| ~~isSubMenuItem~~ | \u4e0d\u53ef\u7528\uff0cSubMenu \u7ec4\u4ef6\u4f20\u9012\u7ed9 Item \u7ec4\u4ef6\u7684**\u6807\u8bb0**\u5c5e\u6027\uff0c\u8fd9\u662f\u4e00\u4e2a\u5185\u90e8\u53c2\u6570\u3002 | Boolean | - |\n| tagName | \u8bbe\u7f6e\u5b50\u8282\u70b9\u6807\u7b7e\u540d\uff0c\u9ed8\u8ba4 `<a />` \u6807\u7b7e\uff0c\u4e5f\u53ef\u4ee5\u6307\u5b9a\u8def\u7531 [`<Link />`](https://reacttraining.com/react-router/web/api/Link) | String | `a` |\n| active | \u6fc0\u6d3b\u9009\u4e2d\u72b6\u6001 | Boolean | `false` |\n| disabled | \u7981\u7528\u72b6\u6001 | Boolean | `false` |\n\n\u5176\u5b83\u53c2\u6570\u53ef\u6839\u636e `tagName` \u6765\u8bbe\u7f6e\uff0c\u9ed8\u8ba4 `<a />` \u6807\u7b7e\u65f6\uff0c\u53ef\u8bbe\u7f6e `href="https://wwww.google.com"` \u6216\u8005 `target="_blank"` \u7b49\u53c2\u6570\uff0c\u4f60\u53ef\u4ee5\u8bbe\u7f6e [react-router-dom](https://github.com/ReactTraining/react-router) \u8def\u7531 `<Link>`\uff0c\u4f8b\u5982\uff1a\n\n```jsx\nimport { Menu } from \'uiw\';\nimport { Link } from \'react-router-dom\';\n\nconst Demo = () => {\n return (\n <Menu style={{ maxWidth: 200 }}>\n <Menu.Item tagName={Link} to="/home" icon="reload" text="\u8df3\u8f6c\u9996\u9875" />\n <Menu.Item icon="map" text="\u767e\u5ea6\u5730\u56fe" href="https://map.baidu.com" target="_blank" />\n </Menu>\n )\n}\n```\n\n## Menu.SubMenu.Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| icon | \u83dc\u5355\u56fe\u6807 [`<Icon />`](#/components/icon) \u7684 `type` \u5c5e\u6027 | String | - |\n| text | \u83dc\u5355\u6807\u9898\u5185\u5bb9 | ReactNode | - |\n| disabled | \u7981\u7528\u72b6\u6001 | Boolean | `false` |\n| collapse | \u9ed8\u8ba4\u5b50\u83dc\u5355\u662f OverlayTrigger \u7684\u5f39\u51fa\u5c42\uff0c\u901a\u8fc7\u8bbe\u7f6e `collapse={true}` \u53d8\u4e3a~~\u6298\u53e0~~(\u5f39\u51fa\u6846\u5f0f `@v4.2.0+`)\u83dc\u5355 | Boolean | `false` |\n| overlayProps | \u5bf9\u8c61\u5c06\u4f20\u9012\u5230 `OverlayTrigger` \u7ec4\u4ef6\uff0c\u4fee\u6539\u90e8\u5206\u53c2\u6570\uff0c\u76f8\u5173\u53c2\u6570\u53c2\u8003 [`OverlayTrigger`](#/components/overlay-trigger) | Object | - |\n\n## Menu.Divider.Props\n\n| \u53c2\u6570 | \u8bf4\u660e | \u7c7b\u578b | \u9ed8\u8ba4\u503c |\n|--------- |-------- |--------- |-------- |\n| className | \u8bbe\u7f6e\u7c7b\u7684\u540d\u79f0 | String | - |\n| style | \u5143\u7d20\u7684\u884c\u5185\u6837\u5f0f | Object | - |\n| title | \u6807\u9898 | String | - |\n'}}]);
2
+ //# sourceMappingURL=9137.fdbcd423.chunk.js.map
package/web/static/js/{9137.f4e2b7b0.chunk.js.map → 9137.fdbcd423.chunk.js.map} RENAMED
@@ -1 +1 @@
1
- {"version":3,"file":"static/js/9137.f4e2b7b0.chunk.js","mappings":"gHAAA","sources":["../../packages/react-menu/README.md"],"sourcesContent":["export default \"Menu 菜单\\n===\\n\\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-menu/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-menu.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-menu)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-menu.svg?label=@uiw/react-menu)](https://www.npmjs.com/package/@uiw/react-menu)\\n\\n为页面和功能提供导航的菜单列表。\\n\\n```jsx\\nimport { Menu } from 'uiw';\\nimport { MenuItem, MenuDivider, SubMenu } from 'uiw'; // @ v4.10.0+\\n// or\\nimport Menu, { MenuItem, MenuDivider, SubMenu } from '@uiw/react-menu'; // @ v4.10.0+\\n\\n// Menu.Item === MenuItem\\n// Menu.Divider === MenuDivider\\n// Menu.SubMenu === SubMenu\\n```\\n\\n### 基本用法\\n\\n\\n<!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Menu, MenuItem, Row, Col } from 'uiw';\\n\\nconst Demo = () => (\\n <Row justify=\\\"flex-start\\\" gutter={10}>\\n <Col fixed>\\n <Menu bordered>\\n <MenuItem icon=\\\"reload\\\" text=\\\"重新加载\\\" />\\n <Menu.Divider />\\n <Menu.Item icon=\\\"heart-on\\\" text=\\\"另存为\\\" active />\\n <Menu.Item icon=\\\"appstore\\\" text=\\\"应用商城\\\" />\\n <Menu.Item icon=\\\"bar-chart\\\" text=\\\"月统计报表导出\\\" />\\n <Menu.Item icon=\\\"setting\\\" text=\\\"偏好设置\\\" />\\n <Menu.Divider />\\n <Menu.Item icon=\\\"map\\\" text=\\\"谷歌地图\\\" />\\n <Menu.Item icon=\\\"map\\\" text=\\\"百度地图\\\" href=\\\"https://map.baidu.com\\\" target=\\\"_blank\\\" />\\n </Menu>\\n </Col>\\n <Col fixed>\\n <Menu bordered>\\n <Menu.Divider title=\\\"编辑\\\" />\\n <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n <Menu.Item icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\" />\\n <Menu.Item icon=\\\"copy\\\" text=\\\"拷贝\\\" />\\n <Menu.Item icon=\\\"delete\\\" disabled text=\\\"删除\\\" />\\n <Menu.SubMenu icon=\\\"setting-o\\\" text=\\\"选项\\\" collapse>\\n <Menu.Item icon=\\\"dot-chart\\\" text=\\\"显示边栏\\\" />\\n <Menu.Item icon=\\\"date\\\" text=\\\"添加日期\\\" />\\n <Menu.Item icon=\\\"tags-o\\\" text=\\\"标签名称\\\" />\\n </Menu.SubMenu>\\n <Menu.Divider title=\\\"其它\\\" />\\n <Menu.SubMenu icon=\\\"bar-chart\\\" text=\\\"月统计报表导出\\\">\\n <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n <Menu.Item icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\" />\\n <Menu.Divider title=\\\"类别\\\" />\\n <Menu.Item icon=\\\"copy\\\" text=\\\"拷贝\\\" />\\n <Menu.SubMenu icon=\\\"bar-chart\\\" text=\\\"报表\\\" collapse>\\n <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n <Menu.SubMenu icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\">\\n <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n <Menu.Item icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\" />\\n </Menu.SubMenu>\\n </Menu.SubMenu>\\n </Menu.SubMenu>\\n <Menu.SubMenu icon=\\\"setting\\\" disabled text=\\\"偏好设置\\\">\\n <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n <Menu.Item icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\" />\\n </Menu.SubMenu>\\n <Menu.Item icon=\\\"map\\\" text=\\\"谷歌地图\\\" />\\n </Menu>\\n </Col>\\n <Col fixed>\\n <Menu bordered>\\n <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n <Menu.Item icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\" />\\n <Menu.SubMenu icon=\\\"bar-chart\\\" text=\\\"月统计报表导出\\\"\\n overlayProps={{\\n isOpen: true\\n }}\\n >\\n <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n <Menu.Divider title=\\\"类别\\\" />\\n <Menu.Item icon=\\\"copy\\\" text=\\\"拷贝\\\" />\\n <Menu.SubMenu icon=\\\"bar-chart\\\" text=\\\"报表\\\" collapse>\\n <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n <Menu.SubMenu icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\">\\n <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n <Menu.Item icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\" />\\n </Menu.SubMenu>\\n </Menu.SubMenu>\\n </Menu.SubMenu>\\n <Menu.Item icon=\\\"map\\\" text=\\\"谷歌地图\\\" />\\n </Menu>\\n </Col>\\n </Row>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 下拉菜单\\n\\n<!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Menu, Popover, Button, Row, Col } from 'uiw';\\n\\nconst btnStl = {position: 'relative', width: 70 }\\nconst content = (\\n <Menu>\\n <Menu.Divider title=\\\"编辑\\\" />\\n <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n <Menu.Item icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\" />\\n <Menu.Item icon=\\\"copy\\\" text=\\\"拷贝\\\" />\\n <Menu.Item icon=\\\"delete\\\" disabled text=\\\"删除\\\" />\\n <Menu.Divider title=\\\"其它\\\" />\\n <Menu.Item icon=\\\"bar-chart\\\" text=\\\"月统计报表导出\\\" />\\n <Menu.Item icon=\\\"setting\\\" disabled text=\\\"偏好设置\\\" />\\n <Menu.Item icon=\\\"map\\\" text=\\\"谷歌地图\\\" />\\n </Menu>\\n)\\nconst Demo = () => (\\n <div>\\n <div style={{ position: 'relative' }}>\\n\\n <Popover trigger=\\\"click\\\" placement=\\\"topLeft\\\" content={content}>\\n <Button style={{ ...btnStl, left: 70 }}>TL</Button>\\n </Popover>\\n <Popover trigger=\\\"click\\\" placement=\\\"top\\\" content={content}>\\n <Button style={{ ...btnStl, left: 70}}>Top</Button>\\n </Popover>\\n <Popover trigger=\\\"click\\\" placement=\\\"topRight\\\" content={content}>\\n <Button style={{ ...btnStl, left: 70 }}>TR</Button>\\n </Popover>\\n\\n </div>\\n <div style={{ position: 'relative', paddingTop: 10 }}>\\n\\n <Popover trigger=\\\"click\\\" placement=\\\"leftTop\\\" content={content}>\\n <Button style={{ ...btnStl }}>LT</Button>\\n </Popover>\\n <Popover trigger=\\\"click\\\" placement=\\\"rightTop\\\" content={content}>\\n <Button style={{ ...btnStl, left: 216 }}>RT</Button>\\n </Popover>\\n\\n </div>\\n <div style={{ position: 'relative', paddingTop: 10 }}>\\n\\n <Popover trigger=\\\"click\\\" placement=\\\"left\\\" content={content}>\\n <Button style={{ ...btnStl }}>Left</Button>\\n </Popover>\\n <Popover trigger=\\\"click\\\" placement=\\\"right\\\" content={content}>\\n <Button style={{ ...btnStl, left: 216 }}>Right</Button>\\n </Popover>\\n\\n </div>\\n <div style={{ position: 'relative', paddingTop: 10 }}>\\n\\n <Popover trigger=\\\"click\\\" placement=\\\"leftBottom\\\" content={content}>\\n <Button style={{ ...btnStl }}>LB</Button>\\n </Popover>\\n <Popover trigger=\\\"click\\\" placement=\\\"rightBottom\\\" content={content}>\\n <Button style={{ ...btnStl, left: 216 }}>RB</Button>\\n </Popover>\\n\\n </div>\\n <div style={{ position: 'relative', paddingTop: 10 }}>\\n\\n <Popover trigger=\\\"click\\\" placement=\\\"bottomLeft\\\" content={content}>\\n <Button style={{ ...btnStl, left: 70 }}>BL</Button>\\n </Popover>\\n <Popover trigger=\\\"click\\\" placement=\\\"bottom\\\" content={content}>\\n <Button style={{ ...btnStl, left: 70 }}>Bottom</Button>\\n </Popover>\\n <Popover trigger=\\\"click\\\" placement=\\\"bottomRight\\\" content={content}>\\n <Button style={{ ...btnStl, left: 70 }}>BR</Button>\\n </Popover>\\n\\n </div>\\n </div>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 内嵌菜单\\n\\n通过设置 `overlayProps={ isOpen: true }`，让菜单默认展开。\\n\\n<!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Menu, Row, Col } from 'uiw';\\n\\nconst Demo = () => (\\n <Row justify=\\\"flex-start\\\" gutter={10}>\\n <Col fixed>\\n <Menu bordered style={{ maxWidth: 200 }}>\\n <Menu.Item icon=\\\"delete\\\" disabled text=\\\"删除\\\" />\\n <Menu.SubMenu icon=\\\"setting-o\\\" text=\\\"选项\\\" disabled collapse>\\n <Menu.Item icon=\\\"dot-chart\\\" text=\\\"显示边栏\\\" />\\n <Menu.Item icon=\\\"date\\\" text=\\\"添加日期\\\" />\\n <Menu.Item icon=\\\"tags-o\\\" text=\\\"标签名称\\\" />\\n </Menu.SubMenu>\\n <Menu.Divider title=\\\"其它\\\" />\\n <Menu.SubMenu\\n icon=\\\"bar-chart\\\" text=\\\"每年2019年统计报表导出\\\" collapse\\n // overlayProps={{ isOpen: true }}\\n >\\n <Menu.Item text=\\\"添加文件\\\" />\\n <Menu.Item text=\\\"添加文件夹\\\" />\\n <Menu.Divider title=\\\"类别\\\" />\\n <Menu.Item icon=\\\"copy\\\" text=\\\"拷贝\\\" />\\n <Menu.SubMenu icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\" collapse>\\n <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n <Menu.Item icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\" />\\n </Menu.SubMenu>\\n </Menu.SubMenu>\\n <Menu.Item icon=\\\"setting\\\" disabled text=\\\"偏好设置\\\" />\\n <Menu.Item icon=\\\"map\\\" text=\\\"谷歌地图\\\" />\\n </Menu>\\n </Col>\\n </Row>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 主题\\n\\n内建了两套主题 `light`、`dark`，默认 `light`。\\n\\n<!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Menu, Row, Col, Switch } from 'uiw';\\n\\nclass Demo extends React.Component {\\n constructor(props) {\\n super(props);\\n this.state = {\\n theme: 'dark',\\n }\\n }\\n render() {\\n return (\\n <div>\\n <Row justify=\\\"flex-start\\\" gutter={10}>\\n <Col style={{ paddingBottom: 5 }}>\\n <Switch\\n checked\\n style={{ marginRight: 10 }}\\n onChange={(e) => {\\n this.setState({ theme: e.target.checked ? 'dark' : 'light' });\\n }}\\n />\\n </Col>\\n </Row>\\n <Row justify=\\\"flex-start\\\" gutter={10}>\\n <Col fixed>\\n <Menu theme={this.state.theme} bordered style={{ maxWidth: 200 }}>\\n <Menu.Item icon=\\\"delete\\\" disabled text=\\\"删除\\\" />\\n <Menu.SubMenu icon=\\\"setting-o\\\" text=\\\"选项\\\" disabled collapse>\\n <Menu.Item icon=\\\"dot-chart\\\" text=\\\"显示边栏\\\" />\\n <Menu.Item icon=\\\"date\\\" text=\\\"添加日期\\\" />\\n <Menu.Item icon=\\\"tags-o\\\" text=\\\"标签名称\\\" />\\n </Menu.SubMenu>\\n <Menu.Divider title=\\\"其它\\\" />\\n <Menu.Item active icon=\\\"map\\\" text=\\\"谷歌地图\\\" />\\n <Menu.SubMenu icon=\\\"bar-chart\\\" text=\\\"每年2019年统计报表导出\\\">\\n <Menu.Item text=\\\"添加文件\\\" />\\n <Menu.Item text=\\\"添加文件夹\\\" />\\n <Menu.Divider title=\\\"类别\\\" />\\n <Menu.SubMenu icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\" collapse>\\n <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n <Menu.Item icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\" />\\n </Menu.SubMenu>\\n <Menu.Item icon=\\\"copy\\\" text=\\\"拷贝\\\" />\\n </Menu.SubMenu>\\n <Menu.Item icon=\\\"setting\\\" disabled text=\\\"偏好设置\\\" />\\n <Menu.SubMenu icon=\\\"setting-o\\\" text=\\\"选项\\\" collapse>\\n <Menu.Item icon=\\\"dot-chart\\\" text=\\\"显示边栏\\\" />\\n <Menu.Item icon=\\\"date\\\" text=\\\"添加日期\\\" />\\n <Menu.Item icon=\\\"tags-o\\\" text=\\\"标签名称\\\" />\\n </Menu.SubMenu>\\n </Menu>\\n </Col>\\n </Row>\\n </div>\\n );\\n }\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 完整菜单展示\\n\\n包括点击选中效果，事件等操作，完整的实例展示。\\n\\n<!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Menu, Row, Col, Switch } from 'uiw';\\n\\nclass Demo extends React.Component {\\n constructor(props) {\\n super(props);\\n this.state = {\\n theme: 'light',\\n menus: [\\n { key: '1', icon: 'delete', label: '删除' },\\n {\\n icon: 'setting-o',\\n label: '选项',\\n childrend: [\\n { key: '1-1', icon: 'dot-chart', label: '显示边栏' },\\n { key: '1-2', icon: 'date', disabled: true, label: '添加日期' },\\n { key: '1-3', icon: 'tags-o', label: '标签名称' },\\n ],\\n },\\n { divider: true },\\n { key: '2', icon: 'map', label: '谷歌地图' },\\n {\\n icon: 'bar-chart',\\n label: '每年2019年统计报表导出',\\n childrend: [\\n { key: '2-1', label: '统计添加文件' },\\n { key: '2-2', label: '统计添加文件夹' },\\n { key: '2-3', icon: 'tags-o', label: '类别', divider: true },\\n {\\n icon: 'folder-add',\\n label: '添加文件夹',\\n childrend: [\\n { key: '2-3-1', label: '添加文件夹' },\\n { key: '2-3-2', label: '添加文件' },\\n { key: '2-3-3', label: '添加文件夹' },\\n ],\\n },\\n ],\\n },\\n ],\\n active: '1',\\n }\\n }\\n\\n onClickItem(key) {\\n this.setState({ active: key });\\n }\\n\\n renderMenu(menus, k) {\\n const { active } = this.state;\\n const items = [];\\n menus.forEach((item, key) => {\\n if (item.childrend) {\\n items.push(\\n <Menu.SubMenu key={key} icon={item.icon} text={item.label} collapse\\n // 参数 usePortal 容易出问题\\n // overlayProps={{ usePortal: true }}\\n >\\n {this.renderMenu(item.childrend, `${k}${key}`)}\\n </Menu.SubMenu>\\n );\\n } else if (item.divider) {\\n items.push(<Menu.Divider key={`${k}${key}`} title={item.label} />);\\n } else {\\n items.push(\\n <Menu.Item\\n onClick={this.onClickItem.bind(this, item.key)}\\n active={active === item.key} key={`${k}${key}`}\\n icon={item.icon}\\n text={item.label}\\n />\\n );\\n }\\n });\\n return items;\\n }\\n\\n render() {\\n return (\\n <div>\\n <Row justify=\\\"flex-start\\\" gutter={10}>\\n <Col style={{ paddingBottom: 5 }}>\\n <Switch\\n checked={this.state.theme === 'dark'}\\n style={{ marginRight: 10 }}\\n onChange={(e) => {\\n this.setState({ theme: e.target.checked ? 'dark' : 'light' });\\n }}\\n />\\n </Col>\\n </Row>\\n <Row justify=\\\"flex-start\\\" gutter={10}>\\n <Col fixed>\\n <Menu inlineIndent={13} theme={this.state.theme} bordered style={{ maxWidth: 200 }}>\\n {this.renderMenu(this.state.menus, 'k')}\\n </Menu>\\n </Col>\\n </Row>\\n </div>\\n );\\n }\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 缩起内嵌菜单\\n\\n内嵌菜单可以被缩起/展开，需要 `SubMenu` 的参数 `collapse` 和 `inlineCollapsed` 配合使用。\\n\\n<!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Menu, Row, Col, Icon, Button } from 'uiw';\\n\\nconst menusData = [\\n { key: '1', icon: 'delete', label: '删除' },\\n {\\n icon: 'setting-o',\\n label: '选项',\\n childrend: [\\n { key: '1-1', icon: 'dot-chart', label: '显示边栏' },\\n { key: '1-2', icon: 'date', disabled: true, label: '添加日期' },\\n { key: '1-3', icon: 'tags-o', label: '标签名称' },\\n ],\\n },\\n { key: '2', icon: 'map', label: '谷歌地图' },\\n {\\n icon: 'bar-chart',\\n label: '每年2019年统计报表导出',\\n childrend: [\\n { key: '2-1', label: '统计添加文件' },\\n { key: '2-2', label: '统计添加文件夹' },\\n { key: '2-3', icon: 'tags-o', label: '类别', divider: true },\\n {\\n icon: 'folder-add',\\n label: '添加文件夹',\\n childrend: [\\n { key: '2-3-1', label: '添加文件夹' },\\n { key: '2-3-2', label: '添加文件' },\\n { key: '2-3-3', label: '添加文件夹' },\\n ],\\n },\\n ],\\n },\\n];\\n\\nconst Demo = () => {\\n const [theme, setTheme] = React.useState('dark');\\n const [collapse, setCollapse] = React.useState(false);\\n const menuRef = React.useRef();\\n function onClickItem() {\\n console.log(';;;;>>>')\\n }\\n function renderMenu(menus) {\\n const items = [];\\n menus.forEach((item, key) => {\\n if (item.childrend) {\\n items.push(\\n <Menu.SubMenu key={key} icon={item.icon} text={item.label}\\n collapse={collapse}\\n >\\n {renderMenu(item.childrend)}\\n </Menu.SubMenu>\\n );\\n } else if (item.divider) {\\n items.push(<Menu.Divider key={key} title={item.label} />);\\n } else {\\n items.push(\\n <Menu.Item\\n onClick={onClickItem.bind(this, item.key)}\\n key={key}\\n icon={item.icon}\\n text={item.label}\\n />\\n );\\n }\\n });\\n return items;\\n }\\n return (\\n <div style={{ maxWidth: 200}}>\\n <Button type=\\\"primary\\\" size=\\\"small\\\" onClick={() => setCollapse(!collapse)} style={{ marginBottom: 10 }}>\\n <Icon type={collapse ? 'menu-fold' : 'menu-unfold' } />\\n </Button>\\n <Switch\\n size=\\\"large\\\"\\n data-checked=\\\"light\\\"\\n data-unchecked=\\\"dark\\\"\\n checked={theme === 'dark'}\\n style={{ marginLeft: 10, marginBottom: 10, display: 'inline-block' }}\\n onChange={(e) => setTheme(e.target.checked ? 'dark' : 'light')}\\n />\\n <Menu\\n theme={theme}\\n ref={menuRef}\\n inlineCollapsed={collapse}\\n inlineIndent={13}\\n bordered\\n // style={{ maxWidth: 200 }}\\n >\\n {renderMenu(menusData)}\\n </Menu>\\n </div>\\n )\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Menu.Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| className | 设置类的名称 | String | - |\\n| style | 元素的行内样式 | Object | - |\\n| inlineIndent | 菜单缩进宽度 | Number | `10` |\\n| theme | 主题颜色 | Enum{`light`, `dark`} | - |\\n| bordered | 是否有边框 | Boolean | `false` |\\n\\n\\n## Menu.Item.Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| icon | 菜单图标 [`<Icon />`](#/components/icon) 的 `type` 属性 | ReactNode/String | - |\\n| text | 菜单标题内容 | ReactNode | - |\\n| addonAfter | 菜单标题后面插入内容 | ReactNode | - |\\n| ~~isSubMenuItem~~ | 不可用，SubMenu 组件传递给 Item 组件的**标记**属性，这是一个内部参数。 | Boolean | - |\\n| tagName | 设置子节点标签名，默认 `<a />` 标签，也可以指定路由 [`<Link />`](https://reacttraining.com/react-router/web/api/Link) | String | `a` |\\n| active | 激活选中状态 | Boolean | `false` |\\n| inlineCollapsed | 菜单是否收起状态 | Boolean | `false` |\\n| disabled | 禁用状态 | Boolean | `false` |\\n\\n其它参数可根据 `tagName` 来设置，默认 `<a />` 标签时，可设置 `href=\\\"https://wwww.google.com\\\"` 或者 `target=\\\"_blank\\\"` 等参数，你可以设置 [react-router-dom](https://github.com/ReactTraining/react-router) 路由 `<Link>`，例如：\\n\\n```jsx\\nimport { Menu } from 'uiw';\\nimport { Link } from 'react-router-dom';\\n\\nconst Demo = () => {\\n return (\\n <Menu style={{ maxWidth: 200 }}>\\n <Menu.Item tagName={Link} to=\\\"/home\\\" icon=\\\"reload\\\" text=\\\"跳转首页\\\" />\\n <Menu.Item icon=\\\"map\\\" text=\\\"百度地图\\\" href=\\\"https://map.baidu.com\\\" target=\\\"_blank\\\" />\\n </Menu>\\n )\\n}\\n```\\n\\n## Menu.SubMenu.Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| icon | 菜单图标 [`<Icon />`](#/components/icon) 的 `type` 属性 | String | - |\\n| text | 菜单标题内容 | ReactNode | - |\\n| disabled | 禁用状态 | Boolean | `false` |\\n| collapse | 默认子菜单是 OverlayTrigger 的弹出层，通过设置 `collapse={true}` 变为~~折叠~~(弹出框式 `@v4.2.0+`)菜单 | Boolean | `false` |\\n| overlayProps | 对象将传递到 `OverlayTrigger` 组件，修改部分参数，相关参数参考 [`OverlayTrigger`](#/components/overlay-trigger) | Object | - |\\n\\n## Menu.Divider.Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| className | 设置类的名称 | String | - |\\n| style | 元素的行内样式 | Object | - |\\n| title | 标题 | String | - |\\n\";"],"names":[],"sourceRoot":""}
1
+ {"version":3,"file":"static/js/9137.fdbcd423.chunk.js","mappings":"gHAAA","sources":["../../packages/react-menu/README.md"],"sourcesContent":["export default \"Menu 菜单\\n===\\n\\n[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-menu/file/README.md)\\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-menu.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-menu)\\n[![npm version](https://img.shields.io/npm/v/@uiw/react-menu.svg?label=@uiw/react-menu)](https://www.npmjs.com/package/@uiw/react-menu)\\n\\n为页面和功能提供导航的菜单列表。\\n\\n```jsx\\nimport { Menu } from 'uiw';\\nimport { MenuItem, MenuDivider, SubMenu } from 'uiw'; // @ v4.10.0+\\n// or\\nimport Menu, { MenuItem, MenuDivider, SubMenu } from '@uiw/react-menu'; // @ v4.10.0+\\n\\n// Menu.Item === MenuItem\\n// Menu.Divider === MenuDivider\\n// Menu.SubMenu === SubMenu\\n```\\n\\n### 基本用法\\n\\n\\n<!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Menu, MenuItem, Row, Col } from 'uiw';\\n\\nconst Demo = () => (\\n <Row justify=\\\"flex-start\\\" gutter={10}>\\n <Col fixed>\\n <Menu bordered>\\n <MenuItem icon=\\\"reload\\\" text=\\\"重新加载\\\" />\\n <Menu.Divider />\\n <Menu.Item icon=\\\"heart-on\\\" text=\\\"另存为\\\" active />\\n <Menu.Item icon=\\\"appstore\\\" text=\\\"应用商城\\\" />\\n <Menu.Item icon=\\\"bar-chart\\\" text=\\\"月统计报表导出\\\" />\\n <Menu.Item icon=\\\"setting\\\" text=\\\"偏好设置\\\" />\\n <Menu.Divider />\\n <Menu.Item icon=\\\"map\\\" text=\\\"谷歌地图\\\" />\\n <Menu.Item icon=\\\"map\\\" text=\\\"百度地图\\\" href=\\\"https://map.baidu.com\\\" target=\\\"_blank\\\" />\\n </Menu>\\n </Col>\\n <Col fixed>\\n <Menu bordered>\\n <Menu.Divider title=\\\"编辑\\\" />\\n <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n <Menu.Item icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\" />\\n <Menu.Item icon=\\\"copy\\\" text=\\\"拷贝\\\" />\\n <Menu.Item icon=\\\"delete\\\" disabled text=\\\"删除\\\" />\\n <Menu.SubMenu icon=\\\"setting-o\\\" text=\\\"选项\\\" collapse>\\n <Menu.Item icon=\\\"dot-chart\\\" text=\\\"显示边栏\\\" />\\n <Menu.Item icon=\\\"date\\\" text=\\\"添加日期\\\" />\\n <Menu.Item icon=\\\"tags-o\\\" text=\\\"标签名称\\\" />\\n </Menu.SubMenu>\\n <Menu.Divider title=\\\"其它\\\" />\\n <Menu.SubMenu icon=\\\"bar-chart\\\" text=\\\"月统计报表导出\\\">\\n <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n <Menu.Item icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\" />\\n <Menu.Divider title=\\\"类别\\\" />\\n <Menu.Item icon=\\\"copy\\\" text=\\\"拷贝\\\" />\\n <Menu.SubMenu icon=\\\"bar-chart\\\" text=\\\"报表\\\" collapse>\\n <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n <Menu.SubMenu icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\">\\n <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n <Menu.Item icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\" />\\n </Menu.SubMenu>\\n </Menu.SubMenu>\\n </Menu.SubMenu>\\n <Menu.SubMenu icon=\\\"setting\\\" disabled text=\\\"偏好设置\\\">\\n <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n <Menu.Item icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\" />\\n </Menu.SubMenu>\\n <Menu.Item icon=\\\"map\\\" text=\\\"谷歌地图\\\" />\\n </Menu>\\n </Col>\\n <Col fixed>\\n <Menu bordered>\\n <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n <Menu.Item icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\" />\\n <Menu.SubMenu icon=\\\"bar-chart\\\" text=\\\"月统计报表导出\\\"\\n overlayProps={{\\n isOpen: true\\n }}\\n >\\n <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n <Menu.Divider title=\\\"类别\\\" />\\n <Menu.Item icon=\\\"copy\\\" text=\\\"拷贝\\\" />\\n <Menu.SubMenu icon=\\\"bar-chart\\\" text=\\\"报表\\\" collapse>\\n <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n <Menu.SubMenu icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\">\\n <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n <Menu.Item icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\" />\\n </Menu.SubMenu>\\n </Menu.SubMenu>\\n </Menu.SubMenu>\\n <Menu.Item icon=\\\"map\\\" text=\\\"谷歌地图\\\" />\\n </Menu>\\n </Col>\\n </Row>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 下拉菜单\\n\\n<!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Menu, Popover, Button, Row, Col } from 'uiw';\\n\\nconst btnStl = {position: 'relative', width: 70 }\\nconst content = (\\n <Menu>\\n <Menu.Divider title=\\\"编辑\\\" />\\n <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n <Menu.Item icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\" />\\n <Menu.Item icon=\\\"copy\\\" text=\\\"拷贝\\\" />\\n <Menu.Item icon=\\\"delete\\\" disabled text=\\\"删除\\\" />\\n <Menu.Divider title=\\\"其它\\\" />\\n <Menu.Item icon=\\\"bar-chart\\\" text=\\\"月统计报表导出\\\" />\\n <Menu.Item icon=\\\"setting\\\" disabled text=\\\"偏好设置\\\" />\\n <Menu.Item icon=\\\"map\\\" text=\\\"谷歌地图\\\" />\\n </Menu>\\n)\\nconst Demo = () => (\\n <div>\\n <div style={{ position: 'relative' }}>\\n\\n <Popover trigger=\\\"click\\\" placement=\\\"topLeft\\\" content={content}>\\n <Button style={{ ...btnStl, left: 70 }}>TL</Button>\\n </Popover>\\n <Popover trigger=\\\"click\\\" placement=\\\"top\\\" content={content}>\\n <Button style={{ ...btnStl, left: 70}}>Top</Button>\\n </Popover>\\n <Popover trigger=\\\"click\\\" placement=\\\"topRight\\\" content={content}>\\n <Button style={{ ...btnStl, left: 70 }}>TR</Button>\\n </Popover>\\n\\n </div>\\n <div style={{ position: 'relative', paddingTop: 10 }}>\\n\\n <Popover trigger=\\\"click\\\" placement=\\\"leftTop\\\" content={content}>\\n <Button style={{ ...btnStl }}>LT</Button>\\n </Popover>\\n <Popover trigger=\\\"click\\\" placement=\\\"rightTop\\\" content={content}>\\n <Button style={{ ...btnStl, left: 216 }}>RT</Button>\\n </Popover>\\n\\n </div>\\n <div style={{ position: 'relative', paddingTop: 10 }}>\\n\\n <Popover trigger=\\\"click\\\" placement=\\\"left\\\" content={content}>\\n <Button style={{ ...btnStl }}>Left</Button>\\n </Popover>\\n <Popover trigger=\\\"click\\\" placement=\\\"right\\\" content={content}>\\n <Button style={{ ...btnStl, left: 216 }}>Right</Button>\\n </Popover>\\n\\n </div>\\n <div style={{ position: 'relative', paddingTop: 10 }}>\\n\\n <Popover trigger=\\\"click\\\" placement=\\\"leftBottom\\\" content={content}>\\n <Button style={{ ...btnStl }}>LB</Button>\\n </Popover>\\n <Popover trigger=\\\"click\\\" placement=\\\"rightBottom\\\" content={content}>\\n <Button style={{ ...btnStl, left: 216 }}>RB</Button>\\n </Popover>\\n\\n </div>\\n <div style={{ position: 'relative', paddingTop: 10 }}>\\n\\n <Popover trigger=\\\"click\\\" placement=\\\"bottomLeft\\\" content={content}>\\n <Button style={{ ...btnStl, left: 70 }}>BL</Button>\\n </Popover>\\n <Popover trigger=\\\"click\\\" placement=\\\"bottom\\\" content={content}>\\n <Button style={{ ...btnStl, left: 70 }}>Bottom</Button>\\n </Popover>\\n <Popover trigger=\\\"click\\\" placement=\\\"bottomRight\\\" content={content}>\\n <Button style={{ ...btnStl, left: 70 }}>BR</Button>\\n </Popover>\\n\\n </div>\\n </div>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 内嵌菜单\\n\\n通过设置 `overlayProps={ isOpen: true }`，让菜单默认展开。\\n\\n<!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Menu, Row, Col } from 'uiw';\\n\\nconst Demo = () => (\\n <Row justify=\\\"flex-start\\\" gutter={10}>\\n <Col fixed>\\n <Menu bordered style={{ maxWidth: 200 }}>\\n <Menu.Item icon=\\\"delete\\\" disabled text=\\\"删除\\\" />\\n <Menu.SubMenu icon=\\\"setting-o\\\" text=\\\"选项\\\" disabled collapse>\\n <Menu.Item icon=\\\"dot-chart\\\" text=\\\"显示边栏\\\" />\\n <Menu.Item icon=\\\"date\\\" text=\\\"添加日期\\\" />\\n <Menu.Item icon=\\\"tags-o\\\" text=\\\"标签名称\\\" />\\n </Menu.SubMenu>\\n <Menu.Divider title=\\\"其它\\\" />\\n <Menu.SubMenu\\n icon=\\\"bar-chart\\\" text=\\\"每年2019年统计报表导出\\\" collapse\\n // overlayProps={{ isOpen: true }}\\n >\\n <Menu.Item text=\\\"添加文件\\\" />\\n <Menu.Item text=\\\"添加文件夹\\\" />\\n <Menu.Divider title=\\\"类别\\\" />\\n <Menu.Item icon=\\\"copy\\\" text=\\\"拷贝\\\" />\\n <Menu.SubMenu icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\" collapse>\\n <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n <Menu.Item icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\" />\\n </Menu.SubMenu>\\n </Menu.SubMenu>\\n <Menu.Item icon=\\\"setting\\\" disabled text=\\\"偏好设置\\\" />\\n <Menu.Item icon=\\\"map\\\" text=\\\"谷歌地图\\\" />\\n </Menu>\\n </Col>\\n </Row>\\n)\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 主题\\n\\n内建了两套主题 `light`、`dark`，默认 `light`。\\n\\n<!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport ReactDOM from 'react-dom';\\nimport { Menu, Row, Col, Switch } from 'uiw';\\n\\nclass Demo extends React.Component {\\n constructor(props) {\\n super(props);\\n this.state = {\\n theme: 'dark',\\n }\\n }\\n render() {\\n return (\\n <div>\\n <Row justify=\\\"flex-start\\\" gutter={10}>\\n <Col style={{ paddingBottom: 5 }}>\\n <Switch\\n checked\\n style={{ marginRight: 10 }}\\n onChange={(e) => {\\n this.setState({ theme: e.target.checked ? 'dark' : 'light' });\\n }}\\n />\\n </Col>\\n </Row>\\n <Row justify=\\\"flex-start\\\" gutter={10}>\\n <Col fixed>\\n <Menu theme={this.state.theme} bordered style={{ maxWidth: 200 }}>\\n <Menu.Item icon=\\\"delete\\\" disabled text=\\\"删除\\\" />\\n <Menu.SubMenu icon=\\\"setting-o\\\" text=\\\"选项\\\" disabled collapse>\\n <Menu.Item icon=\\\"dot-chart\\\" text=\\\"显示边栏\\\" />\\n <Menu.Item icon=\\\"date\\\" text=\\\"添加日期\\\" />\\n <Menu.Item icon=\\\"tags-o\\\" text=\\\"标签名称\\\" />\\n </Menu.SubMenu>\\n <Menu.Divider title=\\\"其它\\\" />\\n <Menu.Item active icon=\\\"map\\\" text=\\\"谷歌地图\\\" />\\n <Menu.SubMenu icon=\\\"bar-chart\\\" text=\\\"每年2019年统计报表导出\\\">\\n <Menu.Item text=\\\"添加文件\\\" />\\n <Menu.Item text=\\\"添加文件夹\\\" />\\n <Menu.Divider title=\\\"类别\\\" />\\n <Menu.SubMenu icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\" collapse>\\n <Menu.Item icon=\\\"file-add\\\" text=\\\"添加文件\\\" />\\n <Menu.Item icon=\\\"folder-add\\\" text=\\\"添加文件夹\\\" />\\n </Menu.SubMenu>\\n <Menu.Item icon=\\\"copy\\\" text=\\\"拷贝\\\" />\\n </Menu.SubMenu>\\n <Menu.Item icon=\\\"setting\\\" disabled text=\\\"偏好设置\\\" />\\n <Menu.SubMenu icon=\\\"setting-o\\\" text=\\\"选项\\\" collapse>\\n <Menu.Item icon=\\\"dot-chart\\\" text=\\\"显示边栏\\\" />\\n <Menu.Item icon=\\\"date\\\" text=\\\"添加日期\\\" />\\n <Menu.Item icon=\\\"tags-o\\\" text=\\\"标签名称\\\" />\\n </Menu.SubMenu>\\n </Menu>\\n </Col>\\n </Row>\\n </div>\\n );\\n }\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 完整菜单展示\\n\\n包括点击选中效果，事件等操作，完整的实例展示。\\n\\n<!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Menu, Row, Col, Switch } from 'uiw';\\n\\nclass Demo extends React.Component {\\n constructor(props) {\\n super(props);\\n this.state = {\\n theme: 'light',\\n menus: [\\n { key: '1', icon: 'delete', label: '删除' },\\n {\\n icon: 'setting-o',\\n label: '选项',\\n childrend: [\\n { key: '1-1', icon: 'dot-chart', label: '显示边栏' },\\n { key: '1-2', icon: 'date', disabled: true, label: '添加日期' },\\n { key: '1-3', icon: 'tags-o', label: '标签名称' },\\n ],\\n },\\n { divider: true },\\n { key: '2', icon: 'map', label: '谷歌地图' },\\n {\\n icon: 'bar-chart',\\n label: '每年2019年统计报表导出',\\n childrend: [\\n { key: '2-1', label: '统计添加文件' },\\n { key: '2-2', label: '统计添加文件夹' },\\n { key: '2-3', icon: 'tags-o', label: '类别', divider: true },\\n {\\n icon: 'folder-add',\\n label: '添加文件夹',\\n childrend: [\\n { key: '2-3-1', label: '添加文件夹' },\\n { key: '2-3-2', label: '添加文件' },\\n { key: '2-3-3', label: '添加文件夹' },\\n ],\\n },\\n ],\\n },\\n ],\\n active: '1',\\n }\\n }\\n\\n onClickItem(key) {\\n this.setState({ active: key });\\n }\\n\\n renderMenu(menus, k) {\\n const { active } = this.state;\\n const items = [];\\n menus.forEach((item, key) => {\\n if (item.childrend) {\\n items.push(\\n <Menu.SubMenu key={key} icon={item.icon} text={item.label} collapse\\n // 参数 usePortal 容易出问题\\n // overlayProps={{ usePortal: true }}\\n >\\n {this.renderMenu(item.childrend, `${k}${key}`)}\\n </Menu.SubMenu>\\n );\\n } else if (item.divider) {\\n items.push(<Menu.Divider key={`${k}${key}`} title={item.label} />);\\n } else {\\n items.push(\\n <Menu.Item\\n onClick={this.onClickItem.bind(this, item.key)}\\n active={active === item.key} key={`${k}${key}`}\\n icon={item.icon}\\n text={item.label}\\n />\\n );\\n }\\n });\\n return items;\\n }\\n\\n render() {\\n return (\\n <div>\\n <Row justify=\\\"flex-start\\\" gutter={10}>\\n <Col style={{ paddingBottom: 5 }}>\\n <Switch\\n checked={this.state.theme === 'dark'}\\n style={{ marginRight: 10 }}\\n onChange={(e) => {\\n this.setState({ theme: e.target.checked ? 'dark' : 'light' });\\n }}\\n />\\n </Col>\\n </Row>\\n <Row justify=\\\"flex-start\\\" gutter={10}>\\n <Col fixed>\\n <Menu inlineIndent={13} theme={this.state.theme} bordered style={{ maxWidth: 200 }}>\\n {this.renderMenu(this.state.menus, 'k')}\\n </Menu>\\n </Col>\\n </Row>\\n </div>\\n );\\n }\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n### 缩起内嵌菜单\\n\\n内嵌菜单可以被缩起/展开，需要 `SubMenu` 的参数 `collapse` 和 `inlineCollapsed` 配合使用。\\n\\n<!--rehype:bgWhite=true&noScroll=true&codeSandbox=true&codePen=true-->\\n```jsx\\nimport React from 'react';\\nimport ReactDOM from 'react-dom';\\nimport { Menu, Row, Col, Icon, Button } from 'uiw';\\n\\nconst menusData = [\\n { key: '1', icon: 'delete', label: '删除' },\\n {\\n icon: 'setting-o',\\n label: '选项',\\n childrend: [\\n { key: '1-1', icon: 'dot-chart', label: '显示边栏' },\\n { key: '1-2', icon: 'date', disabled: true, label: '添加日期' },\\n { key: '1-3', icon: 'tags-o', label: '标签名称' },\\n ],\\n },\\n { key: '2', icon: 'map', label: '谷歌地图' },\\n {\\n icon: 'bar-chart',\\n label: '每年2019年统计报表导出',\\n childrend: [\\n { key: '2-1', label: '统计添加文件' },\\n { key: '2-2', label: '统计添加文件夹' },\\n { key: '2-3', icon: 'tags-o', label: '类别', divider: true },\\n {\\n icon: 'folder-add',\\n label: '添加文件夹',\\n childrend: [\\n { key: '2-3-1', label: '添加文件夹' },\\n { key: '2-3-2', label: '添加文件' },\\n { key: '2-3-3', label: '添加文件夹' },\\n ],\\n },\\n ],\\n },\\n];\\n\\nconst Demo = () => {\\n const [theme, setTheme] = React.useState('dark');\\n const [collapse, setCollapse] = React.useState(false);\\n const menuRef = React.useRef();\\n function onClickItem() {\\n console.log(';;;;>>>')\\n }\\n function renderMenu(menus) {\\n const items = [];\\n menus.forEach((item, key) => {\\n if (item.childrend) {\\n items.push(\\n <Menu.SubMenu key={key} icon={item.icon} text={item.label}\\n collapse={collapse}\\n >\\n {renderMenu(item.childrend)}\\n </Menu.SubMenu>\\n );\\n } else if (item.divider) {\\n items.push(<Menu.Divider key={key} title={item.label} />);\\n } else {\\n items.push(\\n <Menu.Item\\n onClick={onClickItem.bind(this, item.key)}\\n key={key}\\n icon={item.icon}\\n text={item.label}\\n />\\n );\\n }\\n });\\n return items;\\n }\\n return (\\n <div style={{ maxWidth: 200}}>\\n <Button type=\\\"primary\\\" size=\\\"small\\\" onClick={() => setCollapse(!collapse)} style={{ marginBottom: 10 }}>\\n <Icon type={collapse ? 'menu-fold' : 'menu-unfold' } />\\n </Button>\\n <Switch\\n size=\\\"large\\\"\\n data-checked=\\\"light\\\"\\n data-unchecked=\\\"dark\\\"\\n checked={theme === 'dark'}\\n style={{ marginLeft: 10, marginBottom: 10, display: 'inline-block' }}\\n onChange={(e) => setTheme(e.target.checked ? 'dark' : 'light')}\\n />\\n <Menu\\n theme={theme}\\n ref={menuRef}\\n inlineCollapsed={collapse}\\n inlineIndent={13}\\n bordered\\n // style={{ maxWidth: 200 }}\\n >\\n {renderMenu(menusData)}\\n </Menu>\\n </div>\\n )\\n}\\n\\nReactDOM.render(<Demo />, _mount_);\\n```\\n\\n## Menu.Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| className | 设置类的名称 | String | - |\\n| style | 元素的行内样式 | Object | - |\\n| inlineIndent | 菜单缩进宽度 | Number | `10` |\\n| theme | 主题颜色 | Enum{`light`, `dark`} | - |\\n| bordered | 是否有边框 | Boolean | `false` |\\n| inlineCollapsed | 菜单是否收起状态 | Boolean | `false` |\\n\\n\\n## Menu.Item.Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| icon | 菜单图标 [`<Icon />`](#/components/icon) 的 `type` 属性 | ReactNode/String | - |\\n| text | 菜单标题内容 | ReactNode | - |\\n| addonAfter | 菜单标题后面插入内容 | ReactNode | - |\\n| ~~isSubMenuItem~~ | 不可用，SubMenu 组件传递给 Item 组件的**标记**属性，这是一个内部参数。 | Boolean | - |\\n| tagName | 设置子节点标签名，默认 `<a />` 标签，也可以指定路由 [`<Link />`](https://reacttraining.com/react-router/web/api/Link) | String | `a` |\\n| active | 激活选中状态 | Boolean | `false` |\\n| disabled | 禁用状态 | Boolean | `false` |\\n\\n其它参数可根据 `tagName` 来设置，默认 `<a />` 标签时，可设置 `href=\\\"https://wwww.google.com\\\"` 或者 `target=\\\"_blank\\\"` 等参数，你可以设置 [react-router-dom](https://github.com/ReactTraining/react-router) 路由 `<Link>`，例如：\\n\\n```jsx\\nimport { Menu } from 'uiw';\\nimport { Link } from 'react-router-dom';\\n\\nconst Demo = () => {\\n return (\\n <Menu style={{ maxWidth: 200 }}>\\n <Menu.Item tagName={Link} to=\\\"/home\\\" icon=\\\"reload\\\" text=\\\"跳转首页\\\" />\\n <Menu.Item icon=\\\"map\\\" text=\\\"百度地图\\\" href=\\\"https://map.baidu.com\\\" target=\\\"_blank\\\" />\\n </Menu>\\n )\\n}\\n```\\n\\n## Menu.SubMenu.Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| icon | 菜单图标 [`<Icon />`](#/components/icon) 的 `type` 属性 | String | - |\\n| text | 菜单标题内容 | ReactNode | - |\\n| disabled | 禁用状态 | Boolean | `false` |\\n| collapse | 默认子菜单是 OverlayTrigger 的弹出层，通过设置 `collapse={true}` 变为~~折叠~~(弹出框式 `@v4.2.0+`)菜单 | Boolean | `false` |\\n| overlayProps | 对象将传递到 `OverlayTrigger` 组件，修改部分参数，相关参数参考 [`OverlayTrigger`](#/components/overlay-trigger) | Object | - |\\n\\n## Menu.Divider.Props\\n\\n| 参数 | 说明 | 类型 | 默认值 |\\n|--------- |-------- |--------- |-------- |\\n| className | 设置类的名称 | String | - |\\n| style | 元素的行内样式 | Object | - |\\n| title | 标题 | String | - |\\n\";"],"names":[],"sourceRoot":""}