-
Notifications
You must be signed in to change notification settings - Fork 0
/
62-a28f22da2d828c0b81f9.js
1 lines (1 loc) · 65.8 KB
/
62-a28f22da2d828c0b81f9.js
1
webpackJsonp([62],{1604:function(n,a,s){"use strict";function t(n){return n&&n.__esModule?n:{default:n}}function p(n){return h.default.createElement(n.tag,(0,M.default)({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function e(n){return h.default.createElement(p,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function o(n){return h.default.createElement(p,{tag:"style",html:n.style})}function c(n,a){for(;n;)return n.offsetTop&&"static"!==getComputedStyle(n).position&&(a+=n.offsetTop),c(n.parentNode,a);return a}Object.defineProperty(a,"__esModule",{value:!0});var l=s(1),u=t(l),k=s(4),i=t(k),r=s(2),d=t(r),g=s(3),m=t(g),f=s(7),M=t(f),y=s(0),h=t(y),v=s(232),E=t(v),I=s(359),b=function(){var n=I.Menu.MenuItem,a=function(n,a){},s=function(){return h.default.createElement(I.Menu,{onClick:a,className:"hello"},h.default.createElement(n,{key:"1-1",className:"food"},"Food"),h.default.createElement(n,{key:"1-2",disabled:!0},"Clothing"))};return h.default.createElement(s,null)},C=function(){var n=I.Menu.MenuItem,a=I.Menu.SubMenu,s=function(n,a){},t=function(){return h.default.createElement(I.Menu,{onClick:s,className:"hello"},h.default.createElement(n,{key:"1-1",className:"food"},"Food"),h.default.createElement(n,{key:"1-2",disabled:!0},"Clothing"),h.default.createElement(a,{title:"Electrical",overlayClassName:"sub"},h.default.createElement(n,{key:"2-1",className:"tv"},"TV"),h.default.createElement(n,{key:"2-2",disabled:!0},"Laptop"),h.default.createElement(n,{key:"2-3"},"Washing")),h.default.createElement(a,{title:"Makeup",disabled:!0},h.default.createElement(n,{key:"3-1"},"Eye Shadow"),h.default.createElement(n,{key:"3-2"},"Cleanser")))};return h.default.createElement(t,null)},S=function(){var n=I.Menu.MenuItem,a=I.Menu.SubMenu,s=function(n,a){};return h.default.createElement("div",{className:"zent-menu-simple-wrapper"},h.default.createElement(I.Menu,{className:"simple",onClick:s},h.default.createElement(n,null,"Guangdong"),h.default.createElement(a,{title:"Jiangsu"},h.default.createElement(n,null,"Suzhou"),h.default.createElement(n,null,"Wuxi"),h.default.createElement(n,null,"Changzhou"),h.default.createElement(n,null,"Zhenjiang"),h.default.createElement(a,{title:"Nanjing"},h.default.createElement(n,null,"Jiangning"),h.default.createElement(n,null,"Xianling"))),h.default.createElement(n,null,"Shandong"),h.default.createElement(a,{title:"Zhejiang"},h.default.createElement(a,{title:"Hangzhou"},h.default.createElement(n,null,"Xihu"),h.default.createElement(n,null,"Shangcheng")),h.default.createElement(n,null,"Wenzhou"),h.default.createElement(n,null,"Shaoxing"),h.default.createElement(n,null,"Jiaxing"))))},w=function(){var n=I.Menu.MenuItem,a=I.Menu.SubMenu,s=function(n,a){},t=function(){return h.default.createElement(I.Menu,{onClick:s,className:"hello"},h.default.createElement(a,{title:h.default.createElement("span",null,h.default.createElement(I.Icon,{type:"youzan"}),"Electrical"),overlayClassName:"sub"},h.default.createElement(n,{key:"2-1",className:"tv"},"TV"),h.default.createElement(n,{key:"2-2",disabled:!0},"Laptop"),h.default.createElement(n,{key:"2-3"},"Washing")),h.default.createElement(a,{title:h.default.createElement("span",null,h.default.createElement(I.Icon,{type:"settings"}),"Makeup")},h.default.createElement(n,{key:"3-1"},"Eye Shadow"),h.default.createElement(n,{key:"3-2"},"Cleanser")))};return h.default.createElement(t,null)},N=function(){var n=I.Menu.MenuItem,a=I.Menu.SubMenu,s=function(n,a){},t=function(){return h.default.createElement(I.Menu,{mode:"inline",onClick:s},h.default.createElement(n,{key:"1-1"},"Food"),h.default.createElement(n,{key:"1-2"},"Clothing"),h.default.createElement(a,{title:h.default.createElement("span",null,h.default.createElement(I.Icon,{type:"youzan"}),"Electrical"),key:"1-3"},h.default.createElement(n,{key:"1-3-1"},"TV"),h.default.createElement(n,{key:"1-3-2"},"Laptop"),h.default.createElement(n,{key:"1-3-3"},"Washing")),h.default.createElement(a,{title:"Makeup",key:"1-4"},h.default.createElement(n,{key:"1-4-1"},"Eye Shadow"),h.default.createElement(n,{key:"1-4-2"},"Cleanser"),h.default.createElement(a,{key:"1-4-3",title:"Food"},h.default.createElement(n,{key:"1-4-3-1"},"TV"),h.default.createElement(n,{key:"1-4-3-2"},"Laptop"),h.default.createElement(n,{key:"1-4-3-3"},"Washing"))),h.default.createElement(n,{key:"1-5",disabled:!0},"Clothing"),h.default.createElement(a,{key:"1-6",title:"Food",disabled:!0}))};return h.default.createElement(t,null)},x=function(){var n=I.Menu.MenuItem,a=I.Menu.SubMenu,s=function(n,a){},t=function(){return h.default.createElement(I.Menu,{mode:"inline",defaultSelectedKey:"1-2",defaultExpandKeys:["1-4","1-4-3"],onClick:s},h.default.createElement(n,{key:"1-1"},"Food"),h.default.createElement(n,{key:"1-2"},"Clothing"),h.default.createElement(a,{title:h.default.createElement("span",null,h.default.createElement(I.Icon,{type:"youzan"}),"Electrical"),key:"1-3"},h.default.createElement(n,{key:"1-3-1"},"TV"),h.default.createElement(n,{key:"1-3-2"},"Laptop"),h.default.createElement(n,{key:"1-3-3"},"Washing")),h.default.createElement(a,{title:"Makeup",key:"1-4"},h.default.createElement(n,{key:"1-4-1"},"Eye Shadow"),h.default.createElement(n,{key:"1-4-2"},"Cleanser"),h.default.createElement(a,{key:"1-4-3",title:"Food"},h.default.createElement(n,{key:"1-4-3-1"},"TV"),h.default.createElement(n,{key:"1-4-3-2"},"Laptop"),h.default.createElement(n,{key:"1-4-3-3"},"Washing"))))};return h.default.createElement(t,null)},z=function(n){function a(){var n,s,t,p;(0,u.default)(this,a);for(var e=arguments.length,o=Array(e),c=0;c<e;c++)o[c]=arguments[c];return s=t=(0,d.default)(this,(n=a.__proto__||Object.getPrototypeOf(a)).call.apply(n,[this].concat(o))),t.state={showCode:!1},t.toggle=function(){t.setState({showCode:!t.state.showCode})},p=s,(0,d.default)(t,p)}return(0,m.default)(a,n),(0,i.default)(a,[{key:"render",value:function(){var n=this.state.showCode,a=this.props,s=a.title,t=a.src,e=a.children;return h.default.createElement("div",{className:"zandoc-react-demo"},h.default.createElement("div",{className:"zandoc-react-demo__preview"},e),h.default.createElement("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle},h.default.createElement("div",{className:"zandoc-react-demo__title"},h.default.createElement("p",null,s||"")),h.default.createElement("i",{className:"zenticon zenticon-caret-up zandoc-react-demo__toggle "+(n?"zandoc-react-demo__toggle-on":"zandoc-react-demo__toggle-off")})),n&&h.default.createElement("pre",{className:"zandoc-react-demo__code"},h.default.createElement(p,{tag:"code",html:t,attributes:{className:"language-jsx"}})))}}]),a}(y.Component),_=function(n){function a(){return(0,u.default)(this,a),(0,d.default)(this,(a.__proto__||Object.getPrototypeOf(a)).apply(this,arguments))}return(0,m.default)(a,n),(0,i.default)(a,[{key:"componentDidMount",value:function(){var n=location.hash;if(n){var a=document.querySelector('a[href="'+n+'"]');a&&(0,E.default)(document.documentElement,0,c(a,-9))}}},{key:"render",value:function(){return h.default.createElement("div",{className:"zandoc-react-container",key:null},h.default.createElement(o,{style:""}),h.default.createElement(e,{html:'<h2 class="anchor-heading"><a href="#menu">¶</a><a href="javascript:void(0)" id="menu" class="anchor-point"></a>Menu</h2>\n<p>Menu, can be used to provide navigation.</p>\n<h3 class="anchor-heading"><a href="#demos">¶</a><a href="javascript:void(0)" id="demos" class="anchor-point"></a>Demos</h3>'}),h.default.createElement(z,{title:"Basic Usage",id:"Demobasic",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Menu <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> <span class="token punctuation">{</span> MenuItem <span class="token punctuation">}</span> <span class="token operator">=</span> Menu<span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">onClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">,</span> key<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span> key<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">Example</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu</span>\n <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>onClick<span class="token punctuation">}</span></span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hello<span class="token punctuation">"</span></span>\n <span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1-1<span class="token punctuation">"</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>food<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Food<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1-2<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>Clothing<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span>\n<span class="token punctuation">}</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Example</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},h.default.createElement(b)),h.default.createElement(z,{title:"Submenu",id:"Demosubmenu",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Menu <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> <span class="token punctuation">{</span> MenuItem<span class="token punctuation">,</span> SubMenu <span class="token punctuation">}</span> <span class="token operator">=</span> Menu<span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">onClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">,</span> key<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span> key<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">Example</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu</span>\n <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>onClick<span class="token punctuation">}</span></span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hello<span class="token punctuation">"</span></span>\n <span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1-1<span class="token punctuation">"</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>food<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Food<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1-2<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>Clothing<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SubMenu</span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token string">"Electrical"</span><span class="token punctuation">}</span></span> <span class="token attr-name">overlayClassName</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>sub<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2-1<span class="token punctuation">"</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tv<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>TV<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2-2<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>Laptop<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Washing<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>SubMenu</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SubMenu</span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token string">"Makeup"</span><span class="token punctuation">}</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>3-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Eye Shadow<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>3-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Cleanser<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>SubMenu</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span>\n<span class="token punctuation">}</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Example</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},h.default.createElement(C)),h.default.createElement(z,{title:"Nested",id:"Demonested",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Menu <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token punctuation">{</span> MenuItem<span class="token punctuation">,</span> SubMenu <span class="token punctuation">}</span> <span class="token operator">=</span> Menu<span class="token punctuation">;</span>\n<span class="token keyword">const</span> <span class="token function-variable function">clickHandler</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>event<span class="token punctuation">,</span> key<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">,</span> key<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zent-menu-simple-wrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>simple<span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>clickHandler<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span><span class="token punctuation">></span></span>Guangdong<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SubMenu</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Jiangsu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span><span class="token punctuation">></span></span>Suzhou<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span><span class="token punctuation">></span></span>Wuxi<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span><span class="token punctuation">></span></span>Changzhou<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span><span class="token punctuation">></span></span>Zhenjiang<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SubMenu</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Nanjing<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span><span class="token punctuation">></span></span>Jiangning<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span><span class="token punctuation">></span></span>Xianling<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>SubMenu</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>SubMenu</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span><span class="token punctuation">></span></span>Shandong<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SubMenu</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Zhejiang<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SubMenu</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Hangzhou<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span><span class="token punctuation">></span></span>Xihu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span><span class="token punctuation">></span></span>Shangcheng<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>SubMenu</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span><span class="token punctuation">></span></span>Wenzhou<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span><span class="token punctuation">></span></span>Shaoxing<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span><span class="token punctuation">></span></span>Jiaxing<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>SubMenu</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">,</span> mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},h.default.createElement(S)),h.default.createElement(z,{title:"WithIcon",id:"Demowithicon",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Menu<span class="token punctuation">,</span> Icon <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> <span class="token punctuation">{</span> MenuItem<span class="token punctuation">,</span> SubMenu <span class="token punctuation">}</span> <span class="token operator">=</span> Menu<span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">onClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">,</span> key<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span> key<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">Example</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu</span>\n <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>onClick<span class="token punctuation">}</span></span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>hello<span class="token punctuation">"</span></span>\n <span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SubMenu</span> <span class="token attr-name">title={<span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>youzan<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>Electrical<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">}</span> overlayClassName<span class="token operator">=</span><span class="token string">"sub"</span><span class="token operator">></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2-1<span class="token punctuation">"</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>tv<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>TV<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2-2<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>Laptop<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Washing<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>SubMenu</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SubMenu</span> <span class="token attr-name">title={<span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>settings<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>Makeup<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">}</span><span class="token operator">></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>3-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Eye Shadow<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>3-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Cleanser<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>SubMenu</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span>\n<span class="token punctuation">}</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Example</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},h.default.createElement(w)),h.default.createElement(z,{title:"Inline",id:"Demoinline",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Menu <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> <span class="token punctuation">{</span> MenuItem<span class="token punctuation">,</span> SubMenu <span class="token punctuation">}</span> <span class="token operator">=</span> Menu<span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">onClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">,</span> key<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span> key<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">Example</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu</span>\n <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>inline<span class="token punctuation">"</span></span>\n <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>onClick<span class="token punctuation">}</span></span>\n <span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n Food\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n Clothing\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SubMenu</span> <span class="token attr-name">title={<span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>youzan<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>Electrical<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">}</span> key<span class="token operator">=</span><span class="token string">"1-3"</span><span class="token operator">></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1-3-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>TV<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1-3-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Laptop<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1-3-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Washing<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>SubMenu</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SubMenu</span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token string">"Makeup"</span><span class="token punctuation">}</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1-4-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Eye Shadow<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1-4-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Cleanser<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SubMenu</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1-4-3<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token string">"Food"</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1-4-3-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>TV<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1-4-3-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Laptop<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1-4-3-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Washing<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>SubMenu</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>SubMenu</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1-5<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>\n Clothing\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SubMenu</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1-6<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token string">"Food"</span><span class="token punctuation">}</span></span> <span class="token attr-name">disabled</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span>\n<span class="token punctuation">}</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Example</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},h.default.createElement(N)),h.default.createElement(z,{title:"Inline with selected key",id:"Demoinlineselected",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> Menu <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> <span class="token punctuation">{</span> MenuItem<span class="token punctuation">,</span> SubMenu <span class="token punctuation">}</span> <span class="token operator">=</span> Menu<span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">onClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span>e<span class="token punctuation">,</span> key<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span> key<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">Example</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu</span>\n <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>inline<span class="token punctuation">"</span></span>\n <span class="token attr-name">defaultSelectedKey</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1-2<span class="token punctuation">"</span></span>\n <span class="token attr-name">defaultExpandKeys</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">"1-4"</span><span class="token punctuation">,</span> <span class="token string">"1-4-3"</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>onClick<span class="token punctuation">}</span></span>\n <span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n Food\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n Clothing\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SubMenu</span> <span class="token attr-name">title={<span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Icon</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>youzan<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>Electrical<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">}</span> key<span class="token operator">=</span><span class="token string">"1-3"</span><span class="token operator">></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1-3-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>TV<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1-3-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Laptop<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1-3-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Washing<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>SubMenu</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SubMenu</span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token string">"Makeup"</span><span class="token punctuation">}</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1-4-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Eye Shadow<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1-4-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Cleanser<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SubMenu</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1-4-3<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token string">"Food"</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1-4-3-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>TV<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1-4-3-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Laptop<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1-4-3-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Washing<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>MenuItem</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>SubMenu</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>SubMenu</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span>\n<span class="token punctuation">}</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Example</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},h.default.createElement(x)),h.default.createElement(e,{html:'<h3 class="anchor-heading"><a href="#api">¶</a><a href="javascript:void(0)" id="api" class="anchor-point"></a>API</h3>\n<h4 class="anchor-heading"><a href="#menu">¶</a><a href="javascript:void(0)" id="menu" class="anchor-point"></a>Menu</h4>\n<table class="table">\n<thead>\n<tr>\n<th>Property</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n<th>Optional</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>onClick</td>\n<td>Callback fires when a node of menu is clicked</td>\n<td>func</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>onSubMenuClick</td>\n<td>Callback fires when a SubMenu is clicked</td>\n<td>func</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>onExpandChange</td>\n<td>Callback fires when SubMenus toggle expand/collapsed, input param is the array of currently expanded SubMenu IDs</td>\n<td>func</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>style</td>\n<td>Custom inline styles</td>\n<td>object</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>mode</td>\n<td>the display mode</td>\n<td>string</td>\n<td>\'pop\'</td>\n<td>\'pop\', \'inline\'</td>\n</tr>\n<tr>\n<td>defaultExpandKeys</td>\n<td>the default expand keys for SubMenu</td>\n<td>array</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>defaultSelectedKey</td>\n<td>the default selected Key for MenuItem</td>\n<td>string</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>inlineIndent</td>\n<td>the distance in px when the mode is inline</td>\n<td>number</td>\n<td>24</td>\n<td></td>\n</tr>\n<tr>\n<td>className</td>\n<td>class name for the node</td>\n<td>string</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>prefix</td>\n<td>custom prefix</td>\n<td>string</td>\n<td>\'zent\'</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h4 class="anchor-heading"><a href="#menuitem">¶</a><a href="javascript:void(0)" id="menuitem" class="anchor-point"></a>MenuItem</h4>\n<table class="table">\n<thead>\n<tr>\n<th>Property</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>key</td>\n<td>the unique identify of the item</td>\n<td>string</td>\n<td>an ID generated internally</td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>whether to disable the menu item</td>\n<td>bool</td>\n<td></td>\n</tr>\n<tr>\n<td>className</td>\n<td>custom class name</td>\n<td>string</td>\n<td></td>\n</tr>\n<tr>\n<td>prefix</td>\n<td>custom prefix</td>\n<td>string</td>\n<td>\'zent\'</td>\n</tr>\n</tbody>\n</table>\n<h4 class="anchor-heading"><a href="#submenu">¶</a><a href="javascript:void(0)" id="submenu" class="anchor-point"></a>SubMenu</h4>\n<table class="table">\n<thead>\n<tr>\n<th>Property</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>key</td>\n<td>the unique identify of the item</td>\n<td>string</td>\n<td>an ID generated internally</td>\n</tr>\n<tr>\n<td>title</td>\n<td>title of the submenu</td>\n<td>node</td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>whether to disable the submenu</td>\n<td>bool</td>\n<td></td>\n</tr>\n<tr>\n<td>overlayClassName</td>\n<td>custom class name of the pop menu</td>\n<td>string</td>\n<td></td>\n</tr>\n<tr>\n<td>className</td>\n<td>custom class name of the submenu item</td>\n<td>string</td>\n<td></td>\n</tr>\n<tr>\n<td>prefix</td>\n<td>custom prefix of the submenu item</td>\n<td>string</td>\n<td>\'zent\'</td>\n</tr>\n</tbody>\n</table>\n<h3 class="anchor-heading"><a href="#faq">¶</a><a href="javascript:void(0)" id="faq" class="anchor-point"></a>FAQ</h3>\n<ul>\n<li>\n<p>A click event callback function, whose parameters are event and key(which is the key property of the node), is used as a unified agent.</p>\n</li>\n<li>\n<p>When the <code>key</code> property is not set for the MenuItem, a unique identify of the node (starting from 0) is generated automatically in order and hierarchy, which will be saved on the <code>index</code> property as the second argument of the <code>onClick</code> function.\nWhen the <code>key</code> property is set manually, the property will be copied to the <code>index</code> property and will override the unique identify generated. It\'s recommanded to manually set the <code>key</code> property to a proper value of MenuItem in the condition that the Menu is not complex.</p>\n<pre><code class="language-text"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Menu</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span><span class="token punctuation">></span></span> <span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span> <span class="token string">\'item_0\'</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>SubMenu</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span><span class="token punctuation">></span></span> <span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span> <span class="token string">\'item_1_0\'</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span><span class="token punctuation">></span></span> <span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span> <span class="token string">\'item_1_1\'</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>SubMenu</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MenuItem</span><span class="token punctuation">></span></span> <span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span> <span class="token string">\'item_2\'</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>Menu</span><span class="token punctuation">></span></span>\n <span class="token template-string"><span class="token string">``</span></span>`</code></pre>\n</li>\n</ul>'}))}}]),a}(y.Component);a.default=_}});