Layout 布局

协助进行页面级整体布局。

设计规则

尺寸

一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。

  • 顶部导航（大部分系统）：一级导航高度 64px，二级导航 48px。
  • 顶部导航（展示类页面）：一级导航高度 80px，二级导航 56px。
  • 顶部导航高度的范围计算公式为：48+8n。
  • 侧边导航宽度的范围计算公式：200+8n。

交互

  • 一级导航和末级的导航需要在可视化的层面被强调出来；
  • 当前项应该在呈现上优先级最高；
  • 当导航收起的时候，当前项的样式自动赋予给它的上一个层级；
  • 左侧导航栏的收放交互同时支持手风琴和全展开的样式，根据业务的要求进行适当的选择。

视觉

导航样式上需要根据信息层级合理的选择样式：

  • 大色块强调

建议用于底色为深色系时，当前页面父级的导航项。

  • 高亮火柴棍

当导航栏底色为浅色系时使用，可用于当前页面对应导航项，建议尽量在导航路径的最终项使用。

  • 字体高亮变色

从可视化层面，字体高亮的视觉强化力度低于大色块，通常在当前项的上一级使用。

  • 字体放大

12px、14px 是导航的标准字号，14 号字体用在一、二级导航中。字号可以考虑导航项的等级做相应选择。

组件概述

  • Layout：布局容器，其下可嵌套 Header Sider Content Footer 或 Layout 本身，可以放在任何父容器中。
  • Header：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
  • Sider：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 Layout 中。
  • Content：内容部分，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
  • Footer：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
注意：采用 flex 布局实现，请注意浏览器兼容性问题。

代码演示

基本结构

典型的页面布局。

  1. <template>
  2.     <div class="components-layout-demo-basic"> 
  3.         <v-layout>
  4.             <v-header>Header</v-header>
  5.             <v-content>Content</v-content>
  6.             <v-footer>Footer</v-footer>
  7.         </v-layout>
  8.     </div>
  10.     <div class="components-layout-demo-basic"> 
  11.         <v-layout>
  12.             <v-header>Header</v-header>
  13.             <v-layout>
  14.                 <v-sider>Sider</v-sider>
  15.                 <v-content>Content</v-content>
  16.             </v-layout>
  17.             <v-footer>Footer</v-footer>
  18.         </v-layout>
  19.     </div>
  21.     <div class="components-layout-demo-basic"> 
  22.         <v-layout>
  23.             <v-header>Header</v-header>
  24.             <v-layout>
  25.                 <v-content>Content</v-content>
  26.                 <v-sider>Sider</v-sider>
  27.             </v-layout>
  28.             <v-footer>Footer</v-footer>
  29.         </v-layout>
  30.     </div>
  32.     <div class="components-layout-demo-basic"> 
  33.         <v-layout>
  34.                 <v-sider>Sider</v-sider>
  35.                 <v-content>
  36.                     <v-header>Header</v-header>
  37.                     <v-content>Content</v-content>
  38.                     <v-footer>Footer</v-footer>
  39.                 </v-content>
  40.         </v-layout>
  41.     </div>
  42. </template>
  44. <style>
  45.     .components-layout-demo-basic {
  46.         text-align: center;
  47.         margin: 2rem;
  48.     }
  49.     .components-layout-demo-basic .ant-layout-header,
  50.     .components-layout-demo-basic .ant-layout-footer {
  51.         background: #7dbcea;
  52.         color: #fff;
  53.     }
  54.     .components-layout-demo-basic .ant-layout-footer {
  55.         line-height: 1.5;
  56.     }
  57.     .components-layout-demo-basic .ant-layout-sider {
  58.         background: #3ba0e9;
  59.         color: #fff;
  60.         line-height: 120px;
  61.     }
  62.     .components-layout-demo-basic .ant-layout-content {
  63.         background: rgba(16, 142, 233, 1);
  64.         color: #fff;
  65.         min-height: 120px;
  66.         line-height: 120px;
  67.     }
  68. </style>

上下中布局

最基本的『上-中-下』布局。一般主导航放置于页面的顶端，从左自右依次为：logo、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器影响；上下级的结构符合用户上下浏览的习惯，也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率，但在纵向空间上会有一些牺牲。此外，由于导航栏水平空间的限制，不适合那些一级导航项很多的信息结构。

  1. <template>
  2.     <div id="components-layout-demo-top"> 
  3.         <v-layout class="layout">
  4.             <v-header>
  5.                 <div class="logo"></div>
  6.                 <v-menu theme="dark" mode="horizontal" :data="menuData1" :style="{lineHeight: '64px'}"></v-menu>
  7.             </v-header>
  8.             <v-content :style="{ padding: '0 50px' }">
  9.                 <v-breadcrumb :style="{ margin: '12px 0' }">
  10.                     <v-breadcrumb-item>Home</v-breadcrumb-item>
  11.                     <v-breadcrumb-item href="">List</v-breadcrumb-item>
  12.                     <v-breadcrumb-item href="">App</v-breadcrumb-item>
  13.                 </v-breadcrumb>
  14.                 <div style="background: #fff; padding: 24px; min-height: 280px">Content</div>
  15.             </v-content>
  16.             <v-footer :style="{ textAlign: 'center' }">
  17.                 Ant Design ©2016 Created by Ant UED
  18.             </v-footer>
  19.         </v-layout>
  20.     </div>
  21. </template>
  23. <style>
  24.     #components-layout-demo-top .logo {
  25.         width: 120px;
  26.         height: 31px;
  27.         background: #333;
  28.         border-radius: 6px;
  29.         margin: 16px 24px 16px 0;
  30.         float: left;
  31.     }
  32. </style>
  33. <script>
  34.     export default {
  35.         data() {
  36.             return {
  37.                 menuData1: [{
  38.                     name: 'nav 1'
  39.                 },{
  40.                     name: 'nav 2',
  41.                     selected: true
  42.                 },{
  43.                     name: 'nav 3'
  44.                 }]
  45.             }
  46.         }
  47.     }
  48. </script>

顶部-侧边布局

多用在同时拥有顶部导航及侧边栏的页面。

  1. <template>
  2.     <div id="components-layout-demo-top-side">
  3.         <v-layout>
  4.             <v-header>
  5.                 <div class="logo"></div>
  6.                 <v-menu theme="dark" mode="horizontal" :data="menuData1" :style="{lineHeight: '64px'}"></v-menu>
  7.             </v-header>
  8.             <v-content :style="{ padding: '0 50px' }">
  9.                 <v-breadcrumb :style="{ margin: '12px 0' }">
  10.                     <v-breadcrumb-item>Home</v-breadcrumb-item>
  11.                     <v-breadcrumb-item href="">List</v-breadcrumb-item>
  12.                     <v-breadcrumb-item href="">App</v-breadcrumb-item>
  13.                 </v-breadcrumb>
  14.                 <v-layout style="background: #fff; padding: 24px 0;">
  15.                     <v-sider :width="200" style="background: #fff">
  16.                         <v-menu mode="inline" :data="menuData2"></v-menu>
  17.                     </v-sider>
  18.                     <v-content :style="{ padding: '0 24px', minHeight: 280 }">Content</v-content>
  19.                 </v-layout>
  20.             </v-content>
  21.             <v-footer :style="{ textAlign: 'center' }">
  22.                 Ant Design ©2016 Created by Ant UED
  23.             </v-footer>
  24.         </v-layout>
  25.     </div>
  26. </template>
  28. <style>
  29.     #components-layout-demo-top-side .logo {
  30.         width: 120px;
  31.         height: 31px;
  32.         background: #333;
  33.         border-radius: 6px;
  34.         margin: 16px 28px 16px 0;
  35.         float: left;
  36.     }
  37. </style>
  38. <script>
  39.     export default {
  40.         data() {
  41.             return {
  42.                 menuData1: [{
  43.                     name: 'nav 1'
  44.                 },{
  45.                     name: 'nav 2',
  46.                     selected: true
  47.                 },{
  48.                     name: 'nav 3'
  49.                 }],
  50.                 menuData2: [{
  51.                     name: 'subnav 1',
  52.                     icon: 'user',
  53.                     expand: true,
  54.                     children: [{
  55.                         name: 'option1',
  56.                         selected: true
  57.                     },{
  58.                         name: 'option2'
  59.                     },{
  60.                         name: 'option3'
  61.                     },{
  62.                         name: 'option4'
  63.                     }]
  64.                 },{
  65.                     name: 'subnav 2',
  66.                     icon: 'laptop',
  67.                     children: [{
  68.                         name: 'option5'
  69.                     },{
  70.                         name: 'option6'
  71.                     },{
  72.                         name: 'option7'
  73.                     },{
  74.                         name: 'option8'
  75.                     }]
  76.                 },{
  77.                     name: 'subnav 3',
  78.                     icon: 'notification',
  79.                     children: [{
  80.                         name: 'option9'
  81.                     },{
  82.                         name: 'option10'
  83.                     },{
  84.                         name: 'option11'
  85.                     },{
  86.                         name: 'option12'
  87.                     }]
  88.                 }]
  89.             }
  90.         }
  91.     }
  92. </script>

顶部-侧边布局-通栏

同样拥有顶部导航及侧边栏，区别是两边未留边距，多用于应用型的网站。

  1. <template>
  2.     <div id="components-layout-demo-top-side">
  3.         <v-layout>
  4.             <v-header>
  5.                 <div class="logo"></div>
  6.                 <v-menu theme="dark" mode="horizontal" :data="menuData1" style="line-height: 64px"></v-menu>
  7.             </v-header>
  8.             <v-layout>
  9.                 <v-sider :width="200" style="background: #fff">
  10.                     <v-menu mode="inline" :data="menuData2" style="height:100%"></v-menu>
  11.                 </v-sider>
  12.                 <v-layout style="padding:0 24px 24px">
  13.                     <v-breadcrumb style="margin:12px 0">
  14.                         <v-breadcrumb-item>Home</v-breadcrumb-item>
  15.                         <v-breadcrumb-item href="">List</v-breadcrumb-item>
  16.                         <v-breadcrumb-item href="">App</v-breadcrumb-item>
  17.                     </v-breadcrumb>
  18.                     <v-content style="background: #fff; padding: 24px; margin: 0; min-height: 280px">Content</v-content>
  19.                 </v-layout>
  20.             </v-layout>
  21.         </v-layout>
  22.     </div>
  23. </template>
  25. <style>
  26.     #components-layout-demo-top-side .logo {
  27.         width: 120px;
  28.         height: 31px;
  29.         background: #333;
  30.         border-radius: 6px;
  31.         margin: 16px 28px 16px 0;
  32.         float: left;
  33.     }
  34. </style>
  35. <script>
  36.     export default {
  37.         data() {
  38.             return {
  39.                 menuData1: [{
  40.                     name: 'nav 1'
  41.                 },{
  42.                     name: 'nav 2',
  43.                     selected: true
  44.                 },{
  45.                     name: 'nav 3'
  46.                 }],
  47.                 menuData2: [{
  48.                     name: 'subnav 1',
  49.                     icon: 'user',
  50.                     expand: true,
  51.                     children: [{
  52.                         name: 'option1',
  53.                         selected: true
  54.                     },{
  55.                         name: 'option2'
  56.                     },{
  57.                         name: 'option3'
  58.                     },{
  59.                         name: 'option4'
  60.                     }]
  61.                 },{
  62.                     name: 'subnav 2',
  63.                     icon: 'laptop',
  64.                     children: [{
  65.                         name: 'option5'
  66.                     },{
  67.                         name: 'option6'
  68.                     },{
  69.                         name: 'option7'
  70.                     },{
  71.                         name: 'option8'
  72.                     }]
  73.                 },{
  74.                     name: 'subnav 3',
  75.                     icon: 'notification',
  76.                     children: [{
  77.                         name: 'option9'
  78.                     },{
  79.                         name: 'option10'
  80.                     },{
  81.                         name: 'option11'
  82.                     },{
  83.                         name: 'option12'
  84.                     }]
  85.                 }]
  86.             }
  87.         }
  88.     }
  89. </script>

侧边布局

侧边两列式布局。页面横向空间有限时，侧边导航可收起。侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部份。

  1. <template>
  2.     <div id="components-layout-demo-side"> 
  3.         <v-layout>
  4.             <v-sider collapsible v-model="collapsed">
  5.                 <div class="logo"></div>
  6.                 <v-menu theme="dark" :mode="collapsed?'vertical':'inline'" :data="menuData3">
  7.                     <template slot-scope="{data}">
  8.                         <i v-if="data.icon" :class="'anticon anticon-' + data.icon"></i>
  9.                         <span :class="{'nav-text':data.icon}">{{data.name}}</span>
  10.                     </template>
  11.                     <template slot-scope="{data}" slot="sub">
  12.                         <i v-if="data.icon" :class="'anticon anticon-' + data.icon"></i>
  13.                         <span class="nav-text">{{data.name}}</span>
  14.                     </template>
  15.                 </v-menu>
  16.             </v-sider>
  17.             <v-layout>
  18.                 <v-header :style="{ background: '#fff', padding: 0 }"></v-header>
  19.                 <v-content :style="{ padding: '0 50px' }">
  20.                     <v-breadcrumb :style="{ margin: '12px 0' }">
  21.                         <v-breadcrumb-item>Home</v-breadcrumb-item>
  22.                         <v-breadcrumb-item href="">List</v-breadcrumb-item>
  23.                         <v-breadcrumb-item href="">App</v-breadcrumb-item>
  24.                     </v-breadcrumb>
  25.                     <div style="padding: 24px; background: #fff; min-height: 360px;">Content</div>
  26.                 </v-content>
  27.                 <v-footer :style="{ textAlign: 'center' }">
  28.                     Ant Design ©2016 Created by Ant UED
  29.                 </v-footer>
  30.             </v-layout>
  31.         </v-layout>
  32.     </div>
  33. </template>
  35. <style>
  36.     #components-layout-demo-side .logo {
  37.         height: 32px;
  38.         background: #333;
  39.         border-radius: 6px;
  40.         margin: 16px;
  41.     }
  42.     #components-layout-demo-side .ant-layout-sider-collapsed .anticon {
  43.         font-size: 16px;
  44.         margin-left: 8px;
  45.     }
  46.     #components-layout-demo-side .ant-layout-sider-collapsed .nav-text {
  47.         display: none;
  48.     }
  49.     #components-layout-demo-side .ant-layout-sider-collapsed .ant-menu-submenu-vertical > .ant-menu-submenu-title:after {
  50.         display: none;
  51.     }
  52. </style>
  54. <script>
  55.     export default {
  56.         data() {
  57.             return {
  58.                 collapsed: false,
  59.                 menuData3: [{
  60.                     name: 'User',
  61.                     icon: 'user',
  62.                     children: [{
  63.                         name: 'Tome'
  64.                     },{
  65.                         name: 'Bill'
  66.                     },{
  67.                         name: 'Alex'
  68.                     }]
  69.                 },{
  70.                     name: 'Team',
  71.                     icon: 'team',
  72.                     children: [{
  73.                         name: 'Team1'
  74.                     },{
  75.                         name: 'Team2'
  76.                     }]
  77.                 },{
  78.                     name: 'File',
  79.                     icon: 'file',
  80.                     selected: true
  81.                 }]
  82.             }
  83.         },
  84.         watch: {
  85.             collapsed(val) {
  86.                 console.log(val);
  87.             },
  88.         },
  89.     }
  90. </script>

自定义触发器

要使用自定义触发器，可以设置 :trigger="false" 来隐藏默认设定。

  1. <template>
  2.     <div id="components-layout-demo-custom-trigger"> 
  3.         <v-layout>
  4.             <v-sider collapsible :collapsed="customCollapsed" :trigger="false" :collapsed-width="64">
  5.                 <div class="logo"></div>
  6.                 <v-menu theme="dark" mode="inline" :data="menuData4">
  7.                     <template slot-scope="{data}">
  8.                         <i v-if="data.icon" :class="'anticon anticon-' + data.icon"></i>
  9.                         <span class="nav-text">{{data.name}}</span>
  10.                     </template>
  11.                 </v-menu>
  12.             </v-sider>
  13.             <v-layout>
  14.                 <v-header :style="{ background: '#fff', padding: 0 }">
  15.                     <v-icon class="trigger" :type="this.customCollapsed ? 'menu-unfold' : 'menu-fold'" @click.native="toggle"></v-icon>
  16.                 </v-header>
  17.                 <v-content :style="{ padding: '0 50px' }">
  18.                     <v-breadcrumb :style="{ margin: '12px 0' }">
  19.                         <v-breadcrumb-item>Home</v-breadcrumb-item>
  20.                         <v-breadcrumb-item href="">List</v-breadcrumb-item>
  21.                         <v-breadcrumb-item href="">App</v-breadcrumb-item>
  22.                     </v-breadcrumb>
  23.                     <div style="padding: 24px; background: #fff; min-height: 360px;">Content</div>
  24.                 </v-content>
  25.                 <v-footer :style="{ textAlign: 'center' }">
  26.                     Ant Design ©2016 Created by Ant UED
  27.                 </v-footer>
  28.             </v-layout>
  29.         </v-layout>
  30.     </div>
  31. </template>
  33. <style>
  34.     #components-layout-demo-custom-trigger .trigger {
  35.         font-size: 18px;
  36.         line-height: 64px;
  37.         padding: 0 16px;
  38.         cursor: pointer;
  39.         transition: color .3s;
  40.     }
  41.     #components-layout-demo-custom-trigger .trigger:hover {
  42.         color: #108ee9;
  43.     }
  44.     #components-layout-demo-custom-trigger .logo {
  45.         height: 32px;
  46.         background: #333;
  47.         border-radius: 6px;
  48.         margin: 16px;
  49.     }
  50.     #components-layout-demo-custom-trigger .ant-layout-sider-collapsed .anticon {
  51.         font-size: 16px;
  52.     }
  53.     #components-layout-demo-custom-trigger .ant-layout-sider-collapsed .nav-text {
  54.         display: none;
  55.     }
  56. </style>
  58. <script>
  59.     export default {
  60.         data() {
  61.             return {
  62.                 customCollapsed: false,
  63.                 menuData4: [{
  64.                     name: 'nav 1',
  65.                     icon: 'user',
  66.                     selected: true
  67.                 },{
  68.                     name: 'nav 2',
  69.                     icon: 'video-camera'
  70.                 },{
  71.                     name: 'nav 3',
  72.                     icon: 'upload'
  73.                 }]
  74.             }
  75.         },
  76.         methods: {
  77.             toggle() {
  78.                 this.customCollapsed = !this.customCollapsed;
  79.             }
  80.         }
  81.     }
  82. </script>

响应式布局

Layout.Sider 支持响应式布局。

说明：配置 breakpoint 属性即生效，视窗宽度小于 breakpoint 时 Sider 缩小为 collapsedWidth 宽度，若将 collapsedWidth 设置为零，会出现特殊 trigger。

  1. <template>
  2.     <div id="components-layout-demo-responsive"> 
  3.         <v-layout>
  4.             <v-sider breakpoint="lg" :collapsed-width="0">
  5.                 <div class="logo"></div>
  6.                 <v-menu theme="dark" mode="inline" :data="menuData5">
  7.                     <template slot-scope="{data}">
  8.                         <i v-if="data.icon" :class="'anticon anticon-' + data.icon"></i>
  9.                         <span class="nav-text">{{data.name}}</span>
  10.                     </template>
  11.                 </v-menu>
  12.             </v-sider>
  13.             <v-layout>
  14.                 <v-header :style="{ background: '#fff', padding: 0 }">
  15.                 </v-header>
  16.                 <v-content :style="{ padding: '0 50px' }">
  17.                     <v-breadcrumb :style="{ margin: '12px 0' }">
  18.                         <v-breadcrumb-item>Home</v-breadcrumb-item>
  19.                         <v-breadcrumb-item href="">List</v-breadcrumb-item>
  20.                         <v-breadcrumb-item href="">App</v-breadcrumb-item>
  21.                     </v-breadcrumb>
  22.                     <div style="padding: 24px; background: #fff; min-height: 360px;">Content</div>
  23.                 </v-content>
  24.                 <v-footer :style="{ textAlign: 'center' }">
  25.                     Ant Design ©2016 Created by Ant UED
  26.                 </v-footer>
  27.             </v-layout>
  28.         </v-layout>
  29.     </div>
  30. </template>
  32. <style>
  33.     #components-layout-demo-responsive .trigger {
  34.         font-size: 18px;
  35.         line-height: 64px;
  36.         padding: 0 16px;
  37.         cursor: pointer;
  38.         transition: color .3s;
  39.     }
  40.     #components-layout-demo-responsive .trigger:hover {
  41.         color: #108ee9;
  42.     }
  43.     #components-layout-demo-responsive .logo {
  44.         height: 32px;
  45.         background: #333;
  46.         border-radius: 6px;
  47.         margin: 16px;
  48.     }
  49.     #components-layout-demo-responsive .ant-layout-sider-collapsed .anticon {
  50.         font-size: 16px;
  51.     }
  52.     #components-layout-demo-responsive .ant-layout-sider-collapsed .nav-text {
  53.         display: none;
  54.     }
  55. </style>
  57. <script>
  58.     export default {
  59.         data() {
  60.             return {
  61.                 menuData5: [{
  62.                     name: 'nav 1',
  63.                     icon: 'user',
  64.                     selected: true
  65.                 },{
  66.                     name: 'nav 2',
  67.                     icon: 'video-camera'
  68.                 },{
  69.                     name: 'nav 3',
  70.                     icon: 'upload'
  71.                 }]
  72.             }
  73.         }
  74.     }
  75. </script>

固定头部

一般用于固定顶部导航，方便页面切换。

  1. <template>
  2.     <div class="browser-mockup with-url">
  3.         <iframe class="browser-content" src="./#/demo/layout-fixed" frameborder="0"></iframe>
  4.     </div>
  5. </template>
  7. <style>
  8.     #components-layout-demo-fixed .logo {
  9.         width: 120px;
  10.         height: 31px;
  11.         background: #333;
  12.         border-radius: 6px;
  13.         margin: 16px 24px 16px 0;
  14.         float: left;
  15.     }
  16. </style>
  17. <script>
  18.     export default {
  19.         data() {
  20.             return {
  21.                 menuData6: [{
  22.                     name: 'nav 1'
  23.                 },{
  24.                     name: 'nav 2',
  25.                     selected: true
  26.                 },{
  27.                     name: 'nav 3'
  28.                 }]
  29.             }
  30.         }
  31.     }
  32. </script>

固定侧边栏

当内容较长时，使用固定侧边栏可以提供更好的体验。

  1. <template>
  2.     <div class="browser-mockup with-url">
  3.         <iframe class="browser-content" src="./#/demo/layout-fixed-sider" frameborder="0"></iframe>
  4.     </div>
  5. </template>
  7. <style>
  8.     #components-layout-demo-fixed-sider .logo {
  9.         height: 32px;
  10.         background: #333;
  11.         border-radius: 6px;
  12.         margin: 16px;
  13.     }
  14. </style>
  15. <script>
  16.     export default {
  17.         data() {
  18.             return {
  19.                 menuData7: [{
  20.                     name: 'nav 1',
  21.                     icon: 'user',
  22.                 }, {
  23.                     name: 'nav 2',
  24.                     icon: 'video-camera',
  25.                 }, {
  26.                     name: 'nav 3',
  27.                     icon: 'upload',
  28.                 }, {
  29.                     name: 'nav 4',
  30.                     icon: 'bar-chart',
  31.                     selected: true,
  32.                 }, {
  33.                     name: 'nav 5',
  34.                     icon: 'cloud-o',
  35.                 }, {
  36.                     name: 'nav 6',
  37.                     icon: 'appstore-o',
  38.                 }, {
  39.                     name: 'nav 7',
  40.                     icon: 'team',
  41.                 }, {
  42.                     name: 'nav 8',
  43.                     icon: 'shop',
  44.                 }]
  45.             }
  46.         }
  47.     }
  48. </script>

API

Sider Props

成员说明类型默认值
collapsed当前收起状态，可用v-modelBooleanfalse
collapsible是否可收起Booleanfalse
trigger是否显示trigger，collapsible 为 true 时有效，设置为 false 时隐藏 triggerBoolean-
width宽度Number200
collapsedWidth收缩宽度，仅当 collapsed: true 时生效Number64
breakpoint触发响应式布局的断点Enum { 'xs', 'sm', 'md', 'lg', 'xl' }-

Sider Events

事件说明回调参数
collapse展开-收起时触发collapsed，当前收起状态