|
|
<docs>
|
|
|
---
|
|
|
order: 8
|
|
|
iframe: 360
|
|
|
title:
|
|
|
zh-CN: 固定头部
|
|
|
en-US: Fixed Header
|
|
|
---
|
|
|
|
|
|
## zh-CN
|
|
|
|
|
|
一般用于固定顶部导航，方便页面切换。
|
|
|
|
|
|
## en-US
|
|
|
|
|
|
Fixed Header is generally used to fix the top navigation to facilitate page switching.
|
|
|
|
|
|
</docs>
|
|
|
<template>
|
|
|
<a-layout>
|
|
|
<a-layout-header :style="{ position: 'fixed', zIndex: 1, width: '100%' }">
|
|
|
<div class="logo" />
|
|
|
<a-menu
|
|
|
v-model:selectedKeys="selectedKeys"
|
|
|
theme="dark"
|
|
|
mode="horizontal"
|
|
|
:style="{ lineHeight: '64px' }"
|
|
|
>
|
|
|
<a-menu-item key="1">nav 1</a-menu-item>
|
|
|
<a-menu-item key="2">nav 2</a-menu-item>
|
|
|
<a-menu-item key="3">nav 3</a-menu-item>
|
|
|
</a-menu>
|
|
|
</a-layout-header>
|
|
|
<a-layout-content :style="{ padding: '0 50px', marginTop: '64px' }">
|
|
|
<a-breadcrumb :style="{ margin: '16px 0' }">
|
|
|
<a-breadcrumb-item>Home</a-breadcrumb-item>
|
|
|
<a-breadcrumb-item>List</a-breadcrumb-item>
|
|
|
<a-breadcrumb-item>App</a-breadcrumb-item>
|
|
|
</a-breadcrumb>
|
|
|
<div :style="{ background: '#fff', padding: '24px', minHeight: '380px' }">Content</div>
|
|
|
</a-layout-content>
|
|
|
<a-layout-footer :style="{ textAlign: 'center' }">
|
|
|
Ant Design ©2018 Created by Ant UED
|
|
|
</a-layout-footer>
|
|
|
</a-layout>
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
import { defineComponent, ref } from 'vue';
|
|
|
export default defineComponent({
|
|
|
setup() {
|
|
|
return {
|
|
|
selectedKeys: ref<string[]>(['2']),
|
|
|
};
|
|
|
},
|
|
|
});
|
|
|
</script>
|
|
|
<style>
|
|
|
#components-layout-demo-fixed .logo {
|
|
|
width: 120px;
|
|
|
height: 31px;
|
|
|
background: rgba(255, 255, 255, 0.2);
|
|
|
margin: 16px 24px 16px 0;
|
|
|
float: left;
|
|
|
}
|
|
|
.site-layout .site-layout-background {
|
|
|
background: #fff;
|
|
|
}
|
|
|
|
|
|
[data-theme='dark'] .site-layout .site-layout-background {
|
|
|
background: #141414;
|
|
|
}
|
|
|
</style>
|
