Tu View PlusLayout 布局
页面的基础布局框架，常与组件嵌套使用，构建页面整体布局。
基础用法
典型的页面布局。
<template>
<div class="layout-demo">
<tu-layout style="height: 300px">
<tu-layout-header></tu-layout-header>
<tu-layout-content></tu-layout-content>
<tu-layout-footer></tu-layout-footer>
</tu-layout>
<br />
<tu-layout style="height: 300px">
<tu-layout-header></tu-layout-header>
<tu-layout>
<tu-layout-sider></tu-layout-sider>
<tu-layout-content></tu-layout-content>
</tu-layout>
<tu-layout-footer></tu-layout-footer>
</tu-layout>
<br />
<tu-layout style="height: 300px">
<tu-layout-header></tu-layout-header>
<tu-layout>
<tu-layout-content></tu-layout-content>
<tu-layout-sider></tu-layout-sider>
</tu-layout>
<tu-layout-footer></tu-layout-footer>
</tu-layout>
<br />
<tu-layout style="height: 300px">
<tu-layout-sider :width="120"></tu-layout-sider>
<tu-layout>
<tu-layout-header></tu-layout-header>
<tu-layout-content></tu-layout-content>
<tu-layout-footer></tu-layout-footer>
</tu-layout>
</tu-layout>
</div>
</template>
<style scoped lang="scss">
.layout-demo :deep(.tu-layout__header),
.layout-demo :deep(.tu-layout__footer),
.layout-demo :deep(.tu-layout__sider-children),
.layout-demo :deep(.tu-layout__content) {
display: flex;
flex-direction: column;
justify-content: center;
font-stretch: condensed;
text-align: center;
font-size: 14px;
color: #71757f;
}
.layout-demo :deep(.tu-layout__header),
.layout-demo :deep(.tu-layout__footer) {
height: 54px;
background-color: rgba(128, 128, 128, 0.2);
}
.layout-demo :deep(.tu-layout__sider) {
background-color: rgba(128, 128, 128, 0.1);
}
.layout-demo :deep(.tu-layout__content) {
background-color: rgba(128, 128, 128, 0.16);
}
</style><template>
<div class="layout-demo">
<tu-layout style="height: 300px">
<tu-layout-header></tu-layout-header>
<tu-layout-content></tu-layout-content>
<tu-layout-footer></tu-layout-footer>
</tu-layout>
<br />
<tu-layout style="height: 300px">
<tu-layout-header></tu-layout-header>
<tu-layout>
<tu-layout-sider></tu-layout-sider>
<tu-layout-content></tu-layout-content>
</tu-layout>
<tu-layout-footer></tu-layout-footer>
</tu-layout>
<br />
<tu-layout style="height: 300px">
<tu-layout-header></tu-layout-header>
<tu-layout>
<tu-layout-content></tu-layout-content>
<tu-layout-sider></tu-layout-sider>
</tu-layout>
<tu-layout-footer></tu-layout-footer>
</tu-layout>
<br />
<tu-layout style="height: 300px">
<tu-layout-sider :width="120"></tu-layout-sider>
<tu-layout>
<tu-layout-header></tu-layout-header>
<tu-layout-content></tu-layout-content>
<tu-layout-footer></tu-layout-footer>
</tu-layout>
</tu-layout>
</div>
</template>
<style scoped lang="scss">
.layout-demo :deep(.tu-layout__header),
.layout-demo :deep(.tu-layout__footer),
.layout-demo :deep(.tu-layout__sider-children),
.layout-demo :deep(.tu-layout__content) {
display: flex;
flex-direction: column;
justify-content: center;
font-stretch: condensed;
text-align: center;
font-size: 14px;
color: #71757f;
}
.layout-demo :deep(.tu-layout__header),
.layout-demo :deep(.tu-layout__footer) {
height: 54px;
background-color: rgba(128, 128, 128, 0.2);
}
.layout-demo :deep(.tu-layout__sider) {
background-color: rgba(128, 128, 128, 0.1);
}
.layout-demo :deep(.tu-layout__content) {
background-color: rgba(128, 128, 128, 0.16);
}
</style>自定义按钮
通过设置 Menu.Sider 的 trigger 属性，实现自定义收起按钮的图标。
导航一
导航二
导航三
选项一
选项二
导航四
主页
/
频道
/
新闻
<template>
<tu-layout class="layout-demo">
<tu-layout-sider collapsible breakpoint="xl" :width="160">
<tu-menu
style="width: 160px"
effect="default"
:default-selected-keys="['1']"
>
<tu-menu-item key="1">
<template #icon>
<tu-icon>
<Menu />
</tu-icon>
</template>
导航一
</tu-menu-item>
<tu-menu-item key="2">
<template #icon>
<tu-icon>
<Tools />
</tu-icon>
</template>
导航二
</tu-menu-item>
<tu-sub-menu key="3" title="导航三">
<template #icon>
<tu-icon>
<UploadFilled />
</tu-icon>
</template>
<tu-menu-item key="3-1">选项一</tu-menu-item>
<tu-menu-item key="3-2">选项二</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">
<template #icon>
<tu-icon>
<Promotion />
</tu-icon>
</template>
导航四
</tu-menu-item>
</tu-menu>
<template #trigger="{ collapsed }">
<tu-icon v-if="collapsed"><CaretRight /></tu-icon>
<tu-icon v-else><CaretLeft /></tu-icon>
</template>
</tu-layout-sider>
<tu-layout>
<tu-layout-header style="padding-left: 20px"></tu-layout-header>
<tu-layout style="padding: 0 12px">
<tu-breadcrumb :style="{ margin: '16px 0' }">
<tu-breadcrumb-item>主页</tu-breadcrumb-item>
<tu-breadcrumb-item>频道</tu-breadcrumb-item>
<tu-breadcrumb-item>新闻</tu-breadcrumb-item>
</tu-breadcrumb>
<tu-layout-content></tu-layout-content>
</tu-layout>
</tu-layout>
</tu-layout>
</template>
<script lang="ts" setup>
import {
CaretLeft,
CaretRight,
Menu,
Tools,
UploadFilled,
Promotion
} from '@tu-view-plus/icons-vue';
</script>
<style scoped lang="scss">
.layout-demo {
height: 400px;
color: #71757f;
font-size: 14px;
box-shadow: 3px 3px 6px var(--tu-color-shadow-dark, #babbc0),
-2px -2px 5px var(--tu-color-shadow-light, #ffffff);
}
.layout-demo :deep(.tu-layout__header),
.layout-demo :deep(.tu-layout__footer),
.layout-demo :deep(.tu-layout__content) {
display: flex;
flex-direction: column;
justify-content: center;
font-stretch: condensed;
text-align: center;
font-size: 14px;
color: #71757f;
}
.layout-demo :deep(.tu-layout__sider) {
border-right: 1px solid rgba(128, 128, 128, 0.18);
}
.layout-demo :deep(.tu-layout__header) {
height: 54px;
border-bottom: 1px solid rgba(128, 128, 128, 0.18);
}
</style><template>
<tu-layout class="layout-demo">
<tu-layout-sider collapsible breakpoint="xl" :width="160">
<tu-menu
style="width: 160px"
effect="default"
:default-selected-keys="['1']"
>
<tu-menu-item key="1">
<template #icon>
<tu-icon>
<Menu />
</tu-icon>
</template>
导航一
</tu-menu-item>
<tu-menu-item key="2">
<template #icon>
<tu-icon>
<Tools />
</tu-icon>
</template>
导航二
</tu-menu-item>
<tu-sub-menu key="3" title="导航三">
<template #icon>
<tu-icon>
<UploadFilled />
</tu-icon>
</template>
<tu-menu-item key="3-1">选项一</tu-menu-item>
<tu-menu-item key="3-2">选项二</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">
<template #icon>
<tu-icon>
<Promotion />
</tu-icon>
</template>
导航四
</tu-menu-item>
</tu-menu>
<template #trigger="{ collapsed }">
<tu-icon v-if="collapsed"><CaretRight /></tu-icon>
<tu-icon v-else><CaretLeft /></tu-icon>
</template>
</tu-layout-sider>
<tu-layout>
<tu-layout-header style="padding-left: 20px"></tu-layout-header>
<tu-layout style="padding: 0 12px">
<tu-breadcrumb :style="{ margin: '16px 0' }">
<tu-breadcrumb-item>主页</tu-breadcrumb-item>
<tu-breadcrumb-item>频道</tu-breadcrumb-item>
<tu-breadcrumb-item>新闻</tu-breadcrumb-item>
</tu-breadcrumb>
<tu-layout-content></tu-layout-content>
</tu-layout>
</tu-layout>
</tu-layout>
</template>
<script lang="ts" setup>
import {
CaretLeft,
CaretRight,
Menu,
Tools,
UploadFilled,
Promotion
} from '@tu-view-plus/icons-vue';
</script>
<style scoped lang="scss">
.layout-demo {
height: 400px;
color: #71757f;
font-size: 14px;
box-shadow: 3px 3px 6px var(--tu-color-shadow-dark, #babbc0),
-2px -2px 5px var(--tu-color-shadow-light, #ffffff);
}
.layout-demo :deep(.tu-layout__header),
.layout-demo :deep(.tu-layout__footer),
.layout-demo :deep(.tu-layout__content) {
display: flex;
flex-direction: column;
justify-content: center;
font-stretch: condensed;
text-align: center;
font-size: 14px;
color: #71757f;
}
.layout-demo :deep(.tu-layout__sider) {
border-right: 1px solid rgba(128, 128, 128, 0.18);
}
.layout-demo :deep(.tu-layout__header) {
height: 54px;
border-bottom: 1px solid rgba(128, 128, 128, 0.18);
}
</style>自定义收起按钮
设置 Menu.Sider 的hide-trigger属性为true后，Sider 内置的缩起按钮不会显示。此时可自定义收起按钮。
导航一
导航二
导航三
选项一
选项二
导航四
主页
/
频道
/
新闻
<template>
<tu-layout class="layout-demo">
<tu-layout-sider
hide-trigger
collapsible
breakpoint="xl"
:width="160"
:collapsed="collapsed"
>
<tu-menu
style="width: 160px"
effect="default"
:default-selected-keys="['1']"
>
<tu-menu-item key="1">
<template #icon>
<tu-icon>
<Menu />
</tu-icon>
</template>
导航一
</tu-menu-item>
<tu-menu-item key="2">
<template #icon>
<tu-icon>
<Tools />
</tu-icon>
</template>
导航二
</tu-menu-item>
<tu-sub-menu key="3" title="导航三">
<template #icon>
<tu-icon>
<UploadFilled />
</tu-icon>
</template>
<tu-menu-item key="3-1">选项一</tu-menu-item>
<tu-menu-item key="3-2">选项二</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">
<template #icon>
<tu-icon>
<Promotion />
</tu-icon>
</template>
导航四
</tu-menu-item>
</tu-menu>
</tu-layout-sider>
<tu-layout>
<tu-layout-header style="padding-left: 20px">
<tu-button size="small" @click="collapsed = !collapsed">
<tu-icon v-if="collapsed"><CaretRight /></tu-icon>
<tu-icon v-else><CaretLeft /></tu-icon>
</tu-button>
</tu-layout-header>
<tu-layout style="padding: 0 12px">
<tu-breadcrumb :style="{ margin: '16px 0' }">
<tu-breadcrumb-item>主页</tu-breadcrumb-item>
<tu-breadcrumb-item>频道</tu-breadcrumb-item>
<tu-breadcrumb-item>新闻</tu-breadcrumb-item>
</tu-breadcrumb>
<tu-layout-content></tu-layout-content>
</tu-layout>
</tu-layout>
</tu-layout>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import {
CaretLeft,
CaretRight,
Menu,
Tools,
UploadFilled,
Promotion
} from '@tu-view-plus/icons-vue';
const collapsed = ref(false);
</script>
<style scoped lang="scss">
.layout-demo {
height: 400px;
color: #71757f;
font-size: 14px;
box-shadow: 3px 3px 6px var(--tu-color-shadow-dark, #babbc0),
-2px -2px 5px var(--tu-color-shadow-light, #ffffff);
}
.layout-demo :deep(.tu-layout__footer),
.layout-demo :deep(.tu-layout__content) {
display: flex;
flex-direction: column;
justify-content: center;
font-stretch: condensed;
text-align: center;
font-size: 14px;
color: #71757f;
}
.layout-demo :deep(.tu-layout__sider) {
border-right: 1px solid rgba(128, 128, 128, 0.18);
}
.layout-demo :deep(.tu-layout__header) {
height: 54px;
line-height: 54px;
border-bottom: 1px solid rgba(128, 128, 128, 0.18);
}
</style><template>
<tu-layout class="layout-demo">
<tu-layout-sider
hide-trigger
collapsible
breakpoint="xl"
:width="160"
:collapsed="collapsed"
>
<tu-menu
style="width: 160px"
effect="default"
:default-selected-keys="['1']"
>
<tu-menu-item key="1">
<template #icon>
<tu-icon>
<Menu />
</tu-icon>
</template>
导航一
</tu-menu-item>
<tu-menu-item key="2">
<template #icon>
<tu-icon>
<Tools />
</tu-icon>
</template>
导航二
</tu-menu-item>
<tu-sub-menu key="3" title="导航三">
<template #icon>
<tu-icon>
<UploadFilled />
</tu-icon>
</template>
<tu-menu-item key="3-1">选项一</tu-menu-item>
<tu-menu-item key="3-2">选项二</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">
<template #icon>
<tu-icon>
<Promotion />
</tu-icon>
</template>
导航四
</tu-menu-item>
</tu-menu>
</tu-layout-sider>
<tu-layout>
<tu-layout-header style="padding-left: 20px">
<tu-button size="small" @click="collapsed = !collapsed">
<tu-icon v-if="collapsed"><CaretRight /></tu-icon>
<tu-icon v-else><CaretLeft /></tu-icon>
</tu-button>
</tu-layout-header>
<tu-layout style="padding: 0 12px">
<tu-breadcrumb :style="{ margin: '16px 0' }">
<tu-breadcrumb-item>主页</tu-breadcrumb-item>
<tu-breadcrumb-item>频道</tu-breadcrumb-item>
<tu-breadcrumb-item>新闻</tu-breadcrumb-item>
</tu-breadcrumb>
<tu-layout-content></tu-layout-content>
</tu-layout>
</tu-layout>
</tu-layout>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import {
CaretLeft,
CaretRight,
Menu,
Tools,
UploadFilled,
Promotion
} from '@tu-view-plus/icons-vue';
const collapsed = ref(false);
</script>
<style scoped lang="scss">
.layout-demo {
height: 400px;
color: #71757f;
font-size: 14px;
box-shadow: 3px 3px 6px var(--tu-color-shadow-dark, #babbc0),
-2px -2px 5px var(--tu-color-shadow-light, #ffffff);
}
.layout-demo :deep(.tu-layout__footer),
.layout-demo :deep(.tu-layout__content) {
display: flex;
flex-direction: column;
justify-content: center;
font-stretch: condensed;
text-align: center;
font-size: 14px;
color: #71757f;
}
.layout-demo :deep(.tu-layout__sider) {
border-right: 1px solid rgba(128, 128, 128, 0.18);
}
.layout-demo :deep(.tu-layout__header) {
height: 54px;
line-height: 54px;
border-bottom: 1px solid rgba(128, 128, 128, 0.18);
}
</style>响应式侧边栏
左侧 Slider 可以结合 Menu 设置为展开/收起状态, 设置breakpoint可触发响应式收缩。
导航一
导航二
导航三
选项一
选项二
导航四
...
导航一
导航二
导航三
导航四
主页
/
频道
/
新闻
<template>
<tu-layout class="layout-demo">
<tu-layout-sider collapsible breakpoint="xl" :width="160">
<tu-menu
style="width: 160px"
effect="default"
:default-selected-keys="['1']"
>
<tu-menu-item key="1">
<template #icon>
<tu-icon>
<Menu />
</tu-icon>
</template>
导航一
</tu-menu-item>
<tu-menu-item key="2">
<template #icon>
<tu-icon>
<Tools />
</tu-icon>
</template>
导航二
</tu-menu-item>
<tu-sub-menu key="3" title="导航三">
<template #icon>
<tu-icon>
<UploadFilled />
</tu-icon>
</template>
<tu-menu-item key="3-1">选项一</tu-menu-item>
<tu-menu-item key="3-2">选项二</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">
<template #icon>
<tu-icon>
<Promotion />
</tu-icon>
</template>
导航四
</tu-menu-item>
</tu-menu>
<template #trigger="{ collapsed }">
<tu-icon v-if="collapsed"><CaretRight /></tu-icon>
<tu-icon v-else><CaretLeft /></tu-icon>
</template>
</tu-layout-sider>
<tu-layout>
<tu-layout-header>
<tu-menu
mode="horizontal"
effect="default"
:default-selected-keys="['1']"
>
<tu-menu-item key="1">导航一</tu-menu-item>
<tu-menu-item key="2">导航二</tu-menu-item>
<tu-sub-menu key="3" title="导航三">
<tu-menu-item key="3-1">选项一</tu-menu-item>
<tu-menu-item key="3-2">选项二</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">导航四</tu-menu-item>
</tu-menu>
</tu-layout-header>
<tu-layout style="padding: 0 12px">
<tu-breadcrumb :style="{ margin: '16px 0' }">
<tu-breadcrumb-item>主页</tu-breadcrumb-item>
<tu-breadcrumb-item>频道</tu-breadcrumb-item>
<tu-breadcrumb-item>新闻</tu-breadcrumb-item>
</tu-breadcrumb>
<tu-layout-content></tu-layout-content>
</tu-layout>
</tu-layout>
</tu-layout>
</template>
<script lang="ts" setup>
import {
CaretLeft,
CaretRight,
Menu,
Tools,
UploadFilled,
Promotion
} from '@tu-view-plus/icons-vue';
</script>
<style scoped lang="scss">
.layout-demo {
height: 400px;
color: #71757f;
font-size: 14px;
box-shadow: 3px 3px 6px var(--tu-color-shadow-dark, #babbc0),
-2px -2px 5px var(--tu-color-shadow-light, #ffffff);
}
.layout-demo :deep(.tu-layout__footer),
.layout-demo :deep(.tu-layout__content) {
display: flex;
flex-direction: column;
justify-content: center;
font-stretch: condensed;
text-align: center;
font-size: 14px;
color: #71757f;
}
.layout-demo :deep(.tu-layout__sider) {
border-right: 1px solid rgba(128, 128, 128, 0.18);
}
.layout-demo :deep(.tu-layout__header) {
height: 54px;
line-height: 54px;
border-bottom: 1px solid rgba(128, 128, 128, 0.18);
}
</style><template>
<tu-layout class="layout-demo">
<tu-layout-sider collapsible breakpoint="xl" :width="160">
<tu-menu
style="width: 160px"
effect="default"
:default-selected-keys="['1']"
>
<tu-menu-item key="1">
<template #icon>
<tu-icon>
<Menu />
</tu-icon>
</template>
导航一
</tu-menu-item>
<tu-menu-item key="2">
<template #icon>
<tu-icon>
<Tools />
</tu-icon>
</template>
导航二
</tu-menu-item>
<tu-sub-menu key="3" title="导航三">
<template #icon>
<tu-icon>
<UploadFilled />
</tu-icon>
</template>
<tu-menu-item key="3-1">选项一</tu-menu-item>
<tu-menu-item key="3-2">选项二</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">
<template #icon>
<tu-icon>
<Promotion />
</tu-icon>
</template>
导航四
</tu-menu-item>
</tu-menu>
<template #trigger="{ collapsed }">
<tu-icon v-if="collapsed"><CaretRight /></tu-icon>
<tu-icon v-else><CaretLeft /></tu-icon>
</template>
</tu-layout-sider>
<tu-layout>
<tu-layout-header>
<tu-menu
mode="horizontal"
effect="default"
:default-selected-keys="['1']"
>
<tu-menu-item key="1">导航一</tu-menu-item>
<tu-menu-item key="2">导航二</tu-menu-item>
<tu-sub-menu key="3" title="导航三">
<tu-menu-item key="3-1">选项一</tu-menu-item>
<tu-menu-item key="3-2">选项二</tu-menu-item>
</tu-sub-menu>
<tu-menu-item key="4">导航四</tu-menu-item>
</tu-menu>
</tu-layout-header>
<tu-layout style="padding: 0 12px">
<tu-breadcrumb :style="{ margin: '16px 0' }">
<tu-breadcrumb-item>主页</tu-breadcrumb-item>
<tu-breadcrumb-item>频道</tu-breadcrumb-item>
<tu-breadcrumb-item>新闻</tu-breadcrumb-item>
</tu-breadcrumb>
<tu-layout-content></tu-layout-content>
</tu-layout>
</tu-layout>
</tu-layout>
</template>
<script lang="ts" setup>
import {
CaretLeft,
CaretRight,
Menu,
Tools,
UploadFilled,
Promotion
} from '@tu-view-plus/icons-vue';
</script>
<style scoped lang="scss">
.layout-demo {
height: 400px;
color: #71757f;
font-size: 14px;
box-shadow: 3px 3px 6px var(--tu-color-shadow-dark, #babbc0),
-2px -2px 5px var(--tu-color-shadow-light, #ffffff);
}
.layout-demo :deep(.tu-layout__footer),
.layout-demo :deep(.tu-layout__content) {
display: flex;
flex-direction: column;
justify-content: center;
font-stretch: condensed;
text-align: center;
font-size: 14px;
color: #71757f;
}
.layout-demo :deep(.tu-layout__sider) {
border-right: 1px solid rgba(128, 128, 128, 0.18);
}
.layout-demo :deep(.tu-layout__header) {
height: 54px;
line-height: 54px;
border-bottom: 1px solid rgba(128, 128, 128, 0.18);
}
</style>可伸缩侧边栏
可以用鼠标进行拖拽放大缩小的侧边栏，需要用到的参数：resizeDirections。
<template>
<div class="layout-demo">
<tu-layout style="height: 300px">
<tu-layout-header></tu-layout-header>
<tu-layout>
<tu-layout-sider :resize-directions="['right']"></tu-layout-sider>
<tu-layout-content></tu-layout-content>
</tu-layout>
<tu-layout-footer></tu-layout-footer>
</tu-layout>
</div>
</template>
<style scoped lang="scss">
.layout-demo :deep(.tu-layout__header),
.layout-demo :deep(.tu-layout__footer),
.layout-demo :deep(.tu-layout__sider-children),
.layout-demo :deep(.tu-layout__content) {
display: flex;
flex-direction: column;
justify-content: center;
font-stretch: condensed;
text-align: center;
font-size: 14px;
color: #71757f;
}
.layout-demo :deep(.tu-layout__header),
.layout-demo :deep(.tu-layout__footer) {
height: 54px;
background-color: rgba(128, 128, 128, 0.2);
}
.layout-demo :deep(.tu-layout__sider) {
background-color: rgba(128, 128, 128, 0.1);
}
.layout-demo :deep(.tu-layout__content) {
background-color: rgba(128, 128, 128, 0.16);
}
</style><template>
<div class="layout-demo">
<tu-layout style="height: 300px">
<tu-layout-header></tu-layout-header>
<tu-layout>
<tu-layout-sider :resize-directions="['right']"></tu-layout-sider>
<tu-layout-content></tu-layout-content>
</tu-layout>
<tu-layout-footer></tu-layout-footer>
</tu-layout>
</div>
</template>
<style scoped lang="scss">
.layout-demo :deep(.tu-layout__header),
.layout-demo :deep(.tu-layout__footer),
.layout-demo :deep(.tu-layout__sider-children),
.layout-demo :deep(.tu-layout__content) {
display: flex;
flex-direction: column;
justify-content: center;
font-stretch: condensed;
text-align: center;
font-size: 14px;
color: #71757f;
}
.layout-demo :deep(.tu-layout__header),
.layout-demo :deep(.tu-layout__footer) {
height: 54px;
background-color: rgba(128, 128, 128, 0.2);
}
.layout-demo :deep(.tu-layout__sider) {
background-color: rgba(128, 128, 128, 0.1);
}
.layout-demo :deep(.tu-layout__content) {
background-color: rgba(128, 128, 128, 0.16);
}
</style>Layout API
Layout Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| has-sider | 表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动 | Boolean | false |
Layout-Header Slots
| 参数名 | 描述 |
|---|---|
| default | 内容 |
Layout-Content Slots
| 参数名 | 描述 |
|---|---|
| default | 内容 |
Layout-Footer Slots
| 参数名 | 描述 |
|---|---|
| default | 内容 |
Layout-Sider Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| theme | 主题颜色 | String | light |
| collapsed | 当前收起状态 | Boolean | - |
| default-collapsed | 默认的收起状态 | Boolean | false |
| collapsible | 是否可收起 | Boolean | false |
| width | 宽度 | Boolean | 200 |
| collapsed-width | 收缩宽度 | Boolean | 48 |
| reverse-arrow | 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用 | Boolean | false |
| breakpoint | 触发响应式布局的断点 | String | - |
| resize-directions | 可以用 ResizeBox 替换原生的 aside 标签，这个参数即 ResizeBox的 directions 参数。 | Array | - |
| hide-trigger | 隐藏底部折叠触发器 | Boolean | false |
Layout-Sider Events
| 事件名 | 描述 | 参数 |
|---|---|---|
| collapse | 展开-收起时的事件，有点击 trigger 以及响应式反馈两种方式可以触发 | Function |
| breakpoint | 触发响应式布局断点时的事件 | Function |
Layout-Sider Slots
| 参数名 | 描述 |
|---|---|
| trigger | 自定义底部折叠触发器 |