73 lines
1.8 KiB
Vue
73 lines
1.8 KiB
Vue
<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>
|