(window.webpackJsonp=window.webpackJsonp||[]).push([[46],{1426:function(s,a,t){"use strict";t.r(a);var n=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n  <div>\n    <a-menu v-model="current" mode="horizontal">\n      <a-menu-item key="mail"> <a-icon type="mail"/>Navigation One </a-menu-item>\n      <a-menu-item key="app" disabled=""> <a-icon type="appstore"/>Navigation Two </a-menu-item>\n      <a-sub-menu>\n        <span slot="title" class="submenu-title-wrapper"><a-icon type="setting"/>Navigation Three - Submenu</span>\n        <a-menu-item-group title="Item 1">\n          <a-menu-item key="setting:1">Option 1</a-menu-item>\n          <a-menu-item key="setting:2">Option 2</a-menu-item>\n        </a-menu-item-group>\n        <a-menu-item-group title="Item 2">\n          <a-menu-item key="setting:3">Option 3</a-menu-item>\n          <a-menu-item key="setting:4">Option 4</a-menu-item>\n        </a-menu-item-group>\n      </a-sub-menu>\n      <a-menu-item key="alipay">\n        <a href="https://antdv.com" target="_blank" rel="noopener noreferrer">Navigation Four - Link</a>\n      </a-menu-item>\n    </a-menu>\n  </div>\n',script:"\n  export default {\n    data() {\n      return {\n        current: ['mail'],\n      };\n    },\n  };\n",style:null,us:"\n#### Top Navigation\nHorizontal top navigation menu.\n",cn:"\n#### 顶部导航\n水平的顶部导航菜单。\n",sourceCode:'<template>\n  <div>\n    <a-menu v-model="current" mode="horizontal">\n      <a-menu-item key="mail"> <a-icon type="mail" />Navigation One </a-menu-item>\n      <a-menu-item key="app" disabled> <a-icon type="appstore" />Navigation Two </a-menu-item>\n      <a-sub-menu>\n        <span slot="title" class="submenu-title-wrapper"\n          ><a-icon type="setting" />Navigation Three - Submenu</span\n        >\n        <a-menu-item-group title="Item 1">\n          <a-menu-item key="setting:1">Option 1</a-menu-item>\n          <a-menu-item key="setting:2">Option 2</a-menu-item>\n        </a-menu-item-group>\n        <a-menu-item-group title="Item 2">\n          <a-menu-item key="setting:3">Option 3</a-menu-item>\n          <a-menu-item key="setting:4">Option 4</a-menu-item>\n        </a-menu-item-group>\n      </a-sub-menu>\n      <a-menu-item key="alipay">\n        <a href="https://antdv.com" target="_blank" rel="noopener noreferrer"\n          >Navigation Four - Link</a\n        >\n      </a-menu-item>\n    </a-menu>\n  </div>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        current: [\'mail\'],\n      };\n    },\n  };\n<\/script>\n'}}},[t("template",{slot:"component"},[t("div",[t("a-menu",{attrs:{mode:"horizontal"},model:{value:s.current,callback:function(a){s.current=a},expression:"current"}},[t("a-menu-item",{key:"mail"},[t("a-icon",{attrs:{type:"mail"}}),s._v("Navigation One ")],1),s._v(" "),t("a-menu-item",{key:"app",attrs:{disabled:""}},[t("a-icon",{attrs:{type:"appstore"}}),s._v("Navigation Two ")],1),s._v(" "),t("a-sub-menu",[t("span",{staticClass:"submenu-title-wrapper",attrs:{slot:"title"},slot:"title"},[t("a-icon",{attrs:{type:"setting"}}),s._v("Navigation Three - Submenu")],1),s._v(" "),t("a-menu-item-group",{attrs:{title:"Item 1"}},[t("a-menu-item",{key:"setting:1"},[s._v("Option 1")]),s._v(" "),t("a-menu-item",{key:"setting:2"},[s._v("Option 2")])],1),s._v(" "),t("a-menu-item-group",{attrs:{title:"Item 2"}},[t("a-menu-item",{key:"setting:3"},[s._v("Option 3")]),s._v(" "),t("a-menu-item",{key:"setting:4"},[s._v("Option 4")])],1)],1),s._v(" "),t("a-menu-item",{key:"alipay"},[t("a",{attrs:{href:"https://antdv.com",target:"_blank",rel:"noopener noreferrer"}},[s._v("Navigation Four - Link")])])],1)],1)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"顶部导航"}},[s._v("顶部导航 "),t("a",{staticClass:"anchor",attrs:{href:"#顶部导航"}},[s._v("#")])]),s._v(" "),t("p",[s._v("水平的顶部导航菜单。")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Top-Navigation"}},[s._v("Top Navigation "),t("a",{staticClass:"anchor",attrs:{href:"#Top-Navigation"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Horizontal top navigation menu.")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"current"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"horizontal"')]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"mail"')]),s._v(">")]),s._v(" "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"mail"')]),s._v(" />")]),s._v("Navigation One "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"app"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v(" "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"appstore"')]),s._v(" />")]),s._v("Navigation Two "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"submenu-title-wrapper"')]),s._v("\n          >")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"setting"')]),s._v(" />")]),s._v("Navigation Three - Submenu"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v("\n        >")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item-group")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Item 1"')]),s._v(">")]),s._v("\n          "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"setting:1"')]),s._v(">")]),s._v("Option 1"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n          "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"setting:2"')]),s._v(">")]),s._v("Option 2"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item-group")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item-group")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Item 2"')]),s._v(">")]),s._v("\n          "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"setting:3"')]),s._v(">")]),s._v("Option 3"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n          "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"setting:4"')]),s._v(">")]),s._v("Option 4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item-group")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"alipay"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"https://antdv.com"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("target")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"_blank"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("rel")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"noopener noreferrer"')]),s._v("\n          >")]),s._v("Navigation Four - Link"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a")]),s._v("\n        >")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("current")]),s._v(": ["),t("span",{staticClass:"hljs-string"},[s._v("'mail'")]),s._v("],\n      };\n    },\n  };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};n._withStripped=!0;var e={data:function(){return{current:["mail"]}}},l=t(31),i=Object(l.a)(e,n,[],!1,null,null,null);i.options.__file="components/menu/demo/horizontal.md";var v=i.exports,_=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n  <div style="width: 256px">\n    <a-button type="primary" @click="toggleCollapsed" style="margin-bottom: 16px">\n      <a-icon :type="collapsed ? \'menu-unfold\' : \'menu-fold\'"/>\n    </a-button>\n    <a-menu :defaultSelectedKeys="[\'1\']" :defaultOpenKeys="[\'sub1\']" mode="inline" theme="dark" :inlineCollapsed="collapsed">\n      <a-menu-item key="1">\n        <a-icon type="pie-chart"/>\n        <span>Option 1</span>\n      </a-menu-item>\n      <a-menu-item key="2">\n        <a-icon type="desktop"/>\n        <span>Option 2</span>\n      </a-menu-item>\n      <a-menu-item key="3">\n        <a-icon type="inbox"/>\n        <span>Option 3</span>\n      </a-menu-item>\n      <a-sub-menu key="sub1">\n        <span slot="title"><a-icon type="mail"/><span>Navigation One</span></span>\n        <a-menu-item key="5">Option 5</a-menu-item>\n        <a-menu-item key="6">Option 6</a-menu-item>\n        <a-menu-item key="7">Option 7</a-menu-item>\n        <a-menu-item key="8">Option 8</a-menu-item>\n      </a-sub-menu>\n      <a-sub-menu key="sub2">\n        <span slot="title"><a-icon type="appstore"/><span>Navigation Two</span></span>\n        <a-menu-item key="9">Option 9</a-menu-item>\n        <a-menu-item key="10">Option 10</a-menu-item>\n        <a-sub-menu key="sub3" title="Submenu">\n          <a-menu-item key="11">Option 11</a-menu-item>\n          <a-menu-item key="12">Option 12</a-menu-item>\n        </a-sub-menu>\n      </a-sub-menu>\n    </a-menu>\n  </div>\n',script:"\n  export default {\n    data() {\n      return {\n        collapsed: false,\n      };\n    },\n    methods: {\n      toggleCollapsed() {\n        this.collapsed = !this.collapsed;\n      },\n    },\n  };\n",style:null,us:"\n#### Collapsed inline menu\nInline menu could be collapsed.\n",cn:"\n#### 缩起内嵌菜单\n内嵌菜单可以被缩起/展开。\n",sourceCode:'<template>\n  <div style="width: 256px">\n    <a-button type="primary" @click="toggleCollapsed" style="margin-bottom: 16px">\n      <a-icon :type="collapsed ? \'menu-unfold\' : \'menu-fold\'" />\n    </a-button>\n    <a-menu\n      :defaultSelectedKeys="[\'1\']"\n      :defaultOpenKeys="[\'sub1\']"\n      mode="inline"\n      theme="dark"\n      :inlineCollapsed="collapsed"\n    >\n      <a-menu-item key="1">\n        <a-icon type="pie-chart" />\n        <span>Option 1</span>\n      </a-menu-item>\n      <a-menu-item key="2">\n        <a-icon type="desktop" />\n        <span>Option 2</span>\n      </a-menu-item>\n      <a-menu-item key="3">\n        <a-icon type="inbox" />\n        <span>Option 3</span>\n      </a-menu-item>\n      <a-sub-menu key="sub1">\n        <span slot="title"><a-icon type="mail" /><span>Navigation One</span></span>\n        <a-menu-item key="5">Option 5</a-menu-item>\n        <a-menu-item key="6">Option 6</a-menu-item>\n        <a-menu-item key="7">Option 7</a-menu-item>\n        <a-menu-item key="8">Option 8</a-menu-item>\n      </a-sub-menu>\n      <a-sub-menu key="sub2">\n        <span slot="title"><a-icon type="appstore" /><span>Navigation Two</span></span>\n        <a-menu-item key="9">Option 9</a-menu-item>\n        <a-menu-item key="10">Option 10</a-menu-item>\n        <a-sub-menu key="sub3" title="Submenu">\n          <a-menu-item key="11">Option 11</a-menu-item>\n          <a-menu-item key="12">Option 12</a-menu-item>\n        </a-sub-menu>\n      </a-sub-menu>\n    </a-menu>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        collapsed: false,\n      };\n    },\n    methods: {\n      toggleCollapsed() {\n        this.collapsed = !this.collapsed;\n      },\n    },\n  };\n<\/script>\n'}}},[t("template",{slot:"component"},[t("div",{staticStyle:{width:"256px"}},[t("a-button",{staticStyle:{"margin-bottom":"16px"},attrs:{type:"primary"},on:{click:s.toggleCollapsed}},[t("a-icon",{attrs:{type:s.collapsed?"menu-unfold":"menu-fold"}})],1),s._v(" "),t("a-menu",{attrs:{defaultSelectedKeys:["1"],defaultOpenKeys:["sub1"],mode:"inline",theme:"dark",inlineCollapsed:s.collapsed}},[t("a-menu-item",{key:"1"},[t("a-icon",{attrs:{type:"pie-chart"}}),s._v(" "),t("span",[s._v("Option 1")])],1),s._v(" "),t("a-menu-item",{key:"2"},[t("a-icon",{attrs:{type:"desktop"}}),s._v(" "),t("span",[s._v("Option 2")])],1),s._v(" "),t("a-menu-item",{key:"3"},[t("a-icon",{attrs:{type:"inbox"}}),s._v(" "),t("span",[s._v("Option 3")])],1),s._v(" "),t("a-sub-menu",{key:"sub1"},[t("span",{attrs:{slot:"title"},slot:"title"},[t("a-icon",{attrs:{type:"mail"}}),t("span",[s._v("Navigation One")])],1),s._v(" "),t("a-menu-item",{key:"5"},[s._v("Option 5")]),s._v(" "),t("a-menu-item",{key:"6"},[s._v("Option 6")]),s._v(" "),t("a-menu-item",{key:"7"},[s._v("Option 7")]),s._v(" "),t("a-menu-item",{key:"8"},[s._v("Option 8")])],1),s._v(" "),t("a-sub-menu",{key:"sub2"},[t("span",{attrs:{slot:"title"},slot:"title"},[t("a-icon",{attrs:{type:"appstore"}}),t("span",[s._v("Navigation Two")])],1),s._v(" "),t("a-menu-item",{key:"9"},[s._v("Option 9")]),s._v(" "),t("a-menu-item",{key:"10"},[s._v("Option 10")]),s._v(" "),t("a-sub-menu",{key:"sub3",attrs:{title:"Submenu"}},[t("a-menu-item",{key:"11"},[s._v("Option 11")]),s._v(" "),t("a-menu-item",{key:"12"},[s._v("Option 12")])],1)],1)],1)],1)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"缩起内嵌菜单"}},[s._v("缩起内嵌菜单 "),t("a",{staticClass:"anchor",attrs:{href:"#缩起内嵌菜单"}},[s._v("#")])]),s._v(" "),t("p",[s._v("内嵌菜单可以被缩起/展开。")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Collapsed-inline-menu"}},[s._v("Collapsed inline menu "),t("a",{staticClass:"anchor",attrs:{href:"#Collapsed-inline-menu"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Inline menu could be collapsed.")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"width: 256px"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"toggleCollapsed"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"margin-bottom: 16px"')]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"collapsed ? 'menu-unfold' : 'menu-fold'\"")]),s._v(" />")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu")]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v(":defaultSelectedKeys")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"['1']\"")]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v(":defaultOpenKeys")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"['sub1']\"")]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"inline"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("theme")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v(":inlineCollapsed")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"collapsed"')]),s._v("\n    >")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"pie-chart"')]),s._v(" />")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Option 1"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"desktop"')]),s._v(" />")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Option 2"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"inbox"')]),s._v(" />")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Option 3"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"sub1"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"mail"')]),s._v(" />")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Navigation One"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"5"')]),s._v(">")]),s._v("Option 5"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),s._v("Option 6"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"7"')]),s._v(">")]),s._v("Option 7"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("Option 8"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"sub2"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"appstore"')]),s._v(" />")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Navigation Two"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),s._v("Option 9"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("Option 10"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"sub3"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Submenu"')]),s._v(">")]),s._v("\n          "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("Option 11"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n          "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("Option 12"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("collapsed")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n      };\n    },\n    "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      toggleCollapsed() {\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".collapsed = !"),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".collapsed;\n      },\n    },\n  };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};_._withStripped=!0;var p={data:function(){return{collapsed:!1}},methods:{toggleCollapsed:function(){this.collapsed=!this.collapsed}}},m=Object(l.a)(p,_,[],!1,null,null,null);m.options.__file="components/menu/demo/inline-collapsed.md";var c=m.exports,h=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n  <div>\n    <a-menu @click="handleClick" style="width: 256px" :defaultSelectedKeys="[\'1\']" :openKeys.sync="openKeys" mode="inline">\n      <a-sub-menu key="sub1" @titleClick="titleClick">\n        <span slot="title"><a-icon type="mail"/><span>Navigation One</span></span>\n        <a-menu-item-group key="g1">\n          <template slot="title"><a-icon type="qq"/><span>Item 1</span></template>\n          <a-menu-item key="1">Option 1</a-menu-item>\n          <a-menu-item key="2">Option 2</a-menu-item>\n        </a-menu-item-group>\n        <a-menu-item-group key="g2" title="Item 2">\n          <a-menu-item key="3">Option 3</a-menu-item>\n          <a-menu-item key="4">Option 4</a-menu-item>\n        </a-menu-item-group>\n      </a-sub-menu>\n      <a-sub-menu key="sub2" @titleClick="titleClick">\n        <span slot="title"><a-icon type="appstore"/><span>Navigation Two</span></span>\n        <a-menu-item key="5">Option 5</a-menu-item>\n        <a-menu-item key="6">Option 6</a-menu-item>\n        <a-sub-menu key="sub3" title="Submenu">\n          <a-menu-item key="7">Option 7</a-menu-item>\n          <a-menu-item key="8">Option 8</a-menu-item>\n        </a-sub-menu>\n      </a-sub-menu>\n      <a-sub-menu key="sub4">\n        <span slot="title"><a-icon type="setting"/><span>Navigation Three</span></span>\n        <a-menu-item key="9">Option 9</a-menu-item>\n        <a-menu-item key="10">Option 10</a-menu-item>\n        <a-menu-item key="11">Option 11</a-menu-item>\n        <a-menu-item key="12">Option 12</a-menu-item>\n      </a-sub-menu>\n    </a-menu>\n  </div>\n',script:"\n  export default {\n    data() {\n      return {\n        current: ['mail'],\n        openKeys: ['sub1'],\n      };\n    },\n    methods: {\n      handleClick(e) {\n        console.log('click', e);\n      },\n      titleClick(e) {\n        console.log('titleClick', e);\n      },\n    },\n    watch: {\n      openKeys(val) {\n        console.log('openKeys', val);\n      },\n    },\n  };\n",style:null,us:"\n#### Inline menu\nVertical menu with inline submenus.\n",cn:"\n#### 内嵌菜单\n垂直菜单，子菜单内嵌在菜单区域。\n",sourceCode:'<template>\n  <div>\n    <a-menu\n      @click="handleClick"\n      style="width: 256px"\n      :defaultSelectedKeys="[\'1\']"\n      :openKeys.sync="openKeys"\n      mode="inline"\n    >\n      <a-sub-menu key="sub1" @titleClick="titleClick">\n        <span slot="title"><a-icon type="mail" /><span>Navigation One</span></span>\n        <a-menu-item-group key="g1">\n          <template slot="title"\n            ><a-icon type="qq" /><span>Item 1</span></template\n          >\n          <a-menu-item key="1">Option 1</a-menu-item>\n          <a-menu-item key="2">Option 2</a-menu-item>\n        </a-menu-item-group>\n        <a-menu-item-group key="g2" title="Item 2">\n          <a-menu-item key="3">Option 3</a-menu-item>\n          <a-menu-item key="4">Option 4</a-menu-item>\n        </a-menu-item-group>\n      </a-sub-menu>\n      <a-sub-menu key="sub2" @titleClick="titleClick">\n        <span slot="title"><a-icon type="appstore" /><span>Navigation Two</span></span>\n        <a-menu-item key="5">Option 5</a-menu-item>\n        <a-menu-item key="6">Option 6</a-menu-item>\n        <a-sub-menu key="sub3" title="Submenu">\n          <a-menu-item key="7">Option 7</a-menu-item>\n          <a-menu-item key="8">Option 8</a-menu-item>\n        </a-sub-menu>\n      </a-sub-menu>\n      <a-sub-menu key="sub4">\n        <span slot="title"><a-icon type="setting" /><span>Navigation Three</span></span>\n        <a-menu-item key="9">Option 9</a-menu-item>\n        <a-menu-item key="10">Option 10</a-menu-item>\n        <a-menu-item key="11">Option 11</a-menu-item>\n        <a-menu-item key="12">Option 12</a-menu-item>\n      </a-sub-menu>\n    </a-menu>\n  </div>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        current: [\'mail\'],\n        openKeys: [\'sub1\'],\n      };\n    },\n    methods: {\n      handleClick(e) {\n        console.log(\'click\', e);\n      },\n      titleClick(e) {\n        console.log(\'titleClick\', e);\n      },\n    },\n    watch: {\n      openKeys(val) {\n        console.log(\'openKeys\', val);\n      },\n    },\n  };\n<\/script>\n'}}},[t("template",{slot:"component"},[t("div",[t("a-menu",{staticStyle:{width:"256px"},attrs:{defaultSelectedKeys:["1"],openKeys:s.openKeys,mode:"inline"},on:{click:s.handleClick,"update:openKeys":function(a){s.openKeys=a},"update:open-keys":function(a){s.openKeys=a}}},[t("a-sub-menu",{key:"sub1",on:{titleClick:s.titleClick}},[t("span",{attrs:{slot:"title"},slot:"title"},[t("a-icon",{attrs:{type:"mail"}}),t("span",[s._v("Navigation One")])],1),s._v(" "),t("a-menu-item-group",{key:"g1"},[t("template",{slot:"title"},[t("a-icon",{attrs:{type:"qq"}}),t("span",[s._v("Item 1")])],1),s._v(" "),t("a-menu-item",{key:"1"},[s._v("Option 1")]),s._v(" "),t("a-menu-item",{key:"2"},[s._v("Option 2")])],2),s._v(" "),t("a-menu-item-group",{key:"g2",attrs:{title:"Item 2"}},[t("a-menu-item",{key:"3"},[s._v("Option 3")]),s._v(" "),t("a-menu-item",{key:"4"},[s._v("Option 4")])],1)],1),s._v(" "),t("a-sub-menu",{key:"sub2",on:{titleClick:s.titleClick}},[t("span",{attrs:{slot:"title"},slot:"title"},[t("a-icon",{attrs:{type:"appstore"}}),t("span",[s._v("Navigation Two")])],1),s._v(" "),t("a-menu-item",{key:"5"},[s._v("Option 5")]),s._v(" "),t("a-menu-item",{key:"6"},[s._v("Option 6")]),s._v(" "),t("a-sub-menu",{key:"sub3",attrs:{title:"Submenu"}},[t("a-menu-item",{key:"7"},[s._v("Option 7")]),s._v(" "),t("a-menu-item",{key:"8"},[s._v("Option 8")])],1)],1),s._v(" "),t("a-sub-menu",{key:"sub4"},[t("span",{attrs:{slot:"title"},slot:"title"},[t("a-icon",{attrs:{type:"setting"}}),t("span",[s._v("Navigation Three")])],1),s._v(" "),t("a-menu-item",{key:"9"},[s._v("Option 9")]),s._v(" "),t("a-menu-item",{key:"10"},[s._v("Option 10")]),s._v(" "),t("a-menu-item",{key:"11"},[s._v("Option 11")]),s._v(" "),t("a-menu-item",{key:"12"},[s._v("Option 12")])],1)],1)],1)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"内嵌菜单"}},[s._v("内嵌菜单 "),t("a",{staticClass:"anchor",attrs:{href:"#内嵌菜单"}},[s._v("#")])]),s._v(" "),t("p",[s._v("垂直菜单，子菜单内嵌在菜单区域。")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Inline-menu"}},[s._v("Inline menu "),t("a",{staticClass:"anchor",attrs:{href:"#Inline-menu"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Vertical menu with inline submenus.")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu")]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"width: 256px"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v(":defaultSelectedKeys")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"['1']\"")]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v(":openKeys.sync")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"openKeys"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"inline"')]),s._v("\n    >")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"sub1"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@titleClick")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"titleClick"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"mail"')]),s._v(" />")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Navigation One"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item-group")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"g1"')]),s._v(">")]),s._v("\n          "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v("\n            >")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"qq"')]),s._v(" />")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Item 1"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v("\n          >")]),s._v("\n          "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("Option 1"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n          "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("Option 2"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item-group")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item-group")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"g2"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Item 2"')]),s._v(">")]),s._v("\n          "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("Option 3"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n          "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("Option 4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item-group")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"sub2"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@titleClick")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"titleClick"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"appstore"')]),s._v(" />")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Navigation Two"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"5"')]),s._v(">")]),s._v("Option 5"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),s._v("Option 6"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"sub3"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Submenu"')]),s._v(">")]),s._v("\n          "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"7"')]),s._v(">")]),s._v("Option 7"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n          "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("Option 8"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"sub4"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"setting"')]),s._v(" />")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Navigation Three"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),s._v("Option 9"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("Option 10"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("Option 11"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("Option 12"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("current")]),s._v(": ["),t("span",{staticClass:"hljs-string"},[s._v("'mail'")]),s._v("],\n        "),t("span",{staticClass:"hljs-attr"},[s._v("openKeys")]),s._v(": ["),t("span",{staticClass:"hljs-string"},[s._v("'sub1'")]),s._v("],\n      };\n    },\n    "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleClick(e) {\n        "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),t("span",{staticClass:"hljs-string"},[s._v("'click'")]),s._v(", e);\n      },\n      titleClick(e) {\n        "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),t("span",{staticClass:"hljs-string"},[s._v("'titleClick'")]),s._v(", e);\n      },\n    },\n    "),t("span",{staticClass:"hljs-attr"},[s._v("watch")]),s._v(": {\n      openKeys(val) {\n        "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),t("span",{staticClass:"hljs-string"},[s._v("'openKeys'")]),s._v(", val);\n      },\n    },\n  };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};h._withStripped=!0;var u={data:function(){return{current:["mail"],openKeys:["sub1"]}},methods:{handleClick:function(s){console.log("click",s)},titleClick:function(s){console.log("titleClick",s)}},watch:{openKeys:function(s){console.log("openKeys",s)}}},o=Object(l.a)(u,h,[],!1,null,null,null);o.options.__file="components/menu/demo/inline.md";var r=o.exports,C=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n  <div>\n    <a-menu mode="inline" :openKeys="openKeys" @openChange="onOpenChange" style="width: 256px">\n      <a-sub-menu key="sub1">\n        <span slot="title"><a-icon type="mail"/><span>Navigation One</span></span>\n        <a-menu-item key="1">Option 1</a-menu-item>\n        <a-menu-item key="2">Option 2</a-menu-item>\n        <a-menu-item key="3">Option 3</a-menu-item>\n        <a-menu-item key="4">Option 4</a-menu-item>\n      </a-sub-menu>\n      <a-sub-menu key="sub2">\n        <span slot="title"><a-icon type="appstore"/><span>Navigation Two</span></span>\n        <a-menu-item key="5">Option 5</a-menu-item>\n        <a-menu-item key="6">Option 6</a-menu-item>\n        <a-sub-menu key="sub3" title="Submenu">\n          <a-menu-item key="7">Option 7</a-menu-item>\n          <a-menu-item key="8">Option 8</a-menu-item>\n        </a-sub-menu>\n      </a-sub-menu>\n      <a-sub-menu key="sub4">\n        <span slot="title"><a-icon type="setting"/><span>Navigation Three</span></span>\n        <a-menu-item key="9">Option 9</a-menu-item>\n        <a-menu-item key="10">Option 10</a-menu-item>\n        <a-menu-item key="11">Option 11</a-menu-item>\n        <a-menu-item key="12">Option 12</a-menu-item>\n      </a-sub-menu>\n    </a-menu>\n  </div>\n',script:"\n  export default {\n    data() {\n      return {\n        rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],\n        openKeys: ['sub1'],\n      };\n    },\n    methods: {\n      onOpenChange(openKeys) {\n        const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);\n        if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {\n          this.openKeys = openKeys;\n        } else {\n          this.openKeys = latestOpenKey ? [latestOpenKey] : [];\n        }\n      },\n    },\n  };\n",style:null,us:"\n#### Open current submenu only\nClick the menu and you will see that all the other menus gets collapsed to keep the entire menu compact.\n",cn:"\n#### 只展开当前父级菜单\n点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁。\n",sourceCode:'<template>\n  <div>\n    <a-menu mode="inline" :openKeys="openKeys" @openChange="onOpenChange" style="width: 256px">\n      <a-sub-menu key="sub1">\n        <span slot="title"><a-icon type="mail" /><span>Navigation One</span></span>\n        <a-menu-item key="1">Option 1</a-menu-item>\n        <a-menu-item key="2">Option 2</a-menu-item>\n        <a-menu-item key="3">Option 3</a-menu-item>\n        <a-menu-item key="4">Option 4</a-menu-item>\n      </a-sub-menu>\n      <a-sub-menu key="sub2">\n        <span slot="title"><a-icon type="appstore" /><span>Navigation Two</span></span>\n        <a-menu-item key="5">Option 5</a-menu-item>\n        <a-menu-item key="6">Option 6</a-menu-item>\n        <a-sub-menu key="sub3" title="Submenu">\n          <a-menu-item key="7">Option 7</a-menu-item>\n          <a-menu-item key="8">Option 8</a-menu-item>\n        </a-sub-menu>\n      </a-sub-menu>\n      <a-sub-menu key="sub4">\n        <span slot="title"><a-icon type="setting" /><span>Navigation Three</span></span>\n        <a-menu-item key="9">Option 9</a-menu-item>\n        <a-menu-item key="10">Option 10</a-menu-item>\n        <a-menu-item key="11">Option 11</a-menu-item>\n        <a-menu-item key="12">Option 12</a-menu-item>\n      </a-sub-menu>\n    </a-menu>\n  </div>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        rootSubmenuKeys: [\'sub1\', \'sub2\', \'sub4\'],\n        openKeys: [\'sub1\'],\n      };\n    },\n    methods: {\n      onOpenChange(openKeys) {\n        const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);\n        if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {\n          this.openKeys = openKeys;\n        } else {\n          this.openKeys = latestOpenKey ? [latestOpenKey] : [];\n        }\n      },\n    },\n  };\n<\/script>\n'}}},[t("template",{slot:"component"},[t("div",[t("a-menu",{staticStyle:{width:"256px"},attrs:{mode:"inline",openKeys:s.openKeys},on:{openChange:s.onOpenChange}},[t("a-sub-menu",{key:"sub1"},[t("span",{attrs:{slot:"title"},slot:"title"},[t("a-icon",{attrs:{type:"mail"}}),t("span",[s._v("Navigation One")])],1),s._v(" "),t("a-menu-item",{key:"1"},[s._v("Option 1")]),s._v(" "),t("a-menu-item",{key:"2"},[s._v("Option 2")]),s._v(" "),t("a-menu-item",{key:"3"},[s._v("Option 3")]),s._v(" "),t("a-menu-item",{key:"4"},[s._v("Option 4")])],1),s._v(" "),t("a-sub-menu",{key:"sub2"},[t("span",{attrs:{slot:"title"},slot:"title"},[t("a-icon",{attrs:{type:"appstore"}}),t("span",[s._v("Navigation Two")])],1),s._v(" "),t("a-menu-item",{key:"5"},[s._v("Option 5")]),s._v(" "),t("a-menu-item",{key:"6"},[s._v("Option 6")]),s._v(" "),t("a-sub-menu",{key:"sub3",attrs:{title:"Submenu"}},[t("a-menu-item",{key:"7"},[s._v("Option 7")]),s._v(" "),t("a-menu-item",{key:"8"},[s._v("Option 8")])],1)],1),s._v(" "),t("a-sub-menu",{key:"sub4"},[t("span",{attrs:{slot:"title"},slot:"title"},[t("a-icon",{attrs:{type:"setting"}}),t("span",[s._v("Navigation Three")])],1),s._v(" "),t("a-menu-item",{key:"9"},[s._v("Option 9")]),s._v(" "),t("a-menu-item",{key:"10"},[s._v("Option 10")]),s._v(" "),t("a-menu-item",{key:"11"},[s._v("Option 11")]),s._v(" "),t("a-menu-item",{key:"12"},[s._v("Option 12")])],1)],1)],1)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"只展开当前父级菜单"}},[s._v("只展开当前父级菜单 "),t("a",{staticClass:"anchor",attrs:{href:"#只展开当前父级菜单"}},[s._v("#")])]),s._v(" "),t("p",[s._v("点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁。")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Open-current-submenu-only"}},[s._v("Open current submenu only "),t("a",{staticClass:"anchor",attrs:{href:"#Open-current-submenu-only"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Click the menu and you will see that all the other menus gets collapsed to keep the entire menu compact.")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"inline"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":openKeys")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"openKeys"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@openChange")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"onOpenChange"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"width: 256px"')]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"sub1"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"mail"')]),s._v(" />")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Navigation One"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("Option 1"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("Option 2"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("Option 3"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("Option 4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"sub2"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"appstore"')]),s._v(" />")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Navigation Two"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"5"')]),s._v(">")]),s._v("Option 5"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),s._v("Option 6"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"sub3"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Submenu"')]),s._v(">")]),s._v("\n          "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"7"')]),s._v(">")]),s._v("Option 7"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n          "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("Option 8"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"sub4"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"setting"')]),s._v(" />")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Navigation Three"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),s._v("Option 9"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("Option 10"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("Option 11"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("Option 12"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("rootSubmenuKeys")]),s._v(": ["),t("span",{staticClass:"hljs-string"},[s._v("'sub1'")]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v("'sub2'")]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v("'sub4'")]),s._v("],\n        "),t("span",{staticClass:"hljs-attr"},[s._v("openKeys")]),s._v(": ["),t("span",{staticClass:"hljs-string"},[s._v("'sub1'")]),s._v("],\n      };\n    },\n    "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      onOpenChange(openKeys) {\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" latestOpenKey = openKeys.find("),t("span",{staticClass:"hljs-function"},[t("span",{staticClass:"hljs-params"},[s._v("key")]),s._v(" =>")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".openKeys.indexOf(key) === "),t("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(");\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" ("),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".rootSubmenuKeys.indexOf(latestOpenKey) === "),t("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(") {\n          "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".openKeys = openKeys;\n        } "),t("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".openKeys = latestOpenKey ? [latestOpenKey] : [];\n        }\n      },\n    },\n  };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};C._withStripped=!0;var j={data:function(){return{rootSubmenuKeys:["sub1","sub2","sub4"],openKeys:["sub1"]}},methods:{onOpenChange:function(s){var a=this,t=s.find((function(s){return-1===a.openKeys.indexOf(s)}));-1===this.rootSubmenuKeys.indexOf(t)?this.openKeys=s:this.openKeys=t?[t]:[]}}},d=Object(l.a)(j,C,[],!1,null,null,null);d.options.__file="components/menu/demo/sider-current.md";var g=d.exports,y=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n  <div>\n    <a-switch :defaultChecked="false" @change="changeMode"/> Change Mode\n    <span className="ant-divider" style="margin: 0 1em"/>\n    <a-switch :defaultChecked="false" @change="changeTheme"/> Change Theme\n    <br/>\n    <br/>\n    <a-menu style="width: 256px" :defaultSelectedKeys="[\'1\']" :defaultOpenKeys="[\'sub1\']" :mode="mode" :theme="theme">\n      <a-menu-item key="1">\n        <a-icon type="mail"/>\n        Navigation One\n      </a-menu-item>\n      <a-menu-item key="2">\n        <a-icon type="calendar"/>\n        Navigation Two\n      </a-menu-item>\n      <a-sub-menu key="sub1">\n        <span slot="title"><a-icon type="appstore"/><span>Navigation Three</span></span>\n        <a-menu-item key="3">Option 3</a-menu-item>\n        <a-menu-item key="4">Option 4</a-menu-item>\n        <a-sub-menu key="sub1-2" title="Submenu">\n          <a-menu-item key="5">Option 5</a-menu-item>\n          <a-menu-item key="6">Option 6</a-menu-item>\n        </a-sub-menu>\n      </a-sub-menu>\n      <a-sub-menu key="sub2">\n        <span slot="title"><a-icon type="setting"/><span>Navigation Four</span></span>\n        <a-menu-item key="7">Option 7</a-menu-item>\n        <a-menu-item key="8">Option 8</a-menu-item>\n        <a-menu-item key="9">Option 9</a-menu-item>\n        <a-menu-item key="10">Option 10</a-menu-item>\n      </a-sub-menu>\n    </a-menu>\n  </div>\n',script:"\n  export default {\n    data() {\n      return {\n        mode: 'inline',\n        theme: 'light',\n      };\n    },\n    methods: {\n      changeMode(checked) {\n        this.mode = checked ? 'vertical' : 'inline';\n      },\n      changeTheme(checked) {\n        this.theme = checked ? 'dark' : 'light';\n      },\n    },\n  };\n",style:null,us:"\n#### Switch the menu type\nShow the dynamic switching mode (between 'inline' and 'vertical').\n",cn:"\n#### 切换菜单类型\n展示动态切换模式。\n",sourceCode:'<template>\n  <div>\n    <a-switch :defaultChecked="false" @change="changeMode" /> Change Mode\n    <span className="ant-divider" style="margin: 0 1em" />\n    <a-switch :defaultChecked="false" @change="changeTheme" /> Change Theme\n    <br />\n    <br />\n    <a-menu\n      style="width: 256px"\n      :defaultSelectedKeys="[\'1\']"\n      :defaultOpenKeys="[\'sub1\']"\n      :mode="mode"\n      :theme="theme"\n    >\n      <a-menu-item key="1">\n        <a-icon type="mail" />\n        Navigation One\n      </a-menu-item>\n      <a-menu-item key="2">\n        <a-icon type="calendar" />\n        Navigation Two\n      </a-menu-item>\n      <a-sub-menu key="sub1">\n        <span slot="title"><a-icon type="appstore" /><span>Navigation Three</span></span>\n        <a-menu-item key="3">Option 3</a-menu-item>\n        <a-menu-item key="4">Option 4</a-menu-item>\n        <a-sub-menu key="sub1-2" title="Submenu">\n          <a-menu-item key="5">Option 5</a-menu-item>\n          <a-menu-item key="6">Option 6</a-menu-item>\n        </a-sub-menu>\n      </a-sub-menu>\n      <a-sub-menu key="sub2">\n        <span slot="title"><a-icon type="setting" /><span>Navigation Four</span></span>\n        <a-menu-item key="7">Option 7</a-menu-item>\n        <a-menu-item key="8">Option 8</a-menu-item>\n        <a-menu-item key="9">Option 9</a-menu-item>\n        <a-menu-item key="10">Option 10</a-menu-item>\n      </a-sub-menu>\n    </a-menu>\n  </div>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        mode: \'inline\',\n        theme: \'light\',\n      };\n    },\n    methods: {\n      changeMode(checked) {\n        this.mode = checked ? \'vertical\' : \'inline\';\n      },\n      changeTheme(checked) {\n        this.theme = checked ? \'dark\' : \'light\';\n      },\n    },\n  };\n<\/script>\n'}}},[t("template",{slot:"component"},[t("div",[t("a-switch",{attrs:{defaultChecked:!1},on:{change:s.changeMode}}),s._v(" Change Mode\n    "),t("span",{staticStyle:{margin:"0 1em"},attrs:{className:"ant-divider"}}),s._v(" "),t("a-switch",{attrs:{defaultChecked:!1},on:{change:s.changeTheme}}),s._v(" Change Theme\n    "),t("br"),s._v(" "),t("br"),s._v(" "),t("a-menu",{staticStyle:{width:"256px"},attrs:{defaultSelectedKeys:["1"],defaultOpenKeys:["sub1"],mode:s.mode,theme:s.theme}},[t("a-menu-item",{key:"1"},[t("a-icon",{attrs:{type:"mail"}}),s._v("\n        Navigation One\n      ")],1),s._v(" "),t("a-menu-item",{key:"2"},[t("a-icon",{attrs:{type:"calendar"}}),s._v("\n        Navigation Two\n      ")],1),s._v(" "),t("a-sub-menu",{key:"sub1"},[t("span",{attrs:{slot:"title"},slot:"title"},[t("a-icon",{attrs:{type:"appstore"}}),t("span",[s._v("Navigation Three")])],1),s._v(" "),t("a-menu-item",{key:"3"},[s._v("Option 3")]),s._v(" "),t("a-menu-item",{key:"4"},[s._v("Option 4")]),s._v(" "),t("a-sub-menu",{key:"sub1-2",attrs:{title:"Submenu"}},[t("a-menu-item",{key:"5"},[s._v("Option 5")]),s._v(" "),t("a-menu-item",{key:"6"},[s._v("Option 6")])],1)],1),s._v(" "),t("a-sub-menu",{key:"sub2"},[t("span",{attrs:{slot:"title"},slot:"title"},[t("a-icon",{attrs:{type:"setting"}}),t("span",[s._v("Navigation Four")])],1),s._v(" "),t("a-menu-item",{key:"7"},[s._v("Option 7")]),s._v(" "),t("a-menu-item",{key:"8"},[s._v("Option 8")]),s._v(" "),t("a-menu-item",{key:"9"},[s._v("Option 9")]),s._v(" "),t("a-menu-item",{key:"10"},[s._v("Option 10")])],1)],1)],1)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"切换菜单类型"}},[s._v("切换菜单类型 "),t("a",{staticClass:"anchor",attrs:{href:"#切换菜单类型"}},[s._v("#")])]),s._v(" "),t("p",[s._v("展示动态切换模式。")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Switch-the-menu-type"}},[s._v("Switch the menu type "),t("a",{staticClass:"anchor",attrs:{href:"#Switch-the-menu-type"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Show the dynamic switching mode (between 'inline' and 'vertical').")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-switch")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":defaultChecked")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"changeMode"')]),s._v(" />")]),s._v(" Change Mode\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("className")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"ant-divider"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"margin: 0 1em"')]),s._v(" />")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-switch")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":defaultChecked")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"changeTheme"')]),s._v(" />")]),s._v(" Change Theme\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu")]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"width: 256px"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v(":defaultSelectedKeys")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"['1']\"")]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v(":defaultOpenKeys")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"['sub1']\"")]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v(":mode")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"mode"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v(":theme")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"theme"')]),s._v("\n    >")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"mail"')]),s._v(" />")]),s._v("\n        Navigation One\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"calendar"')]),s._v(" />")]),s._v("\n        Navigation Two\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"sub1"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"appstore"')]),s._v(" />")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Navigation Three"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("Option 3"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("Option 4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"sub1-2"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Submenu"')]),s._v(">")]),s._v("\n          "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"5"')]),s._v(">")]),s._v("Option 5"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n          "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),s._v("Option 6"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"sub2"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"setting"')]),s._v(" />")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Navigation Four"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"7"')]),s._v(">")]),s._v("Option 7"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("Option 8"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),s._v("Option 9"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("Option 10"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'inline'")]),s._v(",\n        "),t("span",{staticClass:"hljs-attr"},[s._v("theme")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'light'")]),s._v(",\n      };\n    },\n    "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      changeMode(checked) {\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".mode = checked ? "),t("span",{staticClass:"hljs-string"},[s._v("'vertical'")]),s._v(" : "),t("span",{staticClass:"hljs-string"},[s._v("'inline'")]),s._v(";\n      },\n      changeTheme(checked) {\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".theme = checked ? "),t("span",{staticClass:"hljs-string"},[s._v("'dark'")]),s._v(" : "),t("span",{staticClass:"hljs-string"},[s._v("'light'")]),s._v(";\n      },\n    },\n  };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};y._withStripped=!0;var k={data:function(){return{mode:"inline",theme:"light"}},methods:{changeMode:function(s){this.mode=s?"vertical":"inline"},changeTheme:function(s){this.theme=s?"dark":"light"}}},b=Object(l.a)(k,y,[],!1,null,null,null);b.options.__file="components/menu/demo/switch-mode.md";var O=b.exports,f=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n  <div>\n    <a-switch defaultChecked="" @change="changeTheme" checkedChildren="dark" unCheckedChildren="light"/>\n    <br/>\n    <br/>\n    <a-menu style="width: 256px" :defaultSelectedKeys="[\'1\']" :defaultOpenKeys="[\'sub1\']" mode="inline" :theme="theme" :selectedKeys="[current]" @click="handleClick">\n      <a-menu-item key="1">\n        <a-icon type="mail"/>\n        Navigation One\n      </a-menu-item>\n      <a-menu-item key="2">\n        <a-icon type="calendar"/>\n        Navigation Two\n      </a-menu-item>\n      <a-sub-menu key="sub1">\n        <span slot="title"><a-icon type="appstore"/><span>Navigation Three</span></span>\n        <a-menu-item key="3">Option 3</a-menu-item>\n        <a-menu-item key="4">Option 4</a-menu-item>\n        <a-sub-menu key="sub1-2" title="Submenu">\n          <a-menu-item key="5">Option 5</a-menu-item>\n          <a-menu-item key="6">Option 6</a-menu-item>\n        </a-sub-menu>\n      </a-sub-menu>\n      <a-sub-menu key="sub2">\n        <span slot="title"><a-icon type="setting"/><span>Navigation Four</span></span>\n        <a-menu-item key="7">Option 7</a-menu-item>\n        <a-menu-item key="8">Option 8</a-menu-item>\n        <a-menu-item key="9">Option 9</a-menu-item>\n        <a-menu-item key="10">Option 10</a-menu-item>\n      </a-sub-menu>\n    </a-menu>\n  </div>\n',script:"\n  export default {\n    data() {\n      return {\n        current: '1',\n        theme: 'dark',\n      };\n    },\n    methods: {\n      handleClick(e) {\n        console.log('click ', e);\n        this.current = e.key;\n      },\n      changeTheme(checked) {\n        this.theme = checked ? 'dark' : 'light';\n      },\n    },\n  };\n",style:null,us:"\n#### Menu Themes\nThere are two built-in themes: 'light' and 'dark'. The default value is 'light'.\n",cn:"\n#### 主题\n内建了两套主题 `light|dark`，默认 `light`。\n",sourceCode:'<template>\n  <div>\n    <a-switch\n      defaultChecked\n      @change="changeTheme"\n      checkedChildren="dark"\n      unCheckedChildren="light"\n    />\n    <br />\n    <br />\n    <a-menu\n      style="width: 256px"\n      :defaultSelectedKeys="[\'1\']"\n      :defaultOpenKeys="[\'sub1\']"\n      mode="inline"\n      :theme="theme"\n      :selectedKeys="[current]"\n      @click="handleClick"\n    >\n      <a-menu-item key="1">\n        <a-icon type="mail" />\n        Navigation One\n      </a-menu-item>\n      <a-menu-item key="2">\n        <a-icon type="calendar" />\n        Navigation Two\n      </a-menu-item>\n      <a-sub-menu key="sub1">\n        <span slot="title"><a-icon type="appstore" /><span>Navigation Three</span></span>\n        <a-menu-item key="3">Option 3</a-menu-item>\n        <a-menu-item key="4">Option 4</a-menu-item>\n        <a-sub-menu key="sub1-2" title="Submenu">\n          <a-menu-item key="5">Option 5</a-menu-item>\n          <a-menu-item key="6">Option 6</a-menu-item>\n        </a-sub-menu>\n      </a-sub-menu>\n      <a-sub-menu key="sub2">\n        <span slot="title"><a-icon type="setting" /><span>Navigation Four</span></span>\n        <a-menu-item key="7">Option 7</a-menu-item>\n        <a-menu-item key="8">Option 8</a-menu-item>\n        <a-menu-item key="9">Option 9</a-menu-item>\n        <a-menu-item key="10">Option 10</a-menu-item>\n      </a-sub-menu>\n    </a-menu>\n  </div>\n</template>\n<script>\n  export default {\n    data() {\n      return {\n        current: \'1\',\n        theme: \'dark\',\n      };\n    },\n    methods: {\n      handleClick(e) {\n        console.log(\'click \', e);\n        this.current = e.key;\n      },\n      changeTheme(checked) {\n        this.theme = checked ? \'dark\' : \'light\';\n      },\n    },\n  };\n<\/script>\n'}}},[t("template",{slot:"component"},[t("div",[t("a-switch",{attrs:{defaultChecked:"",checkedChildren:"dark",unCheckedChildren:"light"},on:{change:s.changeTheme}}),s._v(" "),t("br"),s._v(" "),t("br"),s._v(" "),t("a-menu",{staticStyle:{width:"256px"},attrs:{defaultSelectedKeys:["1"],defaultOpenKeys:["sub1"],mode:"inline",theme:s.theme,selectedKeys:[s.current]},on:{click:s.handleClick}},[t("a-menu-item",{key:"1"},[t("a-icon",{attrs:{type:"mail"}}),s._v("\n        Navigation One\n      ")],1),s._v(" "),t("a-menu-item",{key:"2"},[t("a-icon",{attrs:{type:"calendar"}}),s._v("\n        Navigation Two\n      ")],1),s._v(" "),t("a-sub-menu",{key:"sub1"},[t("span",{attrs:{slot:"title"},slot:"title"},[t("a-icon",{attrs:{type:"appstore"}}),t("span",[s._v("Navigation Three")])],1),s._v(" "),t("a-menu-item",{key:"3"},[s._v("Option 3")]),s._v(" "),t("a-menu-item",{key:"4"},[s._v("Option 4")]),s._v(" "),t("a-sub-menu",{key:"sub1-2",attrs:{title:"Submenu"}},[t("a-menu-item",{key:"5"},[s._v("Option 5")]),s._v(" "),t("a-menu-item",{key:"6"},[s._v("Option 6")])],1)],1),s._v(" "),t("a-sub-menu",{key:"sub2"},[t("span",{attrs:{slot:"title"},slot:"title"},[t("a-icon",{attrs:{type:"setting"}}),t("span",[s._v("Navigation Four")])],1),s._v(" "),t("a-menu-item",{key:"7"},[s._v("Option 7")]),s._v(" "),t("a-menu-item",{key:"8"},[s._v("Option 8")]),s._v(" "),t("a-menu-item",{key:"9"},[s._v("Option 9")]),s._v(" "),t("a-menu-item",{key:"10"},[s._v("Option 10")])],1)],1)],1)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"主题"}},[s._v("主题 "),t("a",{staticClass:"anchor",attrs:{href:"#主题"}},[s._v("#")])]),s._v(" "),t("p",[s._v("内建了两套主题 "),t("code",[s._v("light|dark")]),s._v("，默认 "),t("code",[s._v("light")]),s._v("。")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Menu-Themes"}},[s._v("Menu Themes "),t("a",{staticClass:"anchor",attrs:{href:"#Menu-Themes"}},[s._v("#")])]),s._v(" "),t("p",[s._v("There are two built-in themes: 'light' and 'dark'. The default value is 'light'.")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-switch")]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("defaultChecked")]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"changeTheme"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("checkedChildren")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("unCheckedChildren")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"light"')]),s._v("\n    />")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu")]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"width: 256px"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v(":defaultSelectedKeys")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"['1']\"")]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v(":defaultOpenKeys")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"['sub1']\"")]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"inline"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v(":theme")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"theme"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v(":selectedKeys")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"[current]"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v("\n    >")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"mail"')]),s._v(" />")]),s._v("\n        Navigation One\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"calendar"')]),s._v(" />")]),s._v("\n        Navigation Two\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"sub1"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"appstore"')]),s._v(" />")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Navigation Three"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("Option 3"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("Option 4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"sub1-2"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Submenu"')]),s._v(">")]),s._v("\n          "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"5"')]),s._v(">")]),s._v("Option 5"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n          "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),s._v("Option 6"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"sub2"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"setting"')]),s._v(" />")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Navigation Four"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"7"')]),s._v(">")]),s._v("Option 7"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("Option 8"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),s._v("Option 9"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("Option 10"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("current")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n        "),t("span",{staticClass:"hljs-attr"},[s._v("theme")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'dark'")]),s._v(",\n      };\n    },\n    "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleClick(e) {\n        "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),t("span",{staticClass:"hljs-string"},[s._v("'click '")]),s._v(", e);\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".current = e.key;\n      },\n      changeTheme(checked) {\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".theme = checked ? "),t("span",{staticClass:"hljs-string"},[s._v("'dark'")]),s._v(" : "),t("span",{staticClass:"hljs-string"},[s._v("'light'")]),s._v(";\n      },\n    },\n  };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};f._withStripped=!0;var w={data:function(){return{current:"1",theme:"dark"}},methods:{handleClick:function(s){console.log("click ",s),this.current=s.key},changeTheme:function(s){this.theme=s?"dark":"light"}}},S=Object(l.a)(w,f,[],!1,null,null,null);S.options.__file="components/menu/demo/theme.md";var K=S.exports,M=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n  <div>\n    <a-menu style="width: 256px" mode="vertical" @click="handleClick">\n      <a-menu-item key="1">\n        <a-icon type="mail"/>\n        Navigation One\n      </a-menu-item>\n      <a-menu-item key="2">\n        <a-icon type="calendar"/>\n        Navigation Two\n      </a-menu-item>\n      <a-sub-menu key="sub1">\n        <span slot="title"><a-icon type="appstore"/><span>Navigation Three</span></span>\n        <a-menu-item key="3">Option 3</a-menu-item>\n        <a-menu-item key="4">Option 4</a-menu-item>\n        <a-sub-menu key="sub1-2" title="Submenu">\n          <a-menu-item key="5">Option 5</a-menu-item>\n          <a-menu-item key="6">Option 6</a-menu-item>\n        </a-sub-menu>\n      </a-sub-menu>\n      <a-sub-menu key="sub2">\n        <span slot="title"><a-icon type="setting"/><span>Navigation Four</span></span>\n        <a-menu-item key="7">Option 7</a-menu-item>\n        <a-menu-item key="8">Option 8</a-menu-item>\n        <a-menu-item key="9">Option 9</a-menu-item>\n        <a-menu-item key="10">Option 10</a-menu-item>\n      </a-sub-menu>\n    </a-menu>\n  </div>\n',script:"\n  export default {\n    methods: {\n      handleClick(e) {\n        console.log('click ', e);\n      },\n    },\n  };\n",style:null,us:"\n#### Vertical menu\nSubmenus open as pop-ups.\n",cn:"\n#### 垂直菜单\n子菜单是弹出的形式。\n",sourceCode:'<template>\n  <div>\n    <a-menu style="width: 256px" mode="vertical" @click="handleClick">\n      <a-menu-item key="1">\n        <a-icon type="mail" />\n        Navigation One\n      </a-menu-item>\n      <a-menu-item key="2">\n        <a-icon type="calendar" />\n        Navigation Two\n      </a-menu-item>\n      <a-sub-menu key="sub1">\n        <span slot="title"><a-icon type="appstore" /><span>Navigation Three</span></span>\n        <a-menu-item key="3">Option 3</a-menu-item>\n        <a-menu-item key="4">Option 4</a-menu-item>\n        <a-sub-menu key="sub1-2" title="Submenu">\n          <a-menu-item key="5">Option 5</a-menu-item>\n          <a-menu-item key="6">Option 6</a-menu-item>\n        </a-sub-menu>\n      </a-sub-menu>\n      <a-sub-menu key="sub2">\n        <span slot="title"><a-icon type="setting" /><span>Navigation Four</span></span>\n        <a-menu-item key="7">Option 7</a-menu-item>\n        <a-menu-item key="8">Option 8</a-menu-item>\n        <a-menu-item key="9">Option 9</a-menu-item>\n        <a-menu-item key="10">Option 10</a-menu-item>\n      </a-sub-menu>\n    </a-menu>\n  </div>\n</template>\n<script>\n  export default {\n    methods: {\n      handleClick(e) {\n        console.log(\'click \', e);\n      },\n    },\n  };\n<\/script>\n'}}},[t("template",{slot:"component"},[t("div",[t("a-menu",{staticStyle:{width:"256px"},attrs:{mode:"vertical"},on:{click:s.handleClick}},[t("a-menu-item",{key:"1"},[t("a-icon",{attrs:{type:"mail"}}),s._v("\n        Navigation One\n      ")],1),s._v(" "),t("a-menu-item",{key:"2"},[t("a-icon",{attrs:{type:"calendar"}}),s._v("\n        Navigation Two\n      ")],1),s._v(" "),t("a-sub-menu",{key:"sub1"},[t("span",{attrs:{slot:"title"},slot:"title"},[t("a-icon",{attrs:{type:"appstore"}}),t("span",[s._v("Navigation Three")])],1),s._v(" "),t("a-menu-item",{key:"3"},[s._v("Option 3")]),s._v(" "),t("a-menu-item",{key:"4"},[s._v("Option 4")]),s._v(" "),t("a-sub-menu",{key:"sub1-2",attrs:{title:"Submenu"}},[t("a-menu-item",{key:"5"},[s._v("Option 5")]),s._v(" "),t("a-menu-item",{key:"6"},[s._v("Option 6")])],1)],1),s._v(" "),t("a-sub-menu",{key:"sub2"},[t("span",{attrs:{slot:"title"},slot:"title"},[t("a-icon",{attrs:{type:"setting"}}),t("span",[s._v("Navigation Four")])],1),s._v(" "),t("a-menu-item",{key:"7"},[s._v("Option 7")]),s._v(" "),t("a-menu-item",{key:"8"},[s._v("Option 8")]),s._v(" "),t("a-menu-item",{key:"9"},[s._v("Option 9")]),s._v(" "),t("a-menu-item",{key:"10"},[s._v("Option 10")])],1)],1)],1)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"垂直菜单"}},[s._v("垂直菜单 "),t("a",{staticClass:"anchor",attrs:{href:"#垂直菜单"}},[s._v("#")])]),s._v(" "),t("p",[s._v("子菜单是弹出的形式。")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Vertical-menu"}},[s._v("Vertical menu "),t("a",{staticClass:"anchor",attrs:{href:"#Vertical-menu"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Submenus open as pop-ups.")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"width: 256px"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"vertical"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"mail"')]),s._v(" />")]),s._v("\n        Navigation One\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"calendar"')]),s._v(" />")]),s._v("\n        Navigation Two\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"sub1"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"appstore"')]),s._v(" />")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Navigation Three"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("Option 3"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("Option 4"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"sub1-2"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"Submenu"')]),s._v(">")]),s._v("\n          "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"5"')]),s._v(">")]),s._v("Option 5"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n          "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),s._v("Option 6"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"sub2"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"setting"')]),s._v(" />")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Navigation Four"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"7"')]),s._v(">")]),s._v("Option 7"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("Option 8"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),s._v("Option 9"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("Option 10"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-sub-menu")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleClick(e) {\n        "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),t("span",{staticClass:"hljs-string"},[s._v("'click '")]),s._v(", e);\n      },\n    },\n  };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};M._withStripped=!0;var N={methods:{handleClick:function(s){console.log("click ",s)}}},x=Object(l.a)(N,M,[],!1,null,null,null);x.options.__file="components/menu/demo/vertical.md";var T=x.exports,I=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n  <div style="width: 256px">\n    <a-button type="primary" @click="toggleCollapsed" style="margin-bottom: 16px">\n      <a-icon :type="collapsed ? \'menu-unfold\' : \'menu-fold\'"/>\n    </a-button>\n    <a-menu :defaultSelectedKeys="[\'1\']" :defaultOpenKeys="[\'2\']" mode="inline" theme="dark" :inlineCollapsed="collapsed">\n      <template v-for="item in list">\n        <a-menu-item v-if="!item.children" :key="item.key">\n          <a-icon type="pie-chart"/>\n          <span>{{item.title}}</span>\n        </a-menu-item>\n        <sub-menu v-else="" :menu-info="item" :key="item.key"/>\n      </template>\n    </a-menu>\n  </div>\n',script:"\n  /*\n   * recommend SubMenu.vue https://github.com/vueComponent/ant-design-vue/blob/master/components/menu/demo/SubMenu.vue\n   * SubMenu1.vue https://github.com/vueComponent/ant-design-vue/blob/master/components/menu/demo/SubMenu1.vue\n   * */\n  import SubMenu from './SubMenu';\n  export default {\n    components: {\n      'sub-menu': SubMenu,\n    },\n    data() {\n      return {\n        collapsed: false,\n        list: [\n          {\n            key: '1',\n            title: 'Option 1',\n          },\n          {\n            key: '2',\n            title: 'Navigation 2',\n            children: [\n              {\n                key: '2.1',\n                title: 'Navigation 3',\n                children: [{ key: '2.1.1', title: 'Option 2.1.1' }],\n              },\n            ],\n          },\n        ],\n      };\n    },\n    methods: {\n      toggleCollapsed() {\n        this.collapsed = !this.collapsed;\n      },\n    },\n  };\n",style:null,us:"\n#### Single file recursive menu\nUse the single file method to recursively generate menus.\nThe properties of `a-sub-menu` are dynamically changed inside the component. If you split the file into a single file and you cannot mount the `props` to `a-sub-menu`, you need to declare the `props` and mount it yourself. For convenience, to avoid the declaration of attributes, we recommend using functional components.\n",cn:"\n#### 单文件递归菜单\n使用单文件方式递归生成菜单。\n因组件内部会动态更改`a-sub-menu`的属性，如果拆分成单文件，无法将属性挂载到`a-sub-menu`上，你需要自行声明属性并挂载。为了方便，避免属性的声明，我们推荐使用函数式组件。\n",sourceCode:'<template>\n  <div style="width: 256px">\n    <a-button type="primary" @click="toggleCollapsed" style="margin-bottom: 16px">\n      <a-icon :type="collapsed ? \'menu-unfold\' : \'menu-fold\'" />\n    </a-button>\n    <a-menu\n      :defaultSelectedKeys="[\'1\']"\n      :defaultOpenKeys="[\'2\']"\n      mode="inline"\n      theme="dark"\n      :inlineCollapsed="collapsed"\n    >\n      <template v-for="item in list">\n        <a-menu-item v-if="!item.children" :key="item.key">\n          <a-icon type="pie-chart" />\n          <span>{{item.title}}</span>\n        </a-menu-item>\n        <sub-menu v-else :menu-info="item" :key="item.key" />\n      </template>\n    </a-menu>\n  </div>\n</template>\n\n<script>\n  /*\n   * recommend SubMenu.vue https://github.com/vueComponent/ant-design-vue/blob/master/components/menu/demo/SubMenu.vue\n   * SubMenu1.vue https://github.com/vueComponent/ant-design-vue/blob/master/components/menu/demo/SubMenu1.vue\n   * */\n  import SubMenu from \'./SubMenu\';\n  export default {\n    components: {\n      \'sub-menu\': SubMenu,\n    },\n    data() {\n      return {\n        collapsed: false,\n        list: [\n          {\n            key: \'1\',\n            title: \'Option 1\',\n          },\n          {\n            key: \'2\',\n            title: \'Navigation 2\',\n            children: [\n              {\n                key: \'2.1\',\n                title: \'Navigation 3\',\n                children: [{ key: \'2.1.1\', title: \'Option 2.1.1\' }],\n              },\n            ],\n          },\n        ],\n      };\n    },\n    methods: {\n      toggleCollapsed() {\n        this.collapsed = !this.collapsed;\n      },\n    },\n  };\n<\/script>\n'}}},[t("template",{slot:"component"},[t("div",{staticStyle:{width:"256px"}},[t("a-button",{staticStyle:{"margin-bottom":"16px"},attrs:{type:"primary"},on:{click:s.toggleCollapsed}},[t("a-icon",{attrs:{type:s.collapsed?"menu-unfold":"menu-fold"}})],1),s._v(" "),t("a-menu",{attrs:{defaultSelectedKeys:["1"],defaultOpenKeys:["2"],mode:"inline",theme:"dark",inlineCollapsed:s.collapsed}},[s._l(s.list,(function(a){return[a.children?t("sub-menu",{key:a.key,attrs:{"menu-info":a}}):t("a-menu-item",{key:a.key},[t("a-icon",{attrs:{type:"pie-chart"}}),s._v(" "),t("span",[s._v(s._s(a.title))])],1)]}))],2)],1)]),s._v(" "),t("template",{slot:"description"},[t("h4",{attrs:{id:"单文件递归菜单"}},[s._v("单文件递归菜单 "),t("a",{staticClass:"anchor",attrs:{href:"#单文件递归菜单"}},[s._v("#")])]),s._v(" "),t("p",[s._v("使用单文件方式递归生成菜单。"),t("br"),s._v("\n因组件内部会动态更改"),t("code",[s._v("a-sub-menu")]),s._v("的属性，如果拆分成单文件，无法将属性挂载到"),t("code",[s._v("a-sub-menu")]),s._v("上，你需要自行声明属性并挂载。为了方便，避免属性的声明，我们推荐使用函数式组件。"),t("br")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Single-file-recursive-menu"}},[s._v("Single file recursive menu "),t("a",{staticClass:"anchor",attrs:{href:"#Single-file-recursive-menu"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Use the single file method to recursively generate menus."),t("br"),s._v("\nThe properties of "),t("code",[s._v("a-sub-menu")]),s._v(" are dynamically changed inside the component. If you split the file into a single file and you cannot mount the "),t("code",[s._v("props")]),s._v(" to "),t("code",[s._v("a-sub-menu")]),s._v(", you need to declare the "),t("code",[s._v("props")]),s._v(" and mount it yourself. For convenience, to avoid the declaration of attributes, we recommend using functional components."),t("br")])]),s._v(" "),t("template",{slot:"code"},[t("pre",[t("code",{staticClass:"language-html"},[t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"width: 256px"')]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"toggleCollapsed"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"margin-bottom: 16px"')]),s._v(">")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"collapsed ? 'menu-unfold' : 'menu-fold'\"")]),s._v(" />")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-button")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu")]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v(":defaultSelectedKeys")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"['1']\"")]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v(":defaultOpenKeys")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"['2']\"")]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"inline"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v("theme")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v("\n      "),t("span",{staticClass:"hljs-attr"},[s._v(":inlineCollapsed")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"collapsed"')]),s._v("\n    >")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"item in list"')]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-if")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"!item.children"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"item.key"')]),s._v(">")]),s._v("\n          "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"pie-chart"')]),s._v(" />")]),s._v("\n          "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),t("span",[s._v("{{")]),s._v("item.title"),t("span",[s._v("}}")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu-item")]),s._v(">")]),s._v("\n        "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("sub-menu")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-else")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":menu-info")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"item.key"')]),s._v(" />")]),s._v("\n      "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-menu")]),s._v(">")]),s._v("\n  "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),t("span",{staticClass:"javascript"},[s._v("\n  "),t("span",{staticClass:"hljs-comment"},[s._v("/*\n   * recommend SubMenu.vue https://github.com/vueComponent/ant-design-vue/blob/master/components/menu/demo/SubMenu.vue\n   * SubMenu1.vue https://github.com/vueComponent/ant-design-vue/blob/master/components/menu/demo/SubMenu1.vue\n   * */")]),s._v("\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" SubMenu "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'./SubMenu'")]),s._v(";\n  "),t("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),t("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),t("span",{staticClass:"hljs-attr"},[s._v("components")]),s._v(": {\n      "),t("span",{staticClass:"hljs-string"},[s._v("'sub-menu'")]),s._v(": SubMenu,\n    },\n    data() {\n      "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),t("span",{staticClass:"hljs-attr"},[s._v("collapsed")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),t("span",{staticClass:"hljs-attr"},[s._v("list")]),s._v(": [\n          {\n            "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Option 1'")]),s._v(",\n          },\n          {\n            "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Navigation 2'")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [\n              {\n                "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'2.1'")]),s._v(",\n                "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Navigation 3'")]),s._v(",\n                "),t("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{ "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'2.1.1'")]),s._v(", "),t("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'Option 2.1.1'")]),s._v(" }],\n              },\n            ],\n          },\n        ],\n      };\n    },\n    "),t("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      toggleCollapsed() {\n        "),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".collapsed = !"),t("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".collapsed;\n      },\n    },\n  };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])],2)]],2)};I._withStripped=!0;var D=function(s,a){var t=a._c;return t("a-sub-menu",{key:a.props.menuInfo.key},[t("span",{attrs:{slot:"title"},slot:"title"},[t("a-icon",{attrs:{type:"mail"}}),t("span",[a._v(a._s(a.props.menuInfo.title))])],1),a._v(" "),a._l(a.props.menuInfo.children,(function(s){return[s.children?t("sub-menu",{key:s.key,attrs:{"menu-info":s}}):t("a-menu-item",{key:s.key},[t("a-icon",{attrs:{type:"pie-chart"}}),a._v(" "),t("span",[a._v(a._s(s.title))])],1)]}))],2)};D._withStripped=!0;var E={props:["menuInfo"]},F=Object(l.a)(E,D,[],!0,null,null,null);F.options.__file="components/menu/demo/SubMenu.vue";var z={components:{"sub-menu":F.exports},data:function(){return{collapsed:!1,list:[{key:"1",title:"Option 1"},{key:"2",title:"Navigation 2",children:[{key:"2.1",title:"Navigation 3",children:[{key:"2.1.1",title:"Option 2.1.1"}]}]}]}},methods:{toggleCollapsed:function(){this.collapsed=!this.collapsed}}},P=Object(l.a)(z,I,[],!1,null,null,null);P.options.__file="components/menu/demo/template.md";var $=P.exports,q=function(){var s=this.$createElement;this._self._c;return this._m(0)};q._withStripped=!0;var A=Object(l.a)({},q,[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[t("h2",{attrs:{id:"API"}},[s._v("API "),t("a",{staticClass:"anchor",attrs:{href:"#API"}},[s._v("#")])]),s._v(" "),t("pre",{pre:!0},[t("code",{pre:!0,attrs:{"v-pre":"",class:"language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("a-menu")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("a-menu-item")]),s._v(">")]),s._v("菜单项"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("a-menu-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("a-sub-menu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"子菜单"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("a-menu-item")]),s._v(">")]),s._v("子菜单项"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("a-menu-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("a-sub-menu")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("a-menu")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n")])]),s._v(" "),t("h3",{attrs:{id:"Menu"}},[s._v("Menu "),t("a",{staticClass:"anchor",attrs:{href:"#Menu"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("参数")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("类型")]),s._v(" "),t("th",[s._v("默认值")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("defaultOpenKeys")]),s._v(" "),t("td",[s._v("初始展开的 SubMenu 菜单项 key 数组")]),s._v(" "),t("td"),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("defaultSelectedKeys")]),s._v(" "),t("td",[s._v("初始选中的菜单项 key 数组")]),s._v(" "),t("td",[s._v("string[]")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("forceSubMenuRender")]),s._v(" "),t("td",[s._v("在子菜单展示之前就渲染进 DOM")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("inlineCollapsed")]),s._v(" "),t("td",[s._v("inline 时菜单是否收起状态")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("inlineIndent")]),s._v(" "),t("td",[s._v("inline 模式的菜单缩进宽度")]),s._v(" "),t("td",[s._v("number")]),s._v(" "),t("td",[s._v("24")])]),s._v(" "),t("tr",[t("td",[s._v("mode")]),s._v(" "),t("td",[s._v("菜单类型，现在支持垂直、水平、和内嵌模式三种")]),s._v(" "),t("td",[s._v("string: "),t("code",{pre:!0},[s._v("vertical")]),s._v(" "),t("code",{pre:!0},[s._v("vertical-right")]),s._v(" "),t("code",{pre:!0},[s._v("horizontal")]),s._v(" "),t("code",{pre:!0},[s._v("inline")])]),s._v(" "),t("td",[t("code",{pre:!0},[s._v("vertical")])])]),s._v(" "),t("tr",[t("td",[s._v("multiple")]),s._v(" "),t("td",[s._v("是否允许多选")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("openKeys(.sync)")]),s._v(" "),t("td",[s._v("当前展开的 SubMenu 菜单项 key 数组")]),s._v(" "),t("td",[s._v("string[]")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("selectable")]),s._v(" "),t("td",[s._v("是否允许选中")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("true")])]),s._v(" "),t("tr",[t("td",[s._v("selectedKeys(v-model)")]),s._v(" "),t("td",[s._v("当前选中的菜单项 key 数组")]),s._v(" "),t("td",[s._v("string[]")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("subMenuCloseDelay")]),s._v(" "),t("td",[s._v("用户鼠标离开子菜单后关闭延时，单位：秒")]),s._v(" "),t("td",[s._v("number")]),s._v(" "),t("td",[s._v("0.1")])]),s._v(" "),t("tr",[t("td",[s._v("subMenuOpenDelay")]),s._v(" "),t("td",[s._v("用户鼠标进入子菜单后开启延时，单位：秒")]),s._v(" "),t("td",[s._v("number")]),s._v(" "),t("td",[s._v("0")])]),s._v(" "),t("tr",[t("td",[s._v("theme")]),s._v(" "),t("td",[s._v("主题颜色")]),s._v(" "),t("td",[s._v("string: "),t("code",{pre:!0},[s._v("light")]),s._v(" "),t("code",{pre:!0},[s._v("dark")])]),s._v(" "),t("td",[t("code",{pre:!0},[s._v("light")])])]),s._v(" "),t("tr",[t("td",[s._v("overflowedIndicator")]),s._v(" "),t("td",[s._v("自定义 Menu 折叠时的图标")]),s._v(" "),t("td",[s._v("DOM")]),s._v(" "),t("td",[t("code",{pre:!0},[s._v("<span>···</span>")])])])])]),s._v(" "),t("h3",{attrs:{id:"Menu-事件"}},[s._v("Menu 事件 "),t("a",{staticClass:"anchor",attrs:{href:"#Menu-事件"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("事件名称")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("回调参数")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("click")]),s._v(" "),t("td",[s._v("点击 MenuItem 调用此函数")]),s._v(" "),t("td",[s._v("function({ item, key, keyPath })")])]),s._v(" "),t("tr",[t("td",[s._v("deselect")]),s._v(" "),t("td",[s._v("取消选中时调用，仅在 multiple 生效")]),s._v(" "),t("td",[s._v("function({ item, key, selectedKeys })")])]),s._v(" "),t("tr",[t("td",[s._v("openChange")]),s._v(" "),t("td",[s._v("SubMenu 展开/关闭的回调")]),s._v(" "),t("td",[s._v("function(openKeys: string[])")])]),s._v(" "),t("tr",[t("td",[s._v("select")]),s._v(" "),t("td",[s._v("被选中时调用")]),s._v(" "),t("td",[s._v("function({ item, key, selectedKeys })")])])])]),s._v(" "),t("h3",{attrs:{id:"Menu.Item"}},[s._v("Menu.Item "),t("a",{staticClass:"anchor",attrs:{href:"#Menu.Item"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("参数")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("类型")]),s._v(" "),t("th",[s._v("默认值")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("disabled")]),s._v(" "),t("td",[s._v("是否禁用")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("key")]),s._v(" "),t("td",[s._v("item 的唯一标志")]),s._v(" "),t("td",[s._v("string")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("title")]),s._v(" "),t("td",[s._v("设置收缩时展示的悬浮标题")]),s._v(" "),t("td",[s._v("string")]),s._v(" "),t("td")])])]),s._v(" "),t("h3",{attrs:{id:"Menu.SubMenu"}},[s._v("Menu.SubMenu "),t("a",{staticClass:"anchor",attrs:{href:"#Menu.SubMenu"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("参数")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("类型")]),s._v(" "),t("th",[s._v("默认值")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("disabled")]),s._v(" "),t("td",[s._v("是否禁用")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("key")]),s._v(" "),t("td",[s._v("唯一标志")]),s._v(" "),t("td",[s._v("string")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("title")]),s._v(" "),t("td",[s._v("子菜单项值")]),s._v(" "),t("td",[s._v("string|slot")]),s._v(" "),t("td")])])]),s._v(" "),t("p",[s._v("Menu.SubMenu 的子元素必须是 "),t("code",{pre:!0},[s._v("MenuItem")]),s._v(" 或者 "),t("code",{pre:!0},[s._v("SubMenu")]),s._v(".")]),s._v(" "),t("h3",{attrs:{id:"SubMenu-事件"}},[s._v("SubMenu 事件 "),t("a",{staticClass:"anchor",attrs:{href:"#SubMenu-事件"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("事件名称")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("回调参数")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("titleClick")]),s._v(" "),t("td",[s._v("点击子菜单标题")]),s._v(" "),t("td",[s._v("({ key, domEvent })")])])])]),s._v(" "),t("h3",{attrs:{id:"Menu.ItemGroup"}},[s._v("Menu.ItemGroup "),t("a",{staticClass:"anchor",attrs:{href:"#Menu.ItemGroup"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("参数")]),s._v(" "),t("th",[s._v("说明")]),s._v(" "),t("th",[s._v("类型")]),s._v(" "),t("th",[s._v("默认值")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("title")]),s._v(" "),t("td",[s._v("分组标题")]),s._v(" "),t("td",[s._v("string||function|slot")]),s._v(" "),t("td")])])]),s._v(" "),t("p",[s._v("Menu.ItemGroup 的子元素必须是 "),t("code",{pre:!0},[s._v("MenuItem")]),s._v(".")]),s._v(" "),t("h3",{attrs:{id:"Menu.Divider"}},[s._v("Menu.Divider "),t("a",{staticClass:"anchor",attrs:{href:"#Menu.Divider"}},[s._v("#")])]),s._v(" "),t("p",[s._v("菜单项分割线，只用在弹出菜单内。")])])}],!1,null,null,null);A.options.__file="components/menu/index.zh-CN.md";var G=A.exports,V=function(){var s=this.$createElement;this._self._c;return this._m(0)};V._withStripped=!0;var L=Object(l.a)({},V,[function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[t("h2",{attrs:{id:"API"}},[s._v("API "),t("a",{staticClass:"anchor",attrs:{href:"#API"}},[s._v("#")])]),s._v(" "),t("pre",{pre:!0},[t("code",{pre:!0,attrs:{"v-pre":"",class:"language-html"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("a-menu")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("a-menu-item")]),s._v(">")]),s._v("菜单项"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("a-menu-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("a-sub-menu")]),s._v(" "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("title")]),s._v("="),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v('"子菜单"')]),s._v(">")]),s._v("\n      "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("a-menu-item")]),s._v(">")]),s._v("子菜单项"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("a-menu-item")]),s._v(">")]),s._v("\n    "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("a-sub-menu")]),s._v(">")]),s._v("\n  "),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("a-menu")]),s._v(">")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("template")]),s._v(">")]),s._v("\n")])]),s._v(" "),t("h3",{attrs:{id:"Menu"}},[s._v("Menu "),t("a",{staticClass:"anchor",attrs:{href:"#Menu"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("Param")]),s._v(" "),t("th",[s._v("Description")]),s._v(" "),t("th",[s._v("Type")]),s._v(" "),t("th",[s._v("Default value")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("defaultOpenKeys")]),s._v(" "),t("td",[s._v("array with the keys of default opened sub menus")]),s._v(" "),t("td"),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("defaultSelectedKeys")]),s._v(" "),t("td",[s._v("array with the keys of default selected menu items")]),s._v(" "),t("td",[s._v("string[]")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("forceSubMenuRender")]),s._v(" "),t("td",[s._v("render submenu into DOM before it shows")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("inlineCollapsed")]),s._v(" "),t("td",[s._v("specifies the collapsed status when menu is inline mode")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("inlineIndent")]),s._v(" "),t("td",[s._v("indent px of inline menu item on each level")]),s._v(" "),t("td",[s._v("number")]),s._v(" "),t("td",[s._v("24")])]),s._v(" "),t("tr",[t("td",[s._v("mode")]),s._v(" "),t("td",[s._v("type of the menu; "),t("code",{pre:!0},[s._v("vertical")]),s._v(", "),t("code",{pre:!0},[s._v("horizontal")]),s._v(", and "),t("code",{pre:!0},[s._v("inline")]),s._v(" modes are supported")]),s._v(" "),t("td",[s._v("string: "),t("code",{pre:!0},[s._v("vertical")]),s._v(" | "),t("code",{pre:!0},[s._v("vertical-right")]),s._v(" | "),t("code",{pre:!0},[s._v("horizontal")]),s._v(" | "),t("code",{pre:!0},[s._v("inline")])]),s._v(" "),t("td",[t("code",{pre:!0},[s._v("vertical")])])]),s._v(" "),t("tr",[t("td",[s._v("multiple")]),s._v(" "),t("td",[s._v("Allow selection of multiple items")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("openKeys(.sync)")]),s._v(" "),t("td",[s._v("array with the keys of currently opened sub menus")]),s._v(" "),t("td",[s._v("string[]")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("selectable")]),s._v(" "),t("td",[s._v("allow selecting menu items")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("true")])]),s._v(" "),t("tr",[t("td",[s._v("selectedKeys(v-model)")]),s._v(" "),t("td",[s._v("array with the keys of currently selected menu items")]),s._v(" "),t("td",[s._v("string[]")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("style")]),s._v(" "),t("td",[s._v("style of the root node")]),s._v(" "),t("td",[s._v("object")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("subMenuCloseDelay")]),s._v(" "),t("td",[s._v("delay time to hide submenu when mouse leave, unit: second")]),s._v(" "),t("td",[s._v("number")]),s._v(" "),t("td",[s._v("0.1")])]),s._v(" "),t("tr",[t("td",[s._v("subMenuOpenDelay")]),s._v(" "),t("td",[s._v("delay time to show submenu when mouse enter, unit: second")]),s._v(" "),t("td",[s._v("number")]),s._v(" "),t("td",[s._v("0")])]),s._v(" "),t("tr",[t("td",[s._v("theme")]),s._v(" "),t("td",[s._v("color theme of the menu")]),s._v(" "),t("td",[s._v("string: "),t("code",{pre:!0},[s._v("light")]),s._v(" "),t("code",{pre:!0},[s._v("dark")])]),s._v(" "),t("td",[t("code",{pre:!0},[s._v("light")])])]),s._v(" "),t("tr",[t("td",[s._v("overflowedIndicator")]),s._v(" "),t("td",[s._v("Customized icon when menu is collapsed")]),s._v(" "),t("td",[s._v("DOM")]),s._v(" "),t("td",[t("code",{pre:!0},[s._v("<span>···</span>")])])])])]),s._v(" "),t("h3",{attrs:{id:"Menu-Events"}},[s._v("Menu Events "),t("a",{staticClass:"anchor",attrs:{href:"#Menu-Events"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("Events Name")]),s._v(" "),t("th",[s._v("Description")]),s._v(" "),t("th",[s._v("Arguments")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("click")]),s._v(" "),t("td",[s._v("callback executed when a menu item is clicked")]),s._v(" "),t("td",[s._v("function({ item, key, keyPath })")])]),s._v(" "),t("tr",[t("td",[s._v("deselect")]),s._v(" "),t("td",[s._v("callback executed when a menu item is deselected, only supported for multiple mode")]),s._v(" "),t("td",[s._v("function({ item, key, selectedKeys })")])]),s._v(" "),t("tr",[t("td",[s._v("openChange")]),s._v(" "),t("td",[s._v("called when open/close sub menu")]),s._v(" "),t("td",[s._v("function(openKeys: string[])")])]),s._v(" "),t("tr",[t("td",[s._v("select")]),s._v(" "),t("td",[s._v("callback executed when a menu item is selected")]),s._v(" "),t("td",[s._v("function({ item, key, selectedKeys })")])])])]),s._v(" "),t("h3",{attrs:{id:"Menu.Item"}},[s._v("Menu.Item "),t("a",{staticClass:"anchor",attrs:{href:"#Menu.Item"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("Param")]),s._v(" "),t("th",[s._v("Description")]),s._v(" "),t("th",[s._v("Type")]),s._v(" "),t("th",[s._v("Default value")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("disabled")]),s._v(" "),t("td",[s._v("whether menu item is disabled or not")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("key")]),s._v(" "),t("td",[s._v("unique id of the menu item")]),s._v(" "),t("td",[s._v("string")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("title")]),s._v(" "),t("td",[s._v("set display title for collapsed item")]),s._v(" "),t("td",[s._v("string")]),s._v(" "),t("td")])])]),s._v(" "),t("h3",{attrs:{id:"Menu.SubMenu"}},[s._v("Menu.SubMenu "),t("a",{staticClass:"anchor",attrs:{href:"#Menu.SubMenu"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("Param")]),s._v(" "),t("th",[s._v("Description")]),s._v(" "),t("th",[s._v("Type")]),s._v(" "),t("th",[s._v("Default value")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("disabled")]),s._v(" "),t("td",[s._v("whether sub menu is disabled or not")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("key")]),s._v(" "),t("td",[s._v("unique id of the sub menu")]),s._v(" "),t("td",[s._v("string")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("title")]),s._v(" "),t("td",[s._v("title of the sub menu")]),s._v(" "),t("td",[s._v("string|slot")]),s._v(" "),t("td")])])]),s._v(" "),t("p",[s._v("The children of Menu.SubMenu must be "),t("code",{pre:!0},[s._v("MenuItem")]),s._v(" or "),t("code",{pre:!0},[s._v("SubMenu")]),s._v(".")]),s._v(" "),t("h3",{attrs:{id:"Menu.SubMenu-Events"}},[s._v("Menu.SubMenu Events "),t("a",{staticClass:"anchor",attrs:{href:"#Menu.SubMenu-Events"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("Events Name")]),s._v(" "),t("th",[s._v("Description")]),s._v(" "),t("th",[s._v("Arguments")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("titleClick")]),s._v(" "),t("td",[s._v("callback executed when the sub menu title is clicked")]),s._v(" "),t("td",[s._v("function({ key, domEvent })")])])])]),s._v(" "),t("h3",{attrs:{id:"Menu.ItemGroup"}},[s._v("Menu.ItemGroup "),t("a",{staticClass:"anchor",attrs:{href:"#Menu.ItemGroup"}},[s._v("#")])]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("Param")]),s._v(" "),t("th",[s._v("Description")]),s._v(" "),t("th",[s._v("Type")]),s._v(" "),t("th",[s._v("Default value")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("children")]),s._v(" "),t("td",[s._v("sub menu items")]),s._v(" "),t("td",[s._v("MenuItem[]")]),s._v(" "),t("td")]),s._v(" "),t("tr",[t("td",[s._v("title")]),s._v(" "),t("td",[s._v("title of the group")]),s._v(" "),t("td",[s._v("string|slot")]),s._v(" "),t("td")])])]),s._v(" "),t("p",[s._v("The children of Menu.ItemGroup must be "),t("code",{pre:!0},[s._v("MenuItem")]),s._v(".")]),s._v(" "),t("h3",{attrs:{id:"Menu.Divider"}},[s._v("Menu.Divider "),t("a",{staticClass:"anchor",attrs:{href:"#Menu.Divider"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Divider line in between menu items, only used in vertical popup Menu or Dropdown Menu.")])])}],!1,null,null,null);L.options.__file="components/menu/index.en-US.md";var U=L.exports,H="# Menu 导航菜单\n          为页面和功能提供导航的菜单列表。\n## 何时使用\n导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。\n          ## 代码演示",J="# Menu\n          Menu list of Navigation.\n## When To Use\nNavigation menu is important for a website, it helps users jump from one site section to another quickly. Mostly, it includes top navigation and side navigation. Top navigation provides all the category and functions of the website. Side navigation provides the Multi-level structure of the website.\n## Examples",R={category:"Components",cols:1,type:"Navigation",title:"Menu",subtitle:"导航菜单",render:function(){var s=arguments[0];return s("div",[s("md",{attrs:{cn:H,us:J}}),s(v),s(r),s(c),s(g),s(T),s(K),s(O),s($),s("api",[s(G,{slot:"cn"}),s(U)])])}},W=Object(l.a)(R,void 0,void 0,!1,null,null,null);W.options.__file="components/menu/demo/index.vue";a.default=W.exports}}]);