|
|
<docs>
|
|
|
---
|
|
|
order: 6
|
|
|
title:
|
|
|
zh-CN: 响应式布局
|
|
|
en-US: Responsive
|
|
|
---
|
|
|
|
|
|
## zh-CN
|
|
|
|
|
|
Layout.Sider 支持响应式布局。
|
|
|
> 说明：配置 `breakpoint` 属性即生效，视窗宽度小于 `breakpoint` 时 Sider 缩小为 `collapsedWidth` 宽度，若将 `collapsedWidth` 设置为零，会出现特殊 trigger。
|
|
|
|
|
|
## en-US
|
|
|
|
|
|
Layout.Sider supports responsive layout.
|
|
|
> 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`.
|
|
|
|
|
|
</docs>
|
|
|
<template>
|
|
|
<a-layout>
|
|
|
<a-layout-sider
|
|
|
breakpoint="lg"
|
|
|
collapsed-width="0"
|
|
|
@collapse="onCollapse"
|
|
|
@breakpoint="onBreakpoint"
|
|
|
>
|
|
|
<div class="logo" />
|
|
|
<a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
|
|
|
<a-menu-item key="1">
|
|
|
<user-outlined />
|
|
|
<span class="nav-text">nav 1</span>
|
|
|
</a-menu-item>
|
|
|
<a-menu-item key="2">
|
|
|
<video-camera-outlined />
|
|
|
<span class="nav-text">nav 2</span>
|
|
|
</a-menu-item>
|
|
|
<a-menu-item key="3">
|
|
|
<upload-outlined />
|
|
|
<span class="nav-text">nav 3</span>
|
|
|
</a-menu-item>
|
|
|
<a-menu-item key="4">
|
|
|
<user-outlined />
|
|
|
<span class="nav-text">nav 4</span>
|
|
|
</a-menu-item>
|
|
|
</a-menu>
|
|
|
</a-layout-sider>
|
|
|
<a-layout>
|
|
|
<a-layout-header :style="{ background: '#fff', padding: 0 }" />
|
|
|
<a-layout-content :style="{ margin: '24px 16px 0' }">
|
|
|
<div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">content</div>
|
|
|
</a-layout-content>
|
|
|
<a-layout-footer style="text-align: center">
|
|
|
Ant Design ©2018 Created by Ant UED
|
|
|
</a-layout-footer>
|
|
|
</a-layout>
|
|
|
</a-layout>
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
import { UserOutlined, VideoCameraOutlined, UploadOutlined } from '@ant-design/icons-vue';
|
|
|
import { defineComponent, ref } from 'vue';
|
|
|
export default defineComponent({
|
|
|
components: {
|
|
|
UserOutlined,
|
|
|
VideoCameraOutlined,
|
|
|
UploadOutlined,
|
|
|
},
|
|
|
setup() {
|
|
|
const onCollapse = (collapsed: boolean, type: string) => {
|
|
|
console.log(collapsed, type);
|
|
|
};
|
|
|
|
|
|
const onBreakpoint = (broken: boolean) => {
|
|
|
console.log(broken);
|
|
|
};
|
|
|
|
|
|
return {
|
|
|
selectedKeys: ref<string[]>(['4']),
|
|
|
onCollapse,
|
|
|
onBreakpoint,
|
|
|
};
|
|
|
},
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
#components-layout-demo-responsive .logo {
|
|
|
height: 32px;
|
|
|
background: rgba(255, 255, 255, 0.2);
|
|
|
margin: 16px;
|
|
|
}
|
|
|
|
|
|
.site-layout-sub-header-background {
|
|
|
background: #fff;
|
|
|
}
|
|
|
|
|
|
.site-layout-background {
|
|
|
background: #fff;
|
|
|
}
|
|
|
|
|
|
[data-theme='dark'] .site-layout-sub-header-background {
|
|
|
background: #141414;
|
|
|
}
|
|
|
</style>
|
