vuecssuiant-designantdreactantantd-vueenterprisefrontendui-designvue-antdvue-antd-uivue3vuecomponent
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.7 KiB
66 lines
1.7 KiB
<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" setup> |
|
import { ref } from 'vue'; |
|
const selectedKeys = ref<string[]>(['2']); |
|
</script> |
|
<style scoped> |
|
#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>
|
|
|