1 line
195 KiB
JavaScript
1 line
195 KiB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{1258:function(s,a,t){},1259:function(s,a,t){},1260:function(s,a,t){},1261:function(s,a,t){},1262:function(s,a,t){},1263:function(s,a,t){},1264:function(s,a,t){},1265:function(s,a,t){},1266:function(s,a,t){},1357:function(s,a,t){"use strict";var n=t(1258);t.n(n).a},1358:function(s,a,t){"use strict";var n=t(1259);t.n(n).a},1359:function(s,a,t){"use strict";var n=t(1260);t.n(n).a},1360:function(s,a,t){"use strict";var n=t(1261);t.n(n).a},1361:function(s,a,t){"use strict";var n=t(1262);t.n(n).a},1362:function(s,a,t){"use strict";var n=t(1263);t.n(n).a},1363:function(s,a,t){"use strict";var n=t(1264);t.n(n).a},1364:function(s,a,t){"use strict";var n=t(1265);t.n(n).a},1365:function(s,a,t){"use strict";var n=t(1266);t.n(n).a},1437: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 id="components-layout-demo-basic">\n <a-layout>\n <a-layout-header>Header</a-layout-header>\n <a-layout-content>Content</a-layout-content>\n <a-layout-footer>Footer</a-layout-footer>\n </a-layout>\n\n <a-layout>\n <a-layout-header>Header</a-layout-header>\n <a-layout>\n <a-layout-sider>Sider</a-layout-sider>\n <a-layout-content>Content</a-layout-content>\n </a-layout>\n <a-layout-footer>Footer</a-layout-footer>\n </a-layout>\n\n <a-layout>\n <a-layout-header>Header</a-layout-header>\n <a-layout>\n <a-layout-content>Content</a-layout-content>\n <a-layout-sider>Sider</a-layout-sider>\n </a-layout>\n <a-layout-footer>Footer</a-layout-footer>\n </a-layout>\n\n <a-layout>\n <a-layout-sider>Sider</a-layout-sider>\n <a-layout>\n <a-layout-header>Header</a-layout-header>\n <a-layout-content>Content</a-layout-content>\n <a-layout-footer>Footer</a-layout-footer>\n </a-layout>\n </a-layout>\n </div>\n',script:null,style:"\n #components-layout-demo-basic {\n text-align: center;\n }\n #components-layout-demo-basic .ant-layout-header,\n #components-layout-demo-basic .ant-layout-footer {\n background: #7dbcea;\n color: #fff;\n }\n #components-layout-demo-basic .ant-layout-footer {\n line-height: 1.5;\n }\n #components-layout-demo-basic .ant-layout-sider {\n background: #3ba0e9;\n color: #fff;\n line-height: 120px;\n }\n #components-layout-demo-basic .ant-layout-content {\n background: rgba(16, 142, 233, 1);\n color: #fff;\n min-height: 120px;\n line-height: 120px;\n }\n #components-layout-demo-basic > .ant-layout {\n margin-bottom: 48px;\n }\n #components-layout-demo-basic > .ant-layout:last-child {\n margin: 0;\n }\n",us:"\n#### Basic Structure\nClassic page layouts.\n",cn:"\n#### 基本结构\n典型的页面布局。\n",sourceCode:'<template>\n <div id="components-layout-demo-basic">\n <a-layout>\n <a-layout-header>Header</a-layout-header>\n <a-layout-content>Content</a-layout-content>\n <a-layout-footer>Footer</a-layout-footer>\n </a-layout>\n\n <a-layout>\n <a-layout-header>Header</a-layout-header>\n <a-layout>\n <a-layout-sider>Sider</a-layout-sider>\n <a-layout-content>Content</a-layout-content>\n </a-layout>\n <a-layout-footer>Footer</a-layout-footer>\n </a-layout>\n\n <a-layout>\n <a-layout-header>Header</a-layout-header>\n <a-layout>\n <a-layout-content>Content</a-layout-content>\n <a-layout-sider>Sider</a-layout-sider>\n </a-layout>\n <a-layout-footer>Footer</a-layout-footer>\n </a-layout>\n\n <a-layout>\n <a-layout-sider>Sider</a-layout-sider>\n <a-layout>\n <a-layout-header>Header</a-layout-header>\n <a-layout-content>Content</a-layout-content>\n <a-layout-footer>Footer</a-layout-footer>\n </a-layout>\n </a-layout>\n </div>\n</template>\n\n<style>\n #components-layout-demo-basic {\n text-align: center;\n }\n #components-layout-demo-basic .ant-layout-header,\n #components-layout-demo-basic .ant-layout-footer {\n background: #7dbcea;\n color: #fff;\n }\n #components-layout-demo-basic .ant-layout-footer {\n line-height: 1.5;\n }\n #components-layout-demo-basic .ant-layout-sider {\n background: #3ba0e9;\n color: #fff;\n line-height: 120px;\n }\n #components-layout-demo-basic .ant-layout-content {\n background: rgba(16, 142, 233, 1);\n color: #fff;\n min-height: 120px;\n line-height: 120px;\n }\n #components-layout-demo-basic > .ant-layout {\n margin-bottom: 48px;\n }\n #components-layout-demo-basic > .ant-layout:last-child {\n margin: 0;\n }\n</style>\n'}}},[t("template",{slot:"component"},[t("div",{attrs:{id:"components-layout-demo-basic"}},[t("a-layout",[t("a-layout-header",[s._v("Header")]),s._v(" "),t("a-layout-content",[s._v("Content")]),s._v(" "),t("a-layout-footer",[s._v("Footer")])],1),s._v(" "),t("a-layout",[t("a-layout-header",[s._v("Header")]),s._v(" "),t("a-layout",[t("a-layout-sider",[s._v("Sider")]),s._v(" "),t("a-layout-content",[s._v("Content")])],1),s._v(" "),t("a-layout-footer",[s._v("Footer")])],1),s._v(" "),t("a-layout",[t("a-layout-header",[s._v("Header")]),s._v(" "),t("a-layout",[t("a-layout-content",[s._v("Content")]),s._v(" "),t("a-layout-sider",[s._v("Sider")])],1),s._v(" "),t("a-layout-footer",[s._v("Footer")])],1),s._v(" "),t("a-layout",[t("a-layout-sider",[s._v("Sider")]),s._v(" "),t("a-layout",[t("a-layout-header",[s._v("Header")]),s._v(" "),t("a-layout-content",[s._v("Content")]),s._v(" "),t("a-layout-footer",[s._v("Footer")])],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:"Basic-Structure"}},[s._v("Basic Structure "),t("a",{staticClass:"anchor",attrs:{href:"#Basic-Structure"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Classic page layouts.")])]),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("id")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"components-layout-demo-basic"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-header")]),s._v(">")]),s._v("Header"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-header")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-content")]),s._v(">")]),s._v("Content"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-content")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-footer")]),s._v(">")]),s._v("Footer"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-footer")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),s._v(">")]),s._v("\n\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-header")]),s._v(">")]),s._v("Header"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-header")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-sider")]),s._v(">")]),s._v("Sider"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-sider")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-content")]),s._v(">")]),s._v("Content"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-content")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-footer")]),s._v(">")]),s._v("Footer"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-footer")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),s._v(">")]),s._v("\n\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-header")]),s._v(">")]),s._v("Header"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-header")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-content")]),s._v(">")]),s._v("Content"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-content")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-sider")]),s._v(">")]),s._v("Sider"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-sider")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-footer")]),s._v(">")]),s._v("Footer"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-footer")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),s._v(">")]),s._v("\n\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-sider")]),s._v(">")]),s._v("Sider"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-sider")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-header")]),s._v(">")]),s._v("Header"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-header")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-content")]),s._v(">")]),s._v("Content"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-content")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-footer")]),s._v(">")]),s._v("Footer"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-footer")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),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("style")]),s._v(">")]),t("span",{staticClass:"css"},[s._v("\n "),t("span",{staticClass:"hljs-selector-id"},[s._v("#components-layout-demo-basic")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n }\n "),t("span",{staticClass:"hljs-selector-id"},[s._v("#components-layout-demo-basic")]),s._v(" "),t("span",{staticClass:"hljs-selector-class"},[s._v(".ant-layout-header")]),s._v(",\n "),t("span",{staticClass:"hljs-selector-id"},[s._v("#components-layout-demo-basic")]),s._v(" "),t("span",{staticClass:"hljs-selector-class"},[s._v(".ant-layout-footer")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("#7dbcea")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n }\n "),t("span",{staticClass:"hljs-selector-id"},[s._v("#components-layout-demo-basic")]),s._v(" "),t("span",{staticClass:"hljs-selector-class"},[s._v(".ant-layout-footer")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("1.5")]),s._v(";\n }\n "),t("span",{staticClass:"hljs-selector-id"},[s._v("#components-layout-demo-basic")]),s._v(" "),t("span",{staticClass:"hljs-selector-class"},[s._v(".ant-layout-sider")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("#3ba0e9")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("120px")]),s._v(";\n }\n "),t("span",{staticClass:"hljs-selector-id"},[s._v("#components-layout-demo-basic")]),s._v(" "),t("span",{staticClass:"hljs-selector-class"},[s._v(".ant-layout-content")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),t("span",{staticClass:"hljs-built_in"},[s._v("rgba")]),s._v("(16, 142, 233, 1);\n "),t("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("min-height")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("120px")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("120px")]),s._v(";\n }\n "),t("span",{staticClass:"hljs-selector-id"},[s._v("#components-layout-demo-basic")]),s._v(" > "),t("span",{staticClass:"hljs-selector-class"},[s._v(".ant-layout")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("48px")]),s._v(";\n }\n "),t("span",{staticClass:"hljs-selector-id"},[s._v("#components-layout-demo-basic")]),s._v(" > "),t("span",{staticClass:"hljs-selector-class"},[s._v(".ant-layout")]),t("span",{staticClass:"hljs-selector-pseudo"},[s._v(":last-child")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])],2)]],2)};n._withStripped=!0;t(1357);var e=t(31),l=Object(e.a)({},n,[],!1,null,null,null);l.options.__file="components/layout/demo/basic.md";var v=l.exports,i=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <a-layout id="components-layout-demo-custom-trigger">\n <a-layout-sider :trigger="null" collapsible="" v-model="collapsed">\n <div class="logo"/>\n <a-menu theme="dark" mode="inline" :defaultSelectedKeys="[\'1\']">\n <a-menu-item key="1">\n <a-icon type="user"/>\n <span>nav 1</span>\n </a-menu-item>\n <a-menu-item key="2">\n <a-icon type="video-camera"/>\n <span>nav 2</span>\n </a-menu-item>\n <a-menu-item key="3">\n <a-icon type="upload"/>\n <span>nav 3</span>\n </a-menu-item>\n </a-menu>\n </a-layout-sider>\n <a-layout>\n <a-layout-header style="background: #fff; padding: 0">\n <a-icon class="trigger" :type="collapsed ? \'menu-unfold\' : \'menu-fold\'" @click="()=> collapsed = !collapsed"/>\n </a-layout-header>\n <a-layout-content :style="{ margin: \'24px 16px\', padding: \'24px\', background: \'#fff\', minHeight: \'280px\' }">\n Content\n </a-layout-content>\n </a-layout>\n </a-layout>\n',script:"\n export default {\n data() {\n return {\n collapsed: false,\n };\n },\n };\n",style:"\n #components-layout-demo-custom-trigger .trigger {\n font-size: 18px;\n line-height: 64px;\n padding: 0 24px;\n cursor: pointer;\n transition: color 0.3s;\n }\n\n #components-layout-demo-custom-trigger .trigger:hover {\n color: #1890ff;\n }\n\n #components-layout-demo-custom-trigger .logo {\n height: 32px;\n background: rgba(255, 255, 255, 0.2);\n margin: 16px;\n }\n",us:'\n#### Custom trigger\nIf you want to use a customized trigger, you can hide the default one by setting `:trigger="null"`.\n',cn:'\n#### 自定义触发器\n要使用自定义触发器，可以设置 `:trigger="null"` 来隐藏默认设定。\n',sourceCode:'<template>\n <a-layout id="components-layout-demo-custom-trigger">\n <a-layout-sider :trigger="null" collapsible v-model="collapsed">\n <div class="logo" />\n <a-menu theme="dark" mode="inline" :defaultSelectedKeys="[\'1\']">\n <a-menu-item key="1">\n <a-icon type="user" />\n <span>nav 1</span>\n </a-menu-item>\n <a-menu-item key="2">\n <a-icon type="video-camera" />\n <span>nav 2</span>\n </a-menu-item>\n <a-menu-item key="3">\n <a-icon type="upload" />\n <span>nav 3</span>\n </a-menu-item>\n </a-menu>\n </a-layout-sider>\n <a-layout>\n <a-layout-header style="background: #fff; padding: 0">\n <a-icon\n class="trigger"\n :type="collapsed ? \'menu-unfold\' : \'menu-fold\'"\n @click="()=> collapsed = !collapsed"\n />\n </a-layout-header>\n <a-layout-content\n :style="{ margin: \'24px 16px\', padding: \'24px\', background: \'#fff\', minHeight: \'280px\' }"\n >\n Content\n </a-layout-content>\n </a-layout>\n </a-layout>\n</template>\n<script>\n export default {\n data() {\n return {\n collapsed: false,\n };\n },\n };\n<\/script>\n<style>\n #components-layout-demo-custom-trigger .trigger {\n font-size: 18px;\n line-height: 64px;\n padding: 0 24px;\n cursor: pointer;\n transition: color 0.3s;\n }\n\n #components-layout-demo-custom-trigger .trigger:hover {\n color: #1890ff;\n }\n\n #components-layout-demo-custom-trigger .logo {\n height: 32px;\n background: rgba(255, 255, 255, 0.2);\n margin: 16px;\n }\n</style>\n'}}},[t("template",{slot:"component"},[t("a-layout",{attrs:{id:"components-layout-demo-custom-trigger"}},[t("a-layout-sider",{attrs:{trigger:null,collapsible:""},model:{value:s.collapsed,callback:function(a){s.collapsed=a},expression:"collapsed"}},[t("div",{staticClass:"logo"}),s._v(" "),t("a-menu",{attrs:{theme:"dark",mode:"inline",defaultSelectedKeys:["1"]}},[t("a-menu-item",{key:"1"},[t("a-icon",{attrs:{type:"user"}}),s._v(" "),t("span",[s._v("nav 1")])],1),s._v(" "),t("a-menu-item",{key:"2"},[t("a-icon",{attrs:{type:"video-camera"}}),s._v(" "),t("span",[s._v("nav 2")])],1),s._v(" "),t("a-menu-item",{key:"3"},[t("a-icon",{attrs:{type:"upload"}}),s._v(" "),t("span",[s._v("nav 3")])],1)],1)],1),s._v(" "),t("a-layout",[t("a-layout-header",{staticStyle:{background:"#fff",padding:"0"}},[t("a-icon",{staticClass:"trigger",attrs:{type:s.collapsed?"menu-unfold":"menu-fold"},on:{click:function(){return s.collapsed=!s.collapsed}}})],1),s._v(" "),t("a-layout-content",{style:{margin:"24px 16px",padding:"24px",background:"#fff",minHeight:"280px"}},[s._v("\n Content\n ")])],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(':trigger="null"')]),s._v(" 来隐藏默认设定。")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Custom-trigger"}},[s._v("Custom trigger "),t("a",{staticClass:"anchor",attrs:{href:"#Custom-trigger"}},[s._v("#")])]),s._v(" "),t("p",[s._v("If you want to use a customized trigger, you can hide the default one by setting "),t("code",[s._v(':trigger="null"')]),s._v(".")])]),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("a-layout")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"components-layout-demo-custom-trigger"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-sider")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":trigger")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"null"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("collapsible")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"collapsed"')]),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("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"logo"')]),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("theme")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"dark"')]),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(":defaultSelectedKeys")]),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-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('"user"')]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("nav 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('"video-camera"')]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("nav 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('"upload"')]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("nav 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-menu")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-sider")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-header")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"background: #fff; padding: 0"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-icon")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"trigger"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":type")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"collapsed ? 'menu-unfold' : 'menu-fold'\"")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"()=> collapsed = !collapsed"')]),s._v("\n />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-header")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-content")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }\"")]),s._v("\n >")]),s._v("\n Content\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-content")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),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("collapsed")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),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"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),t("span",{staticClass:"css"},[s._v("\n "),t("span",{staticClass:"hljs-selector-id"},[s._v("#components-layout-demo-custom-trigger")]),s._v(" "),t("span",{staticClass:"hljs-selector-class"},[s._v(".trigger")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("64px")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(" "),t("span",{staticClass:"hljs-number"},[s._v("24px")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("cursor")]),s._v(": pointer;\n "),t("span",{staticClass:"hljs-attribute"},[s._v("transition")]),s._v(": color "),t("span",{staticClass:"hljs-number"},[s._v("0.3s")]),s._v(";\n }\n\n "),t("span",{staticClass:"hljs-selector-id"},[s._v("#components-layout-demo-custom-trigger")]),s._v(" "),t("span",{staticClass:"hljs-selector-class"},[s._v(".trigger")]),t("span",{staticClass:"hljs-selector-pseudo"},[s._v(":hover")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("#1890ff")]),s._v(";\n }\n\n "),t("span",{staticClass:"hljs-selector-id"},[s._v("#components-layout-demo-custom-trigger")]),s._v(" "),t("span",{staticClass:"hljs-selector-class"},[s._v(".logo")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("32px")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),t("span",{staticClass:"hljs-built_in"},[s._v("rgba")]),s._v("(255, 255, 255, 0.2);\n "),t("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("16px")]),s._v(";\n }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])],2)]],2)};i._withStripped=!0;var _={data:function(){return{collapsed:!1}}},p=(t(1358),Object(e.a)(_,i,[],!1,null,null,null));p.options.__file="components/layout/demo/custom-trigger.md";var c=p.exports,o=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <a-layout id="components-layout-demo-fixed-sider">\n <a-layout-sider :style="{ overflow: \'auto\', height: \'100vh\', position: \'fixed\', left: 0 }">\n <div class="logo"/>\n <a-menu theme="dark" mode="inline" :defaultSelectedKeys="[\'4\']">\n <a-menu-item key="1">\n <a-icon type="user"/>\n <span class="nav-text">nav 1</span>\n </a-menu-item>\n <a-menu-item key="2">\n <a-icon type="video-camera"/>\n <span class="nav-text">nav 2</span>\n </a-menu-item>\n <a-menu-item key="3">\n <a-icon type="upload"/>\n <span class="nav-text">nav 3</span>\n </a-menu-item>\n <a-menu-item key="4">\n <a-icon type="bar-chart"/>\n <span class="nav-text">nav 4</span>\n </a-menu-item>\n <a-menu-item key="5">\n <a-icon type="cloud-o"/>\n <span class="nav-text">nav 5</span>\n </a-menu-item>\n <a-menu-item key="6">\n <a-icon type="appstore-o"/>\n <span class="nav-text">nav 6</span>\n </a-menu-item>\n <a-menu-item key="7">\n <a-icon type="team"/>\n <span class="nav-text">nav 7</span>\n </a-menu-item>\n <a-menu-item key="8">\n <a-icon type="shop"/>\n <span class="nav-text">nav 8</span>\n </a-menu-item>\n </a-menu>\n </a-layout-sider>\n <a-layout :style="{ marginLeft: \'200px\' }">\n <a-layout-header :style="{ background: \'#fff\', padding: 0 }"/>\n <a-layout-content :style="{ margin: \'24px 16px 0\', overflow: \'initial\' }">\n <div :style="{ padding: \'24px\', background: \'#fff\', textAlign: \'center\' }">\n ...\n <br/>\n Really\n <br/>...<br/>...<br/>...<br/>\n long\n <br/>...<br/>...<br/>...<br/>...<br/>...<br/>...\n <br/>...<br/>...<br/>...<br/>...<br/>...<br/>...\n <br/>...<br/>...<br/>...<br/>...<br/>...<br/>...\n <br/>...<br/>...<br/>...<br/>...<br/>...<br/>...\n <br/>...<br/>...<br/>...<br/>...<br/>...<br/>...\n <br/>...<br/>...<br/>...<br/>...<br/>...<br/>...\n <br/>...<br/>...<br/>...<br/>...<br/>...<br/>\n content\n </div>\n </a-layout-content>\n <a-layout-footer :style="{ textAlign: \'center\' }">\n Ant Design ©2018 Created by Ant UED\n </a-layout-footer>\n </a-layout>\n </a-layout>\n',script:null,style:"\n #components-layout-demo-fixed-sider .logo {\n height: 32px;\n background: rgba(255, 255, 255, 0.2);\n margin: 16px;\n }\n",us:"\n#### Fixed Sider\nWhen dealing with long content, a fixed sider can provide a better user experience.\n",cn:"\n#### 固定侧边栏\n当内容较长时，使用固定侧边栏可以提供更好的体验。\n",sourceCode:'<template>\n <a-layout id="components-layout-demo-fixed-sider">\n <a-layout-sider :style="{ overflow: \'auto\', height: \'100vh\', position: \'fixed\', left: 0 }">\n <div class="logo"></div>\n <a-menu theme="dark" mode="inline" :defaultSelectedKeys="[\'4\']">\n <a-menu-item key="1">\n <a-icon type="user" />\n <span class="nav-text">nav 1</span>\n </a-menu-item>\n <a-menu-item key="2">\n <a-icon type="video-camera" />\n <span class="nav-text">nav 2</span>\n </a-menu-item>\n <a-menu-item key="3">\n <a-icon type="upload" />\n <span class="nav-text">nav 3</span>\n </a-menu-item>\n <a-menu-item key="4">\n <a-icon type="bar-chart" />\n <span class="nav-text">nav 4</span>\n </a-menu-item>\n <a-menu-item key="5">\n <a-icon type="cloud-o" />\n <span class="nav-text">nav 5</span>\n </a-menu-item>\n <a-menu-item key="6">\n <a-icon type="appstore-o" />\n <span class="nav-text">nav 6</span>\n </a-menu-item>\n <a-menu-item key="7">\n <a-icon type="team" />\n <span class="nav-text">nav 7</span>\n </a-menu-item>\n <a-menu-item key="8">\n <a-icon type="shop" />\n <span class="nav-text">nav 8</span>\n </a-menu-item>\n </a-menu>\n </a-layout-sider>\n <a-layout :style="{ marginLeft: \'200px\' }">\n <a-layout-header :style="{ background: \'#fff\', padding: 0 }" />\n <a-layout-content :style="{ margin: \'24px 16px 0\', overflow: \'initial\' }">\n <div :style="{ padding: \'24px\', background: \'#fff\', textAlign: \'center\' }">\n ...\n <br />\n Really\n <br />...<br />...<br />...<br />\n long\n <br />...<br />...<br />...<br />...<br />...<br />...\n <br />...<br />...<br />...<br />...<br />...<br />...\n <br />...<br />...<br />...<br />...<br />...<br />...\n <br />...<br />...<br />...<br />...<br />...<br />...\n <br />...<br />...<br />...<br />...<br />...<br />...\n <br />...<br />...<br />...<br />...<br />...<br />...\n <br />...<br />...<br />...<br />...<br />...<br />\n content\n </div>\n </a-layout-content>\n <a-layout-footer :style="{ textAlign: \'center\' }">\n Ant Design ©2018 Created by Ant UED\n </a-layout-footer>\n </a-layout>\n </a-layout>\n</template>\n<style>\n #components-layout-demo-fixed-sider .logo {\n height: 32px;\n background: rgba(255, 255, 255, 0.2);\n margin: 16px;\n }\n</style>\n'}}},[t("template",{slot:"component"},[t("a-layout",{attrs:{id:"components-layout-demo-fixed-sider"}},[t("a-layout-sider",{style:{overflow:"auto",height:"100vh",position:"fixed",left:0}},[t("div",{staticClass:"logo"}),s._v(" "),t("a-menu",{attrs:{theme:"dark",mode:"inline",defaultSelectedKeys:["4"]}},[t("a-menu-item",{key:"1"},[t("a-icon",{attrs:{type:"user"}}),s._v(" "),t("span",{staticClass:"nav-text"},[s._v("nav 1")])],1),s._v(" "),t("a-menu-item",{key:"2"},[t("a-icon",{attrs:{type:"video-camera"}}),s._v(" "),t("span",{staticClass:"nav-text"},[s._v("nav 2")])],1),s._v(" "),t("a-menu-item",{key:"3"},[t("a-icon",{attrs:{type:"upload"}}),s._v(" "),t("span",{staticClass:"nav-text"},[s._v("nav 3")])],1),s._v(" "),t("a-menu-item",{key:"4"},[t("a-icon",{attrs:{type:"bar-chart"}}),s._v(" "),t("span",{staticClass:"nav-text"},[s._v("nav 4")])],1),s._v(" "),t("a-menu-item",{key:"5"},[t("a-icon",{attrs:{type:"cloud-o"}}),s._v(" "),t("span",{staticClass:"nav-text"},[s._v("nav 5")])],1),s._v(" "),t("a-menu-item",{key:"6"},[t("a-icon",{attrs:{type:"appstore-o"}}),s._v(" "),t("span",{staticClass:"nav-text"},[s._v("nav 6")])],1),s._v(" "),t("a-menu-item",{key:"7"},[t("a-icon",{attrs:{type:"team"}}),s._v(" "),t("span",{staticClass:"nav-text"},[s._v("nav 7")])],1),s._v(" "),t("a-menu-item",{key:"8"},[t("a-icon",{attrs:{type:"shop"}}),s._v(" "),t("span",{staticClass:"nav-text"},[s._v("nav 8")])],1)],1)],1),s._v(" "),t("a-layout",{style:{marginLeft:"200px"}},[t("a-layout-header",{style:{background:"#fff",padding:0}}),s._v(" "),t("a-layout-content",{style:{margin:"24px 16px 0",overflow:"initial"}},[t("div",{style:{padding:"24px",background:"#fff",textAlign:"center"}},[s._v("\n ...\n "),t("br"),s._v("\n Really\n "),t("br"),s._v("..."),t("br"),s._v("..."),t("br"),s._v("..."),t("br"),s._v("\n long\n "),t("br"),s._v("..."),t("br"),s._v("..."),t("br"),s._v("..."),t("br"),s._v("..."),t("br"),s._v("..."),t("br"),s._v("...\n "),t("br"),s._v("..."),t("br"),s._v("..."),t("br"),s._v("..."),t("br"),s._v("..."),t("br"),s._v("..."),t("br"),s._v("...\n "),t("br"),s._v("..."),t("br"),s._v("..."),t("br"),s._v("..."),t("br"),s._v("..."),t("br"),s._v("..."),t("br"),s._v("...\n "),t("br"),s._v("..."),t("br"),s._v("..."),t("br"),s._v("..."),t("br"),s._v("..."),t("br"),s._v("..."),t("br"),s._v("...\n "),t("br"),s._v("..."),t("br"),s._v("..."),t("br"),s._v("..."),t("br"),s._v("..."),t("br"),s._v("..."),t("br"),s._v("...\n "),t("br"),s._v("..."),t("br"),s._v("..."),t("br"),s._v("..."),t("br"),s._v("..."),t("br"),s._v("..."),t("br"),s._v("...\n "),t("br"),s._v("..."),t("br"),s._v("..."),t("br"),s._v("..."),t("br"),s._v("..."),t("br"),s._v("..."),t("br"),s._v("\n content\n ")])]),s._v(" "),t("a-layout-footer",{style:{textAlign:"center"}},[s._v("\n Ant Design ©2018 Created by Ant UED\n ")])],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:"Fixed-Sider"}},[s._v("Fixed Sider "),t("a",{staticClass:"anchor",attrs:{href:"#Fixed-Sider"}},[s._v("#")])]),s._v(" "),t("p",[s._v("When dealing with long content, a fixed sider can provide a better user experience.")])]),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("a-layout")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"components-layout-demo-fixed-sider"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-sider")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }\"")]),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("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"logo"')]),s._v(">")]),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("theme")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"dark"')]),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(":defaultSelectedKeys")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"['4']\"")]),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('"user"')]),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("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"nav-text"')]),s._v(">")]),s._v("nav 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('"video-camera"')]),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("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"nav-text"')]),s._v(">")]),s._v("nav 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('"upload"')]),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("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"nav-text"')]),s._v(">")]),s._v("nav 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-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("\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('"bar-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",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"nav-text"')]),s._v(">")]),s._v("nav 4"),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('"5"')]),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('"cloud-o"')]),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("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"nav-text"')]),s._v(">")]),s._v("nav 5"),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('"6"')]),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('"appstore-o"')]),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("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"nav-text"')]),s._v(">")]),s._v("nav 6"),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('"7"')]),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('"team"')]),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("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"nav-text"')]),s._v(">")]),s._v("nav 7"),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('"8"')]),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('"shop"')]),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("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"nav-text"')]),s._v(">")]),s._v("nav 8"),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")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-sider")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"{ marginLeft: '200px' }\"")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-header")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"{ background: '#fff', padding: 0 }\"")]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-content")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"{ margin: '24px 16px 0', overflow: 'initial' }\"")]),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("\"{ padding: '24px', background: '#fff', textAlign: 'center' }\"")]),s._v(">")]),s._v("\n ...\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("\n Really\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("..."),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("..."),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("..."),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("\n long\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("..."),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("..."),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("..."),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("..."),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("..."),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("..."),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("..."),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("..."),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("..."),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("..."),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("..."),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("..."),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("..."),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("..."),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("..."),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("..."),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("..."),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("..."),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("..."),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("..."),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("..."),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("..."),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("..."),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("..."),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("..."),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("..."),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("..."),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("..."),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("..."),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("..."),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("..."),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("..."),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("..."),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("..."),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("..."),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("br")]),s._v(" />")]),s._v("\n content\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-layout-content")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-footer")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"{ textAlign: 'center' }\"")]),s._v(">")]),s._v("\n Ant Design ©2018 Created by Ant UED\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-footer")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),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("style")]),s._v(">")]),t("span",{staticClass:"css"},[s._v("\n "),t("span",{staticClass:"hljs-selector-id"},[s._v("#components-layout-demo-fixed-sider")]),s._v(" "),t("span",{staticClass:"hljs-selector-class"},[s._v(".logo")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("32px")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),t("span",{staticClass:"hljs-built_in"},[s._v("rgba")]),s._v("(255, 255, 255, 0.2);\n "),t("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("16px")]),s._v(";\n }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])],2)]],2)};o._withStripped=!0;t(1359);var r=Object(e.a)({},o,[],!1,null,null,null);r.options.__file="components/layout/demo/fixed-sider.md";var m=r.exports,h=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <a-layout id="components-layout-demo-fixed">\n <a-layout-header :style="{ position: \'fixed\', zIndex: 1, width: \'100%\' }">\n <div class="logo"/>\n <a-menu theme="dark" mode="horizontal" :defaultSelectedKeys="[\'2\']" :style="{ lineHeight: \'64px\' }">\n <a-menu-item key="1">nav 1</a-menu-item>\n <a-menu-item key="2">nav 2</a-menu-item>\n <a-menu-item key="3">nav 3</a-menu-item>\n </a-menu>\n </a-layout-header>\n <a-layout-content :style="{ padding: \'0 50px\', marginTop: \'64px\' }">\n <a-breadcrumb :style="{ margin: \'16px 0\' }">\n <a-breadcrumb-item>Home</a-breadcrumb-item>\n <a-breadcrumb-item>List</a-breadcrumb-item>\n <a-breadcrumb-item>App</a-breadcrumb-item>\n </a-breadcrumb>\n <div :style="{ background: \'#fff\', padding: \'24px\', minHeight: \'380px\' }">Content</div>\n </a-layout-content>\n <a-layout-footer :style="{ textAlign: \'center\' }">\n Ant Design ©2018 Created by Ant UED\n </a-layout-footer>\n </a-layout>\n',script:null,style:"\n #components-layout-demo-fixed .logo {\n width: 120px;\n height: 31px;\n background: rgba(255, 255, 255, 0.2);\n margin: 16px 24px 16px 0;\n float: left;\n }\n",us:"\n#### Fixed Header\nFixed Header is generally used to fix the top navigation to facilitate page switching.\n",cn:"\n#### 固定头部\n一般用于固定顶部导航，方便页面切换。\n",sourceCode:'<template>\n <a-layout id="components-layout-demo-fixed">\n <a-layout-header :style="{ position: \'fixed\', zIndex: 1, width: \'100%\' }">\n <div class="logo" />\n <a-menu\n theme="dark"\n mode="horizontal"\n :defaultSelectedKeys="[\'2\']"\n :style="{ lineHeight: \'64px\' }"\n >\n <a-menu-item key="1">nav 1</a-menu-item>\n <a-menu-item key="2">nav 2</a-menu-item>\n <a-menu-item key="3">nav 3</a-menu-item>\n </a-menu>\n </a-layout-header>\n <a-layout-content :style="{ padding: \'0 50px\', marginTop: \'64px\' }">\n <a-breadcrumb :style="{ margin: \'16px 0\' }">\n <a-breadcrumb-item>Home</a-breadcrumb-item>\n <a-breadcrumb-item>List</a-breadcrumb-item>\n <a-breadcrumb-item>App</a-breadcrumb-item>\n </a-breadcrumb>\n <div :style="{ background: \'#fff\', padding: \'24px\', minHeight: \'380px\' }">Content</div>\n </a-layout-content>\n <a-layout-footer :style="{ textAlign: \'center\' }">\n Ant Design ©2018 Created by Ant UED\n </a-layout-footer>\n </a-layout>\n</template>\n<style>\n #components-layout-demo-fixed .logo {\n width: 120px;\n height: 31px;\n background: rgba(255, 255, 255, 0.2);\n margin: 16px 24px 16px 0;\n float: left;\n }\n</style>\n'}}},[t("template",{slot:"component"},[t("a-layout",{attrs:{id:"components-layout-demo-fixed"}},[t("a-layout-header",{style:{position:"fixed",zIndex:1,width:"100%"}},[t("div",{staticClass:"logo"}),s._v(" "),t("a-menu",{style:{lineHeight:"64px"},attrs:{theme:"dark",mode:"horizontal",defaultSelectedKeys:["2"]}},[t("a-menu-item",{key:"1"},[s._v("nav 1")]),s._v(" "),t("a-menu-item",{key:"2"},[s._v("nav 2")]),s._v(" "),t("a-menu-item",{key:"3"},[s._v("nav 3")])],1)],1),s._v(" "),t("a-layout-content",{style:{padding:"0 50px",marginTop:"64px"}},[t("a-breadcrumb",{style:{margin:"16px 0"}},[t("a-breadcrumb-item",[s._v("Home")]),s._v(" "),t("a-breadcrumb-item",[s._v("List")]),s._v(" "),t("a-breadcrumb-item",[s._v("App")])],1),s._v(" "),t("div",{style:{background:"#fff",padding:"24px",minHeight:"380px"}},[s._v("Content")])],1),s._v(" "),t("a-layout-footer",{style:{textAlign:"center"}},[s._v("\n Ant Design ©2018 Created by Ant UED\n ")])],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:"Fixed-Header"}},[s._v("Fixed Header "),t("a",{staticClass:"anchor",attrs:{href:"#Fixed-Header"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Fixed Header is generally used to fix the top navigation to facilitate page switching.")])]),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("a-layout")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"components-layout-demo-fixed"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-header")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"{ position: 'fixed', zIndex: 1, width: '100%' }\"")]),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("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"logo"')]),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("theme")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"horizontal"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":defaultSelectedKeys")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"['2']\"")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"{ lineHeight: '64px' }\"")]),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("nav 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("nav 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("nav 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")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-header")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-content")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"{ padding: '0 50px', marginTop: '64px' }\"")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"{ margin: '16px 0' }\"")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb-item")]),s._v(">")]),s._v("Home"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb-item")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb-item")]),s._v(">")]),s._v("List"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb-item")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb-item")]),s._v(">")]),s._v("App"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb-item")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb")]),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("\"{ background: '#fff', padding: '24px', minHeight: '380px' }\"")]),s._v(">")]),s._v("Content"),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-layout-content")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-footer")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"{ textAlign: 'center' }\"")]),s._v(">")]),s._v("\n Ant Design ©2018 Created by Ant UED\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-footer")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),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("style")]),s._v(">")]),t("span",{staticClass:"css"},[s._v("\n "),t("span",{staticClass:"hljs-selector-id"},[s._v("#components-layout-demo-fixed")]),s._v(" "),t("span",{staticClass:"hljs-selector-class"},[s._v(".logo")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("120px")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("31px")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),t("span",{staticClass:"hljs-built_in"},[s._v("rgba")]),s._v("(255, 255, 255, 0.2);\n "),t("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("16px")]),s._v(" "),t("span",{staticClass:"hljs-number"},[s._v("24px")]),s._v(" "),t("span",{staticClass:"hljs-number"},[s._v("16px")]),s._v(" "),t("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("float")]),s._v(": left;\n }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])],2)]],2)};h._withStripped=!0;t(1360);var u=Object(e.a)({},h,[],!1,null,null,null);u.options.__file="components/layout/demo/fixed.md";var d=u.exports,C=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <a-layout id="components-layout-demo-responsive">\n <a-layout-sider breakpoint="lg" collapsedWidth="0" @collapse="onCollapse" @breakpoint="onBreakpoint">\n <div class="logo"/>\n <a-menu theme="dark" mode="inline" :defaultSelectedKeys="[\'4\']">\n <a-menu-item key="1">\n <a-icon type="user"/>\n <span class="nav-text">nav 1</span>\n </a-menu-item>\n <a-menu-item key="2">\n <a-icon type="video-camera"/>\n <span class="nav-text">nav 2</span>\n </a-menu-item>\n <a-menu-item key="3">\n <a-icon type="upload"/>\n <span class="nav-text">nav 3</span>\n </a-menu-item>\n <a-menu-item key="4">\n <a-icon type="user"/>\n <span class="nav-text">nav 4</span>\n </a-menu-item>\n </a-menu>\n </a-layout-sider>\n <a-layout>\n <a-layout-header :style="{ background: \'#fff\', padding: 0 }"/>\n <a-layout-content :style="{ margin: \'24px 16px 0\' }">\n <div :style="{ padding: \'24px\', background: \'#fff\', minHeight: \'360px\' }">\n content\n </div>\n </a-layout-content>\n <a-layout-footer style="textAlign: center">\n Ant Design ©2018 Created by Ant UED\n </a-layout-footer>\n </a-layout>\n </a-layout>\n',script:"\n export default {\n methods: {\n onCollapse(collapsed, type) {\n console.log(collapsed, type);\n },\n onBreakpoint(broken) {\n console.log(broken);\n },\n },\n };\n",style:"\n #components-layout-demo-responsive .logo {\n height: 32px;\n background: rgba(255, 255, 255, 0.2);\n margin: 16px;\n }\n",us:"\n#### Responsive\nLayout.Sider supports responsive layout.\n> Note: You can get a responsive layout by setting `breakpoint`, the Sider will collapse to the width of `collapsedWidth` when window width is below the `breakpoint`. And a special trigger will appear if the `collapsedWidth` is set to `0`.\n",cn:"\n#### 响应式布局\nLayout.Sider 支持响应式布局。\n> 说明：配置 `breakpoint` 属性即生效，视窗宽度小于 `breakpoint` 时 Sider 缩小为 `collapsedWidth` 宽度，若将 `collapsedWidth` 设置为零，会出现特殊 trigger。\n",sourceCode:'<template>\n <a-layout id="components-layout-demo-responsive">\n <a-layout-sider\n breakpoint="lg"\n collapsedWidth="0"\n @collapse="onCollapse"\n @breakpoint="onBreakpoint"\n >\n <div class="logo" />\n <a-menu theme="dark" mode="inline" :defaultSelectedKeys="[\'4\']">\n <a-menu-item key="1">\n <a-icon type="user" />\n <span class="nav-text">nav 1</span>\n </a-menu-item>\n <a-menu-item key="2">\n <a-icon type="video-camera" />\n <span class="nav-text">nav 2</span>\n </a-menu-item>\n <a-menu-item key="3">\n <a-icon type="upload" />\n <span class="nav-text">nav 3</span>\n </a-menu-item>\n <a-menu-item key="4">\n <a-icon type="user" />\n <span class="nav-text">nav 4</span>\n </a-menu-item>\n </a-menu>\n </a-layout-sider>\n <a-layout>\n <a-layout-header :style="{ background: \'#fff\', padding: 0 }" />\n <a-layout-content :style="{ margin: \'24px 16px 0\' }">\n <div :style="{ padding: \'24px\', background: \'#fff\', minHeight: \'360px\' }">\n content\n </div>\n </a-layout-content>\n <a-layout-footer style="textAlign: center">\n Ant Design ©2018 Created by Ant UED\n </a-layout-footer>\n </a-layout>\n </a-layout>\n</template>\n<script>\n export default {\n methods: {\n onCollapse(collapsed, type) {\n console.log(collapsed, type);\n },\n onBreakpoint(broken) {\n console.log(broken);\n },\n },\n };\n<\/script>\n\n<style>\n #components-layout-demo-responsive .logo {\n height: 32px;\n background: rgba(255, 255, 255, 0.2);\n margin: 16px;\n }\n</style>\n'}}},[t("template",{slot:"component"},[t("a-layout",{attrs:{id:"components-layout-demo-responsive"}},[t("a-layout-sider",{attrs:{breakpoint:"lg",collapsedWidth:"0"},on:{collapse:s.onCollapse,breakpoint:s.onBreakpoint}},[t("div",{staticClass:"logo"}),s._v(" "),t("a-menu",{attrs:{theme:"dark",mode:"inline",defaultSelectedKeys:["4"]}},[t("a-menu-item",{key:"1"},[t("a-icon",{attrs:{type:"user"}}),s._v(" "),t("span",{staticClass:"nav-text"},[s._v("nav 1")])],1),s._v(" "),t("a-menu-item",{key:"2"},[t("a-icon",{attrs:{type:"video-camera"}}),s._v(" "),t("span",{staticClass:"nav-text"},[s._v("nav 2")])],1),s._v(" "),t("a-menu-item",{key:"3"},[t("a-icon",{attrs:{type:"upload"}}),s._v(" "),t("span",{staticClass:"nav-text"},[s._v("nav 3")])],1),s._v(" "),t("a-menu-item",{key:"4"},[t("a-icon",{attrs:{type:"user"}}),s._v(" "),t("span",{staticClass:"nav-text"},[s._v("nav 4")])],1)],1)],1),s._v(" "),t("a-layout",[t("a-layout-header",{style:{background:"#fff",padding:0}}),s._v(" "),t("a-layout-content",{style:{margin:"24px 16px 0"}},[t("div",{style:{padding:"24px",background:"#fff",minHeight:"360px"}},[s._v("\n content\n ")])]),s._v(" "),t("a-layout-footer",{staticStyle:{textAlign:"center"}},[s._v("\n Ant Design ©2018 Created by Ant UED\n ")])],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("Layout.Sider 支持响应式布局。")]),s._v(" "),t("blockquote",[t("p",[s._v("说明：配置 "),t("code",[s._v("breakpoint")]),s._v(" 属性即生效，视窗宽度小于 "),t("code",[s._v("breakpoint")]),s._v(" 时 Sider 缩小为 "),t("code",[s._v("collapsedWidth")]),s._v(" 宽度，若将 "),t("code",[s._v("collapsedWidth")]),s._v(" 设置为零，会出现特殊 trigger。")])])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Responsive"}},[s._v("Responsive "),t("a",{staticClass:"anchor",attrs:{href:"#Responsive"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Layout.Sider supports responsive layout.")]),s._v(" "),t("blockquote",[t("p",[s._v("Note: You can get a responsive layout by setting "),t("code",[s._v("breakpoint")]),s._v(", the Sider will collapse to the width of "),t("code",[s._v("collapsedWidth")]),s._v(" when window width is below the "),t("code",[s._v("breakpoint")]),s._v(". And a special trigger will appear if the "),t("code",[s._v("collapsedWidth")]),s._v(" is set to "),t("code",[s._v("0")]),s._v(".")])])]),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("a-layout")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"components-layout-demo-responsive"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-sider")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("breakpoint")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"lg"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("collapsedWidth")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("@collapse")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"onCollapse"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("@breakpoint")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"onBreakpoint"')]),s._v("\n >")]),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("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"logo"')]),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("theme")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"dark"')]),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(":defaultSelectedKeys")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"['4']\"")]),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('"user"')]),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("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"nav-text"')]),s._v(">")]),s._v("nav 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('"video-camera"')]),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("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"nav-text"')]),s._v(">")]),s._v("nav 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('"upload"')]),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("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"nav-text"')]),s._v(">")]),s._v("nav 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-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("\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('"user"')]),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("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"nav-text"')]),s._v(">")]),s._v("nav 4"),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")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-sider")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-header")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"{ background: '#fff', padding: 0 }\"")]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-content")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"{ margin: '24px 16px 0' }\"")]),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("\"{ padding: '24px', background: '#fff', minHeight: '360px' }\"")]),s._v(">")]),s._v("\n content\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-layout-content")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-footer")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"textAlign: center"')]),s._v(">")]),s._v("\n Ant Design ©2018 Created by Ant UED\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-footer")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),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 onCollapse(collapsed, type) {\n "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(collapsed, type);\n },\n onBreakpoint(broken) {\n "),t("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(broken);\n },\n },\n };\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),t("span",{staticClass:"css"},[s._v("\n "),t("span",{staticClass:"hljs-selector-id"},[s._v("#components-layout-demo-responsive")]),s._v(" "),t("span",{staticClass:"hljs-selector-class"},[s._v(".logo")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("32px")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),t("span",{staticClass:"hljs-built_in"},[s._v("rgba")]),s._v("(255, 255, 255, 0.2);\n "),t("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("16px")]),s._v(";\n }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])],2)]],2)};C._withStripped=!0;var j={methods:{onCollapse:function(s,a){console.log(s,a)},onBreakpoint:function(s){console.log(s)}}},g=(t(1361),Object(e.a)(j,C,[],!1,null,null,null));g.options.__file="components/layout/demo/responsive.md";var y=g.exports,b=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <a-layout id="components-layout-demo-side" style="min-height: 100vh">\n <a-layout-sider collapsible="" v-model="collapsed">\n <div class="logo"/>\n <a-menu theme="dark" :defaultSelectedKeys="[\'1\']" mode="inline">\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-sub-menu key="sub1">\n <span slot="title"><a-icon type="user"/><span>User</span></span>\n <a-menu-item key="3">Tom</a-menu-item>\n <a-menu-item key="4">Bill</a-menu-item>\n <a-menu-item key="5">Alex</a-menu-item>\n </a-sub-menu>\n <a-sub-menu key="sub2">\n <span slot="title"><a-icon type="team"/><span>Team</span></span>\n <a-menu-item key="6">Team 1</a-menu-item>\n <a-menu-item key="8">Team 2</a-menu-item>\n </a-sub-menu>\n <a-menu-item key="9">\n <a-icon type="file"/>\n <span>File</span>\n </a-menu-item>\n </a-menu>\n </a-layout-sider>\n <a-layout>\n <a-layout-header style="background: #fff; padding: 0"/>\n <a-layout-content style="margin: 0 16px">\n <a-breadcrumb style="margin: 16px 0">\n <a-breadcrumb-item>User</a-breadcrumb-item>\n <a-breadcrumb-item>Bill</a-breadcrumb-item>\n </a-breadcrumb>\n <div :style="{ padding: \'24px\', background: \'#fff\', minHeight: \'360px\' }">\n Bill is a cat.\n </div>\n </a-layout-content>\n <a-layout-footer style="text-align: center">\n Ant Design ©2018 Created by Ant UED\n </a-layout-footer>\n </a-layout>\n </a-layout>\n',script:"\n export default {\n data() {\n return {\n collapsed: false,\n };\n },\n };\n",style:"\n #components-layout-demo-side .logo {\n height: 32px;\n background: rgba(255, 255, 255, 0.2);\n margin: 16px;\n }\n",us:"\n#### Sider\nTwo-columns layout. The sider menu can be collapsed when horizontal space is limited.\nGenerally, the mainnav is placed on the left side of the page, and the secondary menu is placed on the top of the working area. Contents will adapt the layout to the viewing area to improve the horizontal space usage, while the layout of the whole page is not stable.\nThe level of the aside navigation is scalable. The first, second, and third level navigations could be present more fluently and relevantly, and aside navigation can be fixed, allowing the user to quickly switch and spot the current position, improving the user experience. However, this navigation occupies some horizontal space of the contents\n",cn:"\n#### 侧边布局\n侧边两列式布局。页面横向空间有限时，侧边导航可收起。\n侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。\n",sourceCode:'<template>\n <a-layout id="components-layout-demo-side" style="min-height: 100vh">\n <a-layout-sider collapsible v-model="collapsed">\n <div class="logo" />\n <a-menu theme="dark" :defaultSelectedKeys="[\'1\']" mode="inline">\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-sub-menu key="sub1">\n <span slot="title"><a-icon type="user" /><span>User</span></span>\n <a-menu-item key="3">Tom</a-menu-item>\n <a-menu-item key="4">Bill</a-menu-item>\n <a-menu-item key="5">Alex</a-menu-item>\n </a-sub-menu>\n <a-sub-menu key="sub2">\n <span slot="title"><a-icon type="team" /><span>Team</span></span>\n <a-menu-item key="6">Team 1</a-menu-item>\n <a-menu-item key="8">Team 2</a-menu-item>\n </a-sub-menu>\n <a-menu-item key="9">\n <a-icon type="file" />\n <span>File</span>\n </a-menu-item>\n </a-menu>\n </a-layout-sider>\n <a-layout>\n <a-layout-header style="background: #fff; padding: 0" />\n <a-layout-content style="margin: 0 16px">\n <a-breadcrumb style="margin: 16px 0">\n <a-breadcrumb-item>User</a-breadcrumb-item>\n <a-breadcrumb-item>Bill</a-breadcrumb-item>\n </a-breadcrumb>\n <div :style="{ padding: \'24px\', background: \'#fff\', minHeight: \'360px\' }">\n Bill is a cat.\n </div>\n </a-layout-content>\n <a-layout-footer style="text-align: center">\n Ant Design ©2018 Created by Ant UED\n </a-layout-footer>\n </a-layout>\n </a-layout>\n</template>\n<script>\n export default {\n data() {\n return {\n collapsed: false,\n };\n },\n };\n<\/script>\n\n<style>\n #components-layout-demo-side .logo {\n height: 32px;\n background: rgba(255, 255, 255, 0.2);\n margin: 16px;\n }\n</style>\n'}}},[t("template",{slot:"component"},[t("a-layout",{staticStyle:{"min-height":"100vh"},attrs:{id:"components-layout-demo-side"}},[t("a-layout-sider",{attrs:{collapsible:""},model:{value:s.collapsed,callback:function(a){s.collapsed=a},expression:"collapsed"}},[t("div",{staticClass:"logo"}),s._v(" "),t("a-menu",{attrs:{theme:"dark",defaultSelectedKeys:["1"],mode:"inline"}},[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-sub-menu",{key:"sub1"},[t("span",{attrs:{slot:"title"},slot:"title"},[t("a-icon",{attrs:{type:"user"}}),t("span",[s._v("User")])],1),s._v(" "),t("a-menu-item",{key:"3"},[s._v("Tom")]),s._v(" "),t("a-menu-item",{key:"4"},[s._v("Bill")]),s._v(" "),t("a-menu-item",{key:"5"},[s._v("Alex")])],1),s._v(" "),t("a-sub-menu",{key:"sub2"},[t("span",{attrs:{slot:"title"},slot:"title"},[t("a-icon",{attrs:{type:"team"}}),t("span",[s._v("Team")])],1),s._v(" "),t("a-menu-item",{key:"6"},[s._v("Team 1")]),s._v(" "),t("a-menu-item",{key:"8"},[s._v("Team 2")])],1),s._v(" "),t("a-menu-item",{key:"9"},[t("a-icon",{attrs:{type:"file"}}),s._v(" "),t("span",[s._v("File")])],1)],1)],1),s._v(" "),t("a-layout",[t("a-layout-header",{staticStyle:{background:"#fff",padding:"0"}}),s._v(" "),t("a-layout-content",{staticStyle:{margin:"0 16px"}},[t("a-breadcrumb",{staticStyle:{margin:"16px 0"}},[t("a-breadcrumb-item",[s._v("User")]),s._v(" "),t("a-breadcrumb-item",[s._v("Bill")])],1),s._v(" "),t("div",{style:{padding:"24px",background:"#fff",minHeight:"360px"}},[s._v("\n Bill is a cat.\n ")])],1),s._v(" "),t("a-layout-footer",{staticStyle:{"text-align":"center"}},[s._v("\n Ant Design ©2018 Created by Ant UED\n ")])],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("br"),s._v("\n侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。"),t("br")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Sider"}},[s._v("Sider "),t("a",{staticClass:"anchor",attrs:{href:"#Sider"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Two-columns layout. The sider menu can be collapsed when horizontal space is limited."),t("br"),s._v("\nGenerally, the mainnav is placed on the left side of the page, and the secondary menu is placed on the top of the working area. Contents will adapt the layout to the viewing area to improve the horizontal space usage, while the layout of the whole page is not stable."),t("br"),s._v("\nThe level of the aside navigation is scalable. The first, second, and third level navigations could be present more fluently and relevantly, and aside navigation can be fixed, allowing the user to quickly switch and spot the current position, improving the user experience. However, this navigation occupies some horizontal space of the contents"),t("br"),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("a-layout")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"components-layout-demo-side"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"min-height: 100vh"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-sider")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("collapsible")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"collapsed"')]),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("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"logo"')]),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("theme")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":defaultSelectedKeys")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"['1']\"")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"inline"')]),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('"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-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('"user"')]),s._v(" />")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("User"),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("Tom"),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("Bill"),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('"5"')]),s._v(">")]),s._v("Alex"),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('"team"')]),s._v(" />")]),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Team"),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('"6"')]),s._v(">")]),s._v("Team 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('"8"')]),s._v(">")]),s._v("Team 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-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('"9"')]),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('"file"')]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("File"),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")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-sider")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-header")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"background: #fff; padding: 0"')]),s._v(" />")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-content")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"margin: 0 16px"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"margin: 16px 0"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb-item")]),s._v(">")]),s._v("User"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb-item")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb-item")]),s._v(">")]),s._v("Bill"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb-item")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb")]),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("\"{ padding: '24px', background: '#fff', minHeight: '360px' }\"")]),s._v(">")]),s._v("\n Bill is a cat.\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-layout-content")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-footer")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"text-align: center"')]),s._v(">")]),s._v("\n Ant Design ©2018 Created by Ant UED\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-footer")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),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("collapsed")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),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\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),t("span",{staticClass:"css"},[s._v("\n "),t("span",{staticClass:"hljs-selector-id"},[s._v("#components-layout-demo-side")]),s._v(" "),t("span",{staticClass:"hljs-selector-class"},[s._v(".logo")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("32px")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),t("span",{staticClass:"hljs-built_in"},[s._v("rgba")]),s._v("(255, 255, 255, 0.2);\n "),t("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("16px")]),s._v(";\n }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])],2)]],2)};b._withStripped=!0;var f={data:function(){return{collapsed:!1}}},x=(t(1362),Object(e.a)(f,b,[],!1,null,null,null));x.options.__file="components/layout/demo/side.md";var k=x.exports,w=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <a-layout id="components-layout-demo-top-side-2">\n <a-layout-header class="header">\n <div class="logo"/>\n <a-menu theme="dark" mode="horizontal" :defaultSelectedKeys="[\'2\']" :style="{ lineHeight: \'64px\' }">\n <a-menu-item key="1">nav 1</a-menu-item>\n <a-menu-item key="2">nav 2</a-menu-item>\n <a-menu-item key="3">nav 3</a-menu-item>\n </a-menu>\n </a-layout-header>\n <a-layout>\n <a-layout-sider width="200" style="background: #fff">\n <a-menu mode="inline" :defaultSelectedKeys="[\'1\']" :defaultOpenKeys="[\'sub1\']" :style="{ height: \'100%\', borderRight: 0 }">\n <a-sub-menu key="sub1">\n <span slot="title"><a-icon type="user"/>subnav 1</span>\n <a-menu-item key="1">option1</a-menu-item>\n <a-menu-item key="2">option2</a-menu-item>\n <a-menu-item key="3">option3</a-menu-item>\n <a-menu-item key="4">option4</a-menu-item>\n </a-sub-menu>\n <a-sub-menu key="sub2">\n <span slot="title"><a-icon type="laptop"/>subnav 2</span>\n <a-menu-item key="5">option5</a-menu-item>\n <a-menu-item key="6">option6</a-menu-item>\n <a-menu-item key="7">option7</a-menu-item>\n <a-menu-item key="8">option8</a-menu-item>\n </a-sub-menu>\n <a-sub-menu key="sub3">\n <span slot="title"><a-icon type="notification"/>subnav 3</span>\n <a-menu-item key="9">option9</a-menu-item>\n <a-menu-item key="10">option10</a-menu-item>\n <a-menu-item key="11">option11</a-menu-item>\n <a-menu-item key="12">option12</a-menu-item>\n </a-sub-menu>\n </a-menu>\n </a-layout-sider>\n <a-layout style="padding: 0 24px 24px">\n <a-breadcrumb style="margin: 16px 0">\n <a-breadcrumb-item>Home</a-breadcrumb-item>\n <a-breadcrumb-item>List</a-breadcrumb-item>\n <a-breadcrumb-item>App</a-breadcrumb-item>\n </a-breadcrumb>\n <a-layout-content :style="{ background: \'#fff\', padding: \'24px\', margin: 0, minHeight: \'280px\' }">\n Content\n </a-layout-content>\n </a-layout>\n </a-layout>\n </a-layout>\n',script:"\n export default {\n data() {\n return {\n collapsed: false,\n };\n },\n };\n",style:"\n #components-layout-demo-top-side-2 .logo {\n width: 120px;\n height: 31px;\n background: rgba(255, 255, 255, 0.2);\n margin: 16px 28px 16px 0;\n float: left;\n }\n",us:"\n#### Header Sider 2\nBoth the top navigation and the sidebar, commonly used in application site.\n",cn:"\n#### 顶部-侧边布局-通栏\n同样拥有顶部导航及侧边栏，区别是两边未留边距，多用于应用型的网站。\n",sourceCode:'<template>\n <a-layout id="components-layout-demo-top-side-2">\n <a-layout-header class="header">\n <div class="logo" />\n <a-menu\n theme="dark"\n mode="horizontal"\n :defaultSelectedKeys="[\'2\']"\n :style="{ lineHeight: \'64px\' }"\n >\n <a-menu-item key="1">nav 1</a-menu-item>\n <a-menu-item key="2">nav 2</a-menu-item>\n <a-menu-item key="3">nav 3</a-menu-item>\n </a-menu>\n </a-layout-header>\n <a-layout>\n <a-layout-sider width="200" style="background: #fff">\n <a-menu\n mode="inline"\n :defaultSelectedKeys="[\'1\']"\n :defaultOpenKeys="[\'sub1\']"\n :style="{ height: \'100%\', borderRight: 0 }"\n >\n <a-sub-menu key="sub1">\n <span slot="title"><a-icon type="user" />subnav 1</span>\n <a-menu-item key="1">option1</a-menu-item>\n <a-menu-item key="2">option2</a-menu-item>\n <a-menu-item key="3">option3</a-menu-item>\n <a-menu-item key="4">option4</a-menu-item>\n </a-sub-menu>\n <a-sub-menu key="sub2">\n <span slot="title"><a-icon type="laptop" />subnav 2</span>\n <a-menu-item key="5">option5</a-menu-item>\n <a-menu-item key="6">option6</a-menu-item>\n <a-menu-item key="7">option7</a-menu-item>\n <a-menu-item key="8">option8</a-menu-item>\n </a-sub-menu>\n <a-sub-menu key="sub3">\n <span slot="title"><a-icon type="notification" />subnav 3</span>\n <a-menu-item key="9">option9</a-menu-item>\n <a-menu-item key="10">option10</a-menu-item>\n <a-menu-item key="11">option11</a-menu-item>\n <a-menu-item key="12">option12</a-menu-item>\n </a-sub-menu>\n </a-menu>\n </a-layout-sider>\n <a-layout style="padding: 0 24px 24px">\n <a-breadcrumb style="margin: 16px 0">\n <a-breadcrumb-item>Home</a-breadcrumb-item>\n <a-breadcrumb-item>List</a-breadcrumb-item>\n <a-breadcrumb-item>App</a-breadcrumb-item>\n </a-breadcrumb>\n <a-layout-content\n :style="{ background: \'#fff\', padding: \'24px\', margin: 0, minHeight: \'280px\' }"\n >\n Content\n </a-layout-content>\n </a-layout>\n </a-layout>\n </a-layout>\n</template>\n<script>\n export default {\n data() {\n return {\n collapsed: false,\n };\n },\n };\n<\/script>\n\n<style>\n #components-layout-demo-top-side-2 .logo {\n width: 120px;\n height: 31px;\n background: rgba(255, 255, 255, 0.2);\n margin: 16px 28px 16px 0;\n float: left;\n }\n</style>\n'}}},[t("template",{slot:"component"},[t("a-layout",{attrs:{id:"components-layout-demo-top-side-2"}},[t("a-layout-header",{staticClass:"header"},[t("div",{staticClass:"logo"}),s._v(" "),t("a-menu",{style:{lineHeight:"64px"},attrs:{theme:"dark",mode:"horizontal",defaultSelectedKeys:["2"]}},[t("a-menu-item",{key:"1"},[s._v("nav 1")]),s._v(" "),t("a-menu-item",{key:"2"},[s._v("nav 2")]),s._v(" "),t("a-menu-item",{key:"3"},[s._v("nav 3")])],1)],1),s._v(" "),t("a-layout",[t("a-layout-sider",{staticStyle:{background:"#fff"},attrs:{width:"200"}},[t("a-menu",{style:{height:"100%",borderRight:0},attrs:{mode:"inline",defaultSelectedKeys:["1"],defaultOpenKeys:["sub1"]}},[t("a-sub-menu",{key:"sub1"},[t("span",{attrs:{slot:"title"},slot:"title"},[t("a-icon",{attrs:{type:"user"}}),s._v("subnav 1")],1),s._v(" "),t("a-menu-item",{key:"1"},[s._v("option1")]),s._v(" "),t("a-menu-item",{key:"2"},[s._v("option2")]),s._v(" "),t("a-menu-item",{key:"3"},[s._v("option3")]),s._v(" "),t("a-menu-item",{key:"4"},[s._v("option4")])],1),s._v(" "),t("a-sub-menu",{key:"sub2"},[t("span",{attrs:{slot:"title"},slot:"title"},[t("a-icon",{attrs:{type:"laptop"}}),s._v("subnav 2")],1),s._v(" "),t("a-menu-item",{key:"5"},[s._v("option5")]),s._v(" "),t("a-menu-item",{key:"6"},[s._v("option6")]),s._v(" "),t("a-menu-item",{key:"7"},[s._v("option7")]),s._v(" "),t("a-menu-item",{key:"8"},[s._v("option8")])],1),s._v(" "),t("a-sub-menu",{key:"sub3"},[t("span",{attrs:{slot:"title"},slot:"title"},[t("a-icon",{attrs:{type:"notification"}}),s._v("subnav 3")],1),s._v(" "),t("a-menu-item",{key:"9"},[s._v("option9")]),s._v(" "),t("a-menu-item",{key:"10"},[s._v("option10")]),s._v(" "),t("a-menu-item",{key:"11"},[s._v("option11")]),s._v(" "),t("a-menu-item",{key:"12"},[s._v("option12")])],1)],1)],1),s._v(" "),t("a-layout",{staticStyle:{padding:"0 24px 24px"}},[t("a-breadcrumb",{staticStyle:{margin:"16px 0"}},[t("a-breadcrumb-item",[s._v("Home")]),s._v(" "),t("a-breadcrumb-item",[s._v("List")]),s._v(" "),t("a-breadcrumb-item",[s._v("App")])],1),s._v(" "),t("a-layout-content",{style:{background:"#fff",padding:"24px",margin:0,minHeight:"280px"}},[s._v("\n Content\n ")])],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:"Header-Sider-2"}},[s._v("Header Sider 2 "),t("a",{staticClass:"anchor",attrs:{href:"#Header-Sider-2"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Both the top navigation and the sidebar, commonly used in application site.")])]),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("a-layout")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"components-layout-demo-top-side-2"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-header")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"header"')]),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("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"logo"')]),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("theme")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"horizontal"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":defaultSelectedKeys")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"['2']\"")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"{ lineHeight: '64px' }\"")]),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("nav 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("nav 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("nav 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")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-header")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-sider")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"background: #fff"')]),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("mode")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"inline"')]),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(":style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"{ height: '100%', borderRight: 0 }\"")]),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(">")]),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('"user"')]),s._v(" />")]),s._v("subnav 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(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("option1"),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("option2"),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("option3"),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("option4"),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('"laptop"')]),s._v(" />")]),s._v("subnav 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(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"5"')]),s._v(">")]),s._v("option5"),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("option6"),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("option7"),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("option8"),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('"sub3"')]),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('"notification"')]),s._v(" />")]),s._v("subnav 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(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),s._v("option9"),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("option10"),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("option11"),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("option12"),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("a-layout-sider")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"padding: 0 24px 24px"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"margin: 16px 0"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb-item")]),s._v(">")]),s._v("Home"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb-item")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb-item")]),s._v(">")]),s._v("List"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb-item")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb-item")]),s._v(">")]),s._v("App"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb-item")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-content")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }\"")]),s._v("\n >")]),s._v("\n Content\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-content")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),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("collapsed")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("false")]),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\n"),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),t("span",{staticClass:"css"},[s._v("\n "),t("span",{staticClass:"hljs-selector-id"},[s._v("#components-layout-demo-top-side-2")]),s._v(" "),t("span",{staticClass:"hljs-selector-class"},[s._v(".logo")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("120px")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("31px")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),t("span",{staticClass:"hljs-built_in"},[s._v("rgba")]),s._v("(255, 255, 255, 0.2);\n "),t("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("16px")]),s._v(" "),t("span",{staticClass:"hljs-number"},[s._v("28px")]),s._v(" "),t("span",{staticClass:"hljs-number"},[s._v("16px")]),s._v(" "),t("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("float")]),s._v(": left;\n }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])],2)]],2)};w._withStripped=!0;var S={data:function(){return{collapsed:!1}}},H=(t(1363),Object(e.a)(S,w,[],!1,null,null,null));H.options.__file="components/layout/demo/top-side-2.md";var A=H.exports,L=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <a-layout id="components-layout-demo-top-side">\n <a-layout-header class="header">\n <div class="logo"/>\n <a-menu theme="dark" mode="horizontal" :defaultSelectedKeys="[\'2\']" :style="{ lineHeight: \'64px\' }">\n <a-menu-item key="1">nav 1</a-menu-item>\n <a-menu-item key="2">nav 2</a-menu-item>\n <a-menu-item key="3">nav 3</a-menu-item>\n </a-menu>\n </a-layout-header>\n <a-layout-content style="padding: 0 50px">\n <a-breadcrumb style="margin: 16px 0">\n <a-breadcrumb-item>Home</a-breadcrumb-item>\n <a-breadcrumb-item>List</a-breadcrumb-item>\n <a-breadcrumb-item>App</a-breadcrumb-item>\n </a-breadcrumb>\n <a-layout style="padding: 24px 0; background: #fff">\n <a-layout-sider width="200" style="background: #fff">\n <a-menu mode="inline" :defaultSelectedKeys="[\'1\']" :defaultOpenKeys="[\'sub1\']" style="height: 100%">\n <a-sub-menu key="sub1">\n <span slot="title"><a-icon type="user"/>subnav 1</span>\n <a-menu-item key="1">option1</a-menu-item>\n <a-menu-item key="2">option2</a-menu-item>\n <a-menu-item key="3">option3</a-menu-item>\n <a-menu-item key="4">option4</a-menu-item>\n </a-sub-menu>\n <a-sub-menu key="sub2">\n <span slot="title"><a-icon type="laptop"/>subnav 2</span>\n <a-menu-item key="5">option5</a-menu-item>\n <a-menu-item key="6">option6</a-menu-item>\n <a-menu-item key="7">option7</a-menu-item>\n <a-menu-item key="8">option8</a-menu-item>\n </a-sub-menu>\n <a-sub-menu key="sub3">\n <span slot="title"><a-icon type="notification"/>subnav 3</span>\n <a-menu-item key="9">option9</a-menu-item>\n <a-menu-item key="10">option10</a-menu-item>\n <a-menu-item key="11">option11</a-menu-item>\n <a-menu-item key="12">option12</a-menu-item>\n </a-sub-menu>\n </a-menu>\n </a-layout-sider>\n <a-layout-content :style="{ padding: \'0 24px\', minHeight: \'280px\' }">\n Content\n </a-layout-content>\n </a-layout>\n </a-layout-content>\n <a-layout-footer style="text-align: center">\n Ant Design ©2018 Created by Ant UED\n </a-layout-footer>\n </a-layout>\n',script:null,style:"\n #components-layout-demo-top-side .logo {\n width: 120px;\n height: 31px;\n background: rgba(255, 255, 255, 0.2);\n margin: 16px 28px 16px 0;\n float: left;\n }\n",us:"\n#### Header-Sider\nBoth the top navigation and the sidebar, commonly used in documentation site.\n",cn:"\n#### 顶部-侧边布局\n拥有顶部导航及侧边栏的页面，多用于展示类网站。\n",sourceCode:'<template>\n <a-layout id="components-layout-demo-top-side">\n <a-layout-header class="header">\n <div class="logo" />\n <a-menu\n theme="dark"\n mode="horizontal"\n :defaultSelectedKeys="[\'2\']"\n :style="{ lineHeight: \'64px\' }"\n >\n <a-menu-item key="1">nav 1</a-menu-item>\n <a-menu-item key="2">nav 2</a-menu-item>\n <a-menu-item key="3">nav 3</a-menu-item>\n </a-menu>\n </a-layout-header>\n <a-layout-content style="padding: 0 50px">\n <a-breadcrumb style="margin: 16px 0">\n <a-breadcrumb-item>Home</a-breadcrumb-item>\n <a-breadcrumb-item>List</a-breadcrumb-item>\n <a-breadcrumb-item>App</a-breadcrumb-item>\n </a-breadcrumb>\n <a-layout style="padding: 24px 0; background: #fff">\n <a-layout-sider width="200" style="background: #fff">\n <a-menu\n mode="inline"\n :defaultSelectedKeys="[\'1\']"\n :defaultOpenKeys="[\'sub1\']"\n style="height: 100%"\n >\n <a-sub-menu key="sub1">\n <span slot="title"><a-icon type="user" />subnav 1</span>\n <a-menu-item key="1">option1</a-menu-item>\n <a-menu-item key="2">option2</a-menu-item>\n <a-menu-item key="3">option3</a-menu-item>\n <a-menu-item key="4">option4</a-menu-item>\n </a-sub-menu>\n <a-sub-menu key="sub2">\n <span slot="title"><a-icon type="laptop" />subnav 2</span>\n <a-menu-item key="5">option5</a-menu-item>\n <a-menu-item key="6">option6</a-menu-item>\n <a-menu-item key="7">option7</a-menu-item>\n <a-menu-item key="8">option8</a-menu-item>\n </a-sub-menu>\n <a-sub-menu key="sub3">\n <span slot="title"><a-icon type="notification" />subnav 3</span>\n <a-menu-item key="9">option9</a-menu-item>\n <a-menu-item key="10">option10</a-menu-item>\n <a-menu-item key="11">option11</a-menu-item>\n <a-menu-item key="12">option12</a-menu-item>\n </a-sub-menu>\n </a-menu>\n </a-layout-sider>\n <a-layout-content :style="{ padding: \'0 24px\', minHeight: \'280px\' }">\n Content\n </a-layout-content>\n </a-layout>\n </a-layout-content>\n <a-layout-footer style="text-align: center">\n Ant Design ©2018 Created by Ant UED\n </a-layout-footer>\n </a-layout>\n</template>\n\n<style>\n #components-layout-demo-top-side .logo {\n width: 120px;\n height: 31px;\n background: rgba(255, 255, 255, 0.2);\n margin: 16px 28px 16px 0;\n float: left;\n }\n</style>\n'}}},[t("template",{slot:"component"},[t("a-layout",{attrs:{id:"components-layout-demo-top-side"}},[t("a-layout-header",{staticClass:"header"},[t("div",{staticClass:"logo"}),s._v(" "),t("a-menu",{style:{lineHeight:"64px"},attrs:{theme:"dark",mode:"horizontal",defaultSelectedKeys:["2"]}},[t("a-menu-item",{key:"1"},[s._v("nav 1")]),s._v(" "),t("a-menu-item",{key:"2"},[s._v("nav 2")]),s._v(" "),t("a-menu-item",{key:"3"},[s._v("nav 3")])],1)],1),s._v(" "),t("a-layout-content",{staticStyle:{padding:"0 50px"}},[t("a-breadcrumb",{staticStyle:{margin:"16px 0"}},[t("a-breadcrumb-item",[s._v("Home")]),s._v(" "),t("a-breadcrumb-item",[s._v("List")]),s._v(" "),t("a-breadcrumb-item",[s._v("App")])],1),s._v(" "),t("a-layout",{staticStyle:{padding:"24px 0",background:"#fff"}},[t("a-layout-sider",{staticStyle:{background:"#fff"},attrs:{width:"200"}},[t("a-menu",{staticStyle:{height:"100%"},attrs:{mode:"inline",defaultSelectedKeys:["1"],defaultOpenKeys:["sub1"]}},[t("a-sub-menu",{key:"sub1"},[t("span",{attrs:{slot:"title"},slot:"title"},[t("a-icon",{attrs:{type:"user"}}),s._v("subnav 1")],1),s._v(" "),t("a-menu-item",{key:"1"},[s._v("option1")]),s._v(" "),t("a-menu-item",{key:"2"},[s._v("option2")]),s._v(" "),t("a-menu-item",{key:"3"},[s._v("option3")]),s._v(" "),t("a-menu-item",{key:"4"},[s._v("option4")])],1),s._v(" "),t("a-sub-menu",{key:"sub2"},[t("span",{attrs:{slot:"title"},slot:"title"},[t("a-icon",{attrs:{type:"laptop"}}),s._v("subnav 2")],1),s._v(" "),t("a-menu-item",{key:"5"},[s._v("option5")]),s._v(" "),t("a-menu-item",{key:"6"},[s._v("option6")]),s._v(" "),t("a-menu-item",{key:"7"},[s._v("option7")]),s._v(" "),t("a-menu-item",{key:"8"},[s._v("option8")])],1),s._v(" "),t("a-sub-menu",{key:"sub3"},[t("span",{attrs:{slot:"title"},slot:"title"},[t("a-icon",{attrs:{type:"notification"}}),s._v("subnav 3")],1),s._v(" "),t("a-menu-item",{key:"9"},[s._v("option9")]),s._v(" "),t("a-menu-item",{key:"10"},[s._v("option10")]),s._v(" "),t("a-menu-item",{key:"11"},[s._v("option11")]),s._v(" "),t("a-menu-item",{key:"12"},[s._v("option12")])],1)],1)],1),s._v(" "),t("a-layout-content",{style:{padding:"0 24px",minHeight:"280px"}},[s._v("\n Content\n ")])],1)],1),s._v(" "),t("a-layout-footer",{staticStyle:{"text-align":"center"}},[s._v("\n Ant Design ©2018 Created by Ant UED\n ")])],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:"Header-Sider"}},[s._v("Header-Sider "),t("a",{staticClass:"anchor",attrs:{href:"#Header-Sider"}},[s._v("#")])]),s._v(" "),t("p",[s._v("Both the top navigation and the sidebar, commonly used in documentation site.")])]),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("a-layout")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"components-layout-demo-top-side"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-header")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"header"')]),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("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"logo"')]),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("theme")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"horizontal"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":defaultSelectedKeys")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"['2']\"")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"{ lineHeight: '64px' }\"")]),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("nav 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("nav 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("nav 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")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-header")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-content")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"padding: 0 50px"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"margin: 16px 0"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb-item")]),s._v(">")]),s._v("Home"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb-item")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb-item")]),s._v(">")]),s._v("List"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb-item")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb-item")]),s._v(">")]),s._v("App"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb-item")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"padding: 24px 0; background: #fff"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-sider")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"background: #fff"')]),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("mode")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"inline"')]),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("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"height: 100%"')]),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(">")]),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('"user"')]),s._v(" />")]),s._v("subnav 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(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("option1"),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("option2"),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("option3"),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("option4"),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('"laptop"')]),s._v(" />")]),s._v("subnav 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(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"5"')]),s._v(">")]),s._v("option5"),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("option6"),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("option7"),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("option8"),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('"sub3"')]),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('"notification"')]),s._v(" />")]),s._v("subnav 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(" "),t("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),s._v("option9"),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("option10"),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("option11"),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("option12"),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("a-layout-sider")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-content")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"{ padding: '0 24px', minHeight: '280px' }\"")]),s._v(">")]),s._v("\n Content\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-content")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-content")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-footer")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"text-align: center"')]),s._v(">")]),s._v("\n Ant Design ©2018 Created by Ant UED\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-footer")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),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("style")]),s._v(">")]),t("span",{staticClass:"css"},[s._v("\n "),t("span",{staticClass:"hljs-selector-id"},[s._v("#components-layout-demo-top-side")]),s._v(" "),t("span",{staticClass:"hljs-selector-class"},[s._v(".logo")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("120px")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("31px")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),t("span",{staticClass:"hljs-built_in"},[s._v("rgba")]),s._v("(255, 255, 255, 0.2);\n "),t("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("16px")]),s._v(" "),t("span",{staticClass:"hljs-number"},[s._v("28px")]),s._v(" "),t("span",{staticClass:"hljs-number"},[s._v("16px")]),s._v(" "),t("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("float")]),s._v(": left;\n }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])],2)]],2)};L._withStripped=!0;t(1364);var D=Object(e.a)({},L,[],!1,null,null,null);D.options.__file="components/layout/demo/top-side.md";var T=D.exports,K=function(){var s=this,a=s.$createElement,t=s._self._c||a;return t("div",[[t("demo-box",{attrs:{jsfiddle:{html:'\n <a-layout id="components-layout-demo-top" class="layout">\n <a-layout-header>\n <div class="logo"/>\n <a-menu theme="dark" mode="horizontal" :defaultSelectedKeys="[\'2\']" :style="{ lineHeight: \'64px\' }">\n <a-menu-item key="1">nav 1</a-menu-item>\n <a-menu-item key="2">nav 2</a-menu-item>\n <a-menu-item key="3">nav 3</a-menu-item>\n </a-menu>\n </a-layout-header>\n <a-layout-content style="padding: 0 50px">\n <a-breadcrumb style="margin: 16px 0">\n <a-breadcrumb-item>Home</a-breadcrumb-item>\n <a-breadcrumb-item>List</a-breadcrumb-item>\n <a-breadcrumb-item>App</a-breadcrumb-item>\n </a-breadcrumb>\n <div :style="{ background: \'#fff\', padding: \'24px\', minHeight: \'280px\' }">Content</div>\n </a-layout-content>\n <a-layout-footer style="text-align: center">\n Ant Design ©2018 Created by Ant UED\n </a-layout-footer>\n </a-layout>\n',script:null,style:"\n #components-layout-demo-top .logo {\n width: 120px;\n height: 31px;\n background: rgba(255, 255, 255, 0.2);\n margin: 16px 24px 16px 0;\n float: left;\n }\n",us:"\n#### Header-Content-Footer\nThe most basic \"header-content-footer\" layout.\nGenerally, the mainnav is placed at the top of the page, and includes the logo, the first level navigation, and the secondary menu (users, settings, notifications) from left to right in it.\nWe always put contents in a fixed size navigation (eg: `1200px`), the layout of the whole page is stable, it's not affected by viewing area.\nTop-bottom structure is conform with the top-bottom viewing habit, it's a classical navigation pattern of websites. This pattern demonstrates efficiency in the main workarea, while using some vertical space. And because the horizontal space of the navigation is limited, this pattern is not suitable for cases when the first level navigation contains many elements or links\n",cn:"\n#### 上中下布局\n最基本的『上-中-下』布局。\n一般主导航放置于页面的顶端，从左自右依次为：logo、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器影响；上下级的结构符合用户上下浏览的习惯，也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率，但在纵向空间上会有一些牺牲。此外，由于导航栏水平空间的限制，不适合那些一级导航项很多的信息结构。\n",sourceCode:'<template>\n <a-layout id="components-layout-demo-top" class="layout">\n <a-layout-header>\n <div class="logo" />\n <a-menu\n theme="dark"\n mode="horizontal"\n :defaultSelectedKeys="[\'2\']"\n :style="{ lineHeight: \'64px\' }"\n >\n <a-menu-item key="1">nav 1</a-menu-item>\n <a-menu-item key="2">nav 2</a-menu-item>\n <a-menu-item key="3">nav 3</a-menu-item>\n </a-menu>\n </a-layout-header>\n <a-layout-content style="padding: 0 50px">\n <a-breadcrumb style="margin: 16px 0">\n <a-breadcrumb-item>Home</a-breadcrumb-item>\n <a-breadcrumb-item>List</a-breadcrumb-item>\n <a-breadcrumb-item>App</a-breadcrumb-item>\n </a-breadcrumb>\n <div :style="{ background: \'#fff\', padding: \'24px\', minHeight: \'280px\' }">Content</div>\n </a-layout-content>\n <a-layout-footer style="text-align: center">\n Ant Design ©2018 Created by Ant UED\n </a-layout-footer>\n </a-layout>\n</template>\n<style>\n #components-layout-demo-top .logo {\n width: 120px;\n height: 31px;\n background: rgba(255, 255, 255, 0.2);\n margin: 16px 24px 16px 0;\n float: left;\n }\n</style>\n'}}},[t("template",{slot:"component"},[t("a-layout",{staticClass:"layout",attrs:{id:"components-layout-demo-top"}},[t("a-layout-header",[t("div",{staticClass:"logo"}),s._v(" "),t("a-menu",{style:{lineHeight:"64px"},attrs:{theme:"dark",mode:"horizontal",defaultSelectedKeys:["2"]}},[t("a-menu-item",{key:"1"},[s._v("nav 1")]),s._v(" "),t("a-menu-item",{key:"2"},[s._v("nav 2")]),s._v(" "),t("a-menu-item",{key:"3"},[s._v("nav 3")])],1)],1),s._v(" "),t("a-layout-content",{staticStyle:{padding:"0 50px"}},[t("a-breadcrumb",{staticStyle:{margin:"16px 0"}},[t("a-breadcrumb-item",[s._v("Home")]),s._v(" "),t("a-breadcrumb-item",[s._v("List")]),s._v(" "),t("a-breadcrumb-item",[s._v("App")])],1),s._v(" "),t("div",{style:{background:"#fff",padding:"24px",minHeight:"280px"}},[s._v("Content")])],1),s._v(" "),t("a-layout-footer",{staticStyle:{"text-align":"center"}},[s._v("\n Ant Design ©2018 Created by Ant UED\n ")])],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("br"),s._v("\n一般主导航放置于页面的顶端，从左自右依次为：logo、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器影响；上下级的结构符合用户上下浏览的习惯，也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率，但在纵向空间上会有一些牺牲。此外，由于导航栏水平空间的限制，不适合那些一级导航项很多的信息结构。"),t("br")])]),s._v(" "),t("template",{slot:"us-description"},[t("h4",{attrs:{id:"Header-Content-Footer"}},[s._v("Header-Content-Footer "),t("a",{staticClass:"anchor",attrs:{href:"#Header-Content-Footer"}},[s._v("#")])]),s._v(" "),t("p",[s._v('The most basic "header-content-footer" layout.'),t("br"),s._v("\nGenerally, the mainnav is placed at the top of the page, and includes the logo, the first level navigation, and the secondary menu (users, settings, notifications) from left to right in it."),t("br"),s._v("\nWe always put contents in a fixed size navigation (eg: "),t("code",[s._v("1200px")]),s._v("), the layout of the whole page is stable, it's not affected by viewing area."),t("br"),s._v("\nTop-bottom structure is conform with the top-bottom viewing habit, it's a classical navigation pattern of websites. This pattern demonstrates efficiency in the main workarea, while using some vertical space. And because the horizontal space of the navigation is limited, this pattern is not suitable for cases when the first level navigation contains many elements or links"),t("br"),t("br"),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("a-layout")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"components-layout-demo-top"')]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"layout"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-header")]),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("class")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"logo"')]),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("theme")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"horizontal"')]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":defaultSelectedKeys")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"['2']\"")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v(":style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v("\"{ lineHeight: '64px' }\"")]),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("nav 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("nav 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("nav 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")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-header")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-content")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"padding: 0 50px"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"margin: 16px 0"')]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb-item")]),s._v(">")]),s._v("Home"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb-item")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb-item")]),s._v(">")]),s._v("List"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb-item")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb-item")]),s._v(">")]),s._v("App"),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb-item")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-breadcrumb")]),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("\"{ background: '#fff', padding: '24px', minHeight: '280px' }\"")]),s._v(">")]),s._v("Content"),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-layout-content")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("<"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-footer")]),s._v(" "),t("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),t("span",{staticClass:"hljs-string"},[s._v('"text-align: center"')]),s._v(">")]),s._v("\n Ant Design ©2018 Created by Ant UED\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout-footer")]),s._v(">")]),s._v("\n "),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("a-layout")]),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("style")]),s._v(">")]),t("span",{staticClass:"css"},[s._v("\n "),t("span",{staticClass:"hljs-selector-id"},[s._v("#components-layout-demo-top")]),s._v(" "),t("span",{staticClass:"hljs-selector-class"},[s._v(".logo")]),s._v(" {\n "),t("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("120px")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("31px")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),t("span",{staticClass:"hljs-built_in"},[s._v("rgba")]),s._v("(255, 255, 255, 0.2);\n "),t("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("16px")]),s._v(" "),t("span",{staticClass:"hljs-number"},[s._v("24px")]),s._v(" "),t("span",{staticClass:"hljs-number"},[s._v("16px")]),s._v(" "),t("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n "),t("span",{staticClass:"hljs-attribute"},[s._v("float")]),s._v(": left;\n }\n")]),t("span",{staticClass:"hljs-tag"},[s._v("</"),t("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])],2)]],2)};K._withStripped=!0;t(1365);var z=Object(e.a)({},K,[],!1,null,null,null);z.options.__file="components/layout/demo/top.md";var E=z.exports,F=function(){var s=this.$createElement;this._self._c;return this._m(0)};F._withStripped=!0;var U=Object(e.a)({},F,[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-jsx"}},[s._v("<Layout>\n "),t("span",{pre:!0,attrs:{class:"xml"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("Header")]),s._v(">")]),s._v("header"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("Header")]),s._v(">")])]),s._v("\n "),t("span",{pre:!0,attrs:{class:"xml"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("Layout")]),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("Sider")]),s._v(">")]),s._v("left sidebar"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("Sider")]),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("Content")]),s._v(">")]),s._v("main content"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("Content")]),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("Sider")]),s._v(">")]),s._v("right sidebar"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("Sider")]),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("Layout")]),s._v(">")])]),s._v("\n "),t("span",{pre:!0,attrs:{class:"xml"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("Footer")]),s._v(">")]),s._v("footer"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("Footer")]),s._v(">")])]),s._v("\n"),t("span",{pre:!0,attrs:{class:"xml"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("Layout")]),s._v(">")])]),s._v("\n")])]),s._v(" "),t("h3",{attrs:{id:"Layout"}},[s._v("Layout "),t("a",{staticClass:"anchor",attrs:{href:"#Layout"}},[s._v("#")])]),s._v(" "),t("p",[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("class")]),s._v(" "),t("td",[s._v("容器 class")]),s._v(" "),t("td",[s._v("string")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("style")]),s._v(" "),t("td",[s._v("指定样式")]),s._v(" "),t("td",[s._v("object")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("hasSider")]),s._v(" "),t("td",[s._v("表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("-")])])])]),s._v(" "),t("blockquote",[t("p",[t("code",{pre:!0},[s._v("Layout.Header")]),s._v(" "),t("code",{pre:!0},[s._v("Layout.Footer")]),s._v(" "),t("code",{pre:!0},[s._v("Layout.Content")]),s._v(" API 与 "),t("code",{pre:!0},[s._v("Layout")]),s._v(" 相同")])]),s._v(" "),t("h3",{attrs:{id:"Layout.Sider"}},[s._v("Layout.Sider "),t("a",{staticClass:"anchor",attrs:{href:"#Layout.Sider"}},[s._v("#")])]),s._v(" "),t("p",[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("breakpoint")]),s._v(" "),t("td",[s._v("触发响应式布局的"),t("a",{attrs:{href:"/components/grid#API"}},[s._v("断点")])]),s._v(" "),t("td",[s._v("Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' }")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("class")]),s._v(" "),t("td",[s._v("容器 class")]),s._v(" "),t("td",[s._v("string")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("collapsed(v-model)")]),s._v(" "),t("td",[s._v("当前收起状态")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("collapsedWidth")]),s._v(" "),t("td",[s._v("收缩宽度，设置为 0 会出现特殊 trigger")]),s._v(" "),t("td",[s._v("number")]),s._v(" "),t("td",[s._v("80")])]),s._v(" "),t("tr",[t("td",[s._v("collapsible")]),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("defaultCollapsed")]),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("reverseArrow")]),s._v(" "),t("td",[s._v("翻转折叠提示箭头的方向，当 Sider 在右边时可以使用")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("style")]),s._v(" "),t("td",[s._v("指定样式")]),s._v(" "),t("td",[s._v("object|string")]),s._v(" "),t("td",[s._v("-")])]),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("dark")])])]),s._v(" "),t("tr",[t("td",[s._v("trigger")]),s._v(" "),t("td",[s._v("自定义 trigger，设置为 null 时隐藏 trigger")]),s._v(" "),t("td",[s._v("string|slot")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("width")]),s._v(" "),t("td",[s._v("宽度")]),s._v(" "),t("td",[s._v("number|string")]),s._v(" "),t("td",[s._v("200")])])])]),s._v(" "),t("h3",{attrs:{id:"事件"}},[s._v("事件 "),t("a",{staticClass:"anchor",attrs:{href:"#事件"}},[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("collapse")]),s._v(" "),t("td",[s._v("展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发")]),s._v(" "),t("td",[s._v("(collapsed, type) => {}")])]),s._v(" "),t("tr",[t("td",[s._v("breakpoint")]),s._v(" "),t("td",[s._v("触发响应式布局"),t("a",{attrs:{href:"/components/grid#api"}},[s._v("断点")]),s._v("时的回调")]),s._v(" "),t("td",[s._v("(broken) => {}")])])])]),s._v(" "),t("h4",{attrs:{id:"breakpoint-width"}},[s._v("breakpoint width "),t("a",{staticClass:"anchor",attrs:{href:"#breakpoint-width"}},[s._v("#")])]),s._v(" "),t("pre",{pre:!0},[t("code",{pre:!0,attrs:{"v-pre":"",class:"language-js"}},[s._v("{\n "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("xs")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'480px'")]),s._v(",\n "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("sm")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'576px'")]),s._v(",\n "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("md")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'768px'")]),s._v(",\n "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("lg")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'992px'")]),s._v(",\n "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("xl")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'1200px'")]),s._v(",\n "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("xxl")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'1600px'")]),s._v(",\n}\n")])])])}],!1,null,null,null);U.options.__file="components/layout/index.zh-CN.md";var B=U.exports,O=function(){var s=this.$createElement;this._self._c;return this._m(0)};O._withStripped=!0;var W=Object(e.a)({},O,[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-jsx"}},[s._v("<Layout>\n "),t("span",{pre:!0,attrs:{class:"xml"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("Header")]),s._v(">")]),s._v("header"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("Header")]),s._v(">")])]),s._v("\n "),t("span",{pre:!0,attrs:{class:"xml"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("Layout")]),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("Sider")]),s._v(">")]),s._v("left sidebar"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("Sider")]),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("Content")]),s._v(">")]),s._v("main content"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("Content")]),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("Sider")]),s._v(">")]),s._v("right sidebar"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("Sider")]),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("Layout")]),s._v(">")])]),s._v("\n "),t("span",{pre:!0,attrs:{class:"xml"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("<"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("Footer")]),s._v(">")]),s._v("footer"),t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("Footer")]),s._v(">")])]),s._v("\n"),t("span",{pre:!0,attrs:{class:"xml"}},[t("span",{pre:!0,attrs:{class:"hljs-tag"}},[s._v("</"),t("span",{pre:!0,attrs:{class:"hljs-name"}},[s._v("Layout")]),s._v(">")])]),s._v("\n")])]),s._v(" "),t("h3",{attrs:{id:"Layout"}},[s._v("Layout "),t("a",{staticClass:"anchor",attrs:{href:"#Layout"}},[s._v("#")])]),s._v(" "),t("p",[s._v("The wrapper.")]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("Property")]),s._v(" "),t("th",[s._v("Description")]),s._v(" "),t("th",[s._v("Type")]),s._v(" "),t("th",[s._v("Default")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("class")]),s._v(" "),t("td",[s._v("container className")]),s._v(" "),t("td",[s._v("string")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("style")]),s._v(" "),t("td",[s._v("to customize the styles")]),s._v(" "),t("td",[s._v("object|string")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("hasSider")]),s._v(" "),t("td",[s._v("whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("-")])])])]),s._v(" "),t("blockquote",[t("p",[s._v("APIs of "),t("code",{pre:!0},[s._v("Layout.Header")]),s._v(" "),t("code",{pre:!0},[s._v("Layout.Footer")]),s._v(" "),t("code",{pre:!0},[s._v("Layout.Content")]),s._v(" are the same as that of "),t("code",{pre:!0},[s._v("Layout")]),s._v(".")])]),s._v(" "),t("h3",{attrs:{id:"Layout.Sider"}},[s._v("Layout.Sider "),t("a",{staticClass:"anchor",attrs:{href:"#Layout.Sider"}},[s._v("#")])]),s._v(" "),t("p",[s._v("The sidebar.")]),s._v(" "),t("table",[t("thead",[t("tr",[t("th",[s._v("Property")]),s._v(" "),t("th",[s._v("Description")]),s._v(" "),t("th",[s._v("Type")]),s._v(" "),t("th",[s._v("Default")])])]),s._v(" "),t("tbody",[t("tr",[t("td",[s._v("breakpoint")]),s._v(" "),t("td",[t("a",{attrs:{href:"/ant-desing-vue/components/grid#api"}},[s._v("breakpoints")]),s._v(" of the responsive layout")]),s._v(" "),t("td",[s._v("Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' }")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("class")]),s._v(" "),t("td",[s._v("container className")]),s._v(" "),t("td",[s._v("string")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("collapsed(v-model)")]),s._v(" "),t("td",[s._v("to set the current status")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("collapsedWidth")]),s._v(" "),t("td",[s._v("width of the collapsed sidebar, by setting to "),t("code",{pre:!0},[s._v("0")]),s._v(" a special trigger will appear")]),s._v(" "),t("td",[s._v("number")]),s._v(" "),t("td",[s._v("80")])]),s._v(" "),t("tr",[t("td",[s._v("collapsible")]),s._v(" "),t("td",[s._v("whether can be collapsed")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("defaultCollapsed")]),s._v(" "),t("td",[s._v("to set the initial status")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("reverseArrow")]),s._v(" "),t("td",[s._v("reverse direction of arrow, for a sider that expands from the right")]),s._v(" "),t("td",[s._v("boolean")]),s._v(" "),t("td",[s._v("false")])]),s._v(" "),t("tr",[t("td",[s._v("style")]),s._v(" "),t("td",[s._v("to customize the styles")]),s._v(" "),t("td",[s._v("object|string")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("theme")]),s._v(" "),t("td",[s._v("color theme of the sidebar")]),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("dark")])])]),s._v(" "),t("tr",[t("td",[s._v("trigger")]),s._v(" "),t("td",[s._v("specify the customized trigger, set to null to hide the trigger")]),s._v(" "),t("td",[s._v("string|slot")]),s._v(" "),t("td",[s._v("-")])]),s._v(" "),t("tr",[t("td",[s._v("width")]),s._v(" "),t("td",[s._v("width of the sidebar")]),s._v(" "),t("td",[s._v("number|string")]),s._v(" "),t("td",[s._v("200")])])])]),s._v(" "),t("h3",{attrs:{id:"Events"}},[s._v("Events "),t("a",{staticClass:"anchor",attrs:{href:"#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("collapse")]),s._v(" "),t("td",[s._v("the callback function, executed by clicking the trigger or activating the responsive layout")]),s._v(" "),t("td",[s._v("(collapsed, type) => {}")])]),s._v(" "),t("tr",[t("td",[s._v("breakpoint")]),s._v(" "),t("td",[s._v("the callback function, executed when "),t("a",{attrs:{href:"/ant-desing-vue/components/grid#api"}},[s._v("breakpoints")]),s._v(" changed")]),s._v(" "),t("td",[s._v("(broken) => {}")])])])]),s._v(" "),t("h4",{attrs:{id:"breakpoint-width"}},[s._v("breakpoint width "),t("a",{staticClass:"anchor",attrs:{href:"#breakpoint-width"}},[s._v("#")])]),s._v(" "),t("pre",{pre:!0},[t("code",{pre:!0,attrs:{"v-pre":"",class:"language-js"}},[s._v("{\n "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("xs")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'480px'")]),s._v(",\n "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("sm")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'576px'")]),s._v(",\n "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("md")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'768px'")]),s._v(",\n "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("lg")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'992px'")]),s._v(",\n "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("xl")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'1200px'")]),s._v(",\n "),t("span",{pre:!0,attrs:{class:"hljs-attr"}},[s._v("xxl")]),s._v(": "),t("span",{pre:!0,attrs:{class:"hljs-string"}},[s._v("'1600px'")]),s._v(",\n}\n")])])])}],!1,null,null,null);W.options.__file="components/layout/index.en-US.md";var I=W.exports,$="# 布局\n 协助进行页面级整体布局。\n\n## 设计规则\n\n### 尺寸\n\n一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。\n\n- 顶部导航（大部分系统）：一级导航高度 `64px`，二级导航 `48px`。\n- 顶部导航（展示类页面）：一级导航高度 `80px`，二级导航 `56px`。\n- 顶部导航高度的范围计算公式为：`48+8n`。\n- 侧边导航宽度的范围计算公式：`200+8n`。\n\n### 交互\n\n- 一级导航和末级的导航需要在可视化的层面被强调出来；\n- 当前项应该在呈现上优先级最高；\n- 当导航收起的时候，当前项的样式自动赋予给它的上一个层级；\n- 左侧导航栏的收放交互同时支持手风琴和全展开的样式，根据业务的要求进行适当的选择。\n\n### 视觉\n\n导航样式上需要根据信息层级合理的选择样式：\n\n- **大色块强调**\n\n 建议用于底色为深色系时，当前页面父级的导航项。\n\n- **高亮火柴棍**\n\n 当导航栏底色为浅色系时使用，可用于当前页面对应导航项，建议尽量在导航路径的最终项使用。\n\n- **字体高亮变色**\n\n 从可视化层面，字体高亮的视觉强化力度低于大色块，通常在当前项的上一级使用。\n\n- **字体放大**\n\n `12px`、`14px` 是导航的标准字号，14 号字体用在一、二级导航中。字号可以考虑导航项的等级做相应选择。\n\n## 组件概述\n\n- `Layout`：布局容器，其下可嵌套 `Header` `Sider` `Content` `Footer` 或 `Layout` 本身，可以放在任何父容器中。\n- `Header`：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。\n- `Sider`：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 `Layout` 中。\n- `Content`：内容部分，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。\n- `Footer`：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 `Layout` 中。\n\n> 注意：采用 flex 布局实现，请注意[浏览器兼容性](http://caniuse.com/#search=flex)问题。\n\n ## 代码演示",R="# Layout\n Handling the overall layout of a page.\n\n## Specification\n\n### Size\n\nThe first level navigation is inclined left near a logo, and the secondary menu is inclined right.\n\n- Top Navigation (almost systems): the height of the first level navigation `64px`, the second level navigation `48px`.\n- Top Navigation(contents page): the height of the first level navigation `80px`, the second level navigation `56px`.\n- Calculation formula of a top navigation: `48+8n`.\n- Calculation formula of an aside navigation: `200+8n`.\n\n### Interaction rules\n\n- The first level navigation and the last level navigation should be distinguishable by visualization;\n- The current item should have the highest priority of visualization;\n- When the current navigation item is collapsed, the style of the current navigation item is applied to its parent level;\n- The left side navigation bar has support for both the accordion and expanding styles; you can choose the one that fits your case the best.\n\n## Visualization rules\n\n Style of a navigation should conform to its level.\n\n- **Emphasis by colorblock**\n\n When background color is a deep color, you can use this pattern for the parent level navigation item of the current page.\n\n- **The highlight match stick**\n\n When background color is a light color, you can use this pattern for the current page navigation item; we recommend using it for the last item of the navigation path.\n\n- **Highlighted font**\n\n From the visualization aspect, a highlighted font is stronger than colorblock; this pattern is often used for the parent level of the current item.\n\n- **Enlarge the size of the font**\n\n `12px`, `14px` is a standard font size of navigations, `14px` is used for the first and the second level of the navigation. You can choose an appropriate font size regarding the level of your navigation.\n\n## Component Overview\n\n- `Layout`: The layout wrapper, in which `Header` `Sider` `Content` `Footer` or `Layout` itself can be nested, and can be placed in any parent container.\n- `Header`: The top layout with the default style, in which any element can be nested, and must be placed in `Layout`.\n- `Sider`: The sidebar with default style and basic functions, in which any element can be nested, and must be placed in `Layout`.\n- `Content`: The content layout with the default style, in which any element can be nested, and must be placed in `Layout`.\n- `Footer`: The bottom layout with the default style, in which any element can be nested, and must be placed in `Layout`.\n\n> Based on `flex layout`, please pay attention to the [compatibility](http://caniuse.com/#search=flex).\n\n ## Examples\n ",N={category:"Components",subtitle:"布局",type:"Layout",cols:1,title:"Layout",props:{iframeName:String},provide:function(){return{iframeDemo:this.iframeName?{}:{"fixed-sider":"/iframe/layout/#fixed-sider","fixed-header":"/iframe/layout/#fixed-header",sider:"/iframe/layout/#sider"}}},render:function(){var s=arguments[0],a=this.iframeName;return"fixed-sider"===a?s(m):"fixed-header"===a?s(d):"sider"===a?s(k):s("div",[s("md",{attrs:{cn:$,us:R}}),s(v),s(c),s(A),s(T),s(E),s(y),s(m),s(d),s(k),s("api",[s("template",{slot:"cn"},[s(B)]),s(I)])])}},P=Object(e.a)(N,void 0,void 0,!1,null,null,null);P.options.__file="components/layout/demo/index.vue";a.default=P.exports}}]); |