ant-design/components/layout/demo/fixed.md
二货机器人 a67d39cd6c
feat: Menu support items ()
* docs: Update Menu cn doc

* chore: update ts def

* chore: support convert

* docs: more demo

* docs: more demo

* docs: all menu demos

* docs: dropdown demo

* docs: dropdown all demos

* docs: update demo

* test: coverage

* docs: more demo

* docs: layout demo

* docs: all demo

* chore: fix ts lint

* docs: fix doc

* docs: all docs
2022-03-18 15:20:35 +08:00

70 lines
1.6 KiB
Markdown

---
order: 6
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.
```tsx
import { Layout, Menu, Breadcrumb } from 'antd';
const { Header, Content, Footer } = Layout;
ReactDOM.render(
<Layout>
<Header style={{ position: 'fixed', zIndex: 1, width: '100%' }}>
<div className="logo" />
<Menu
theme="dark"
mode="horizontal"
defaultSelectedKeys={['2']}
items={new Array(3).fill(null).map((_, index) => ({
key: String(index + 1),
label: `nav ${index + 1}`,
}))}
/>
</Header>
<Content className="site-layout" style={{ padding: '0 50px', marginTop: 64 }}>
<Breadcrumb style={{ margin: '16px 0' }}>
<Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item>List</Breadcrumb.Item>
<Breadcrumb.Item>App</Breadcrumb.Item>
</Breadcrumb>
<div className="site-layout-background" style={{ padding: 24, minHeight: 380 }}>
Content
</div>
</Content>
<Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
</Layout>,
mountNode,
);
```
```css
#components-layout-demo-fixed .logo {
float: left;
width: 120px;
height: 31px;
margin: 16px 24px 16px 0;
background: rgba(255, 255, 255, 0.2);
}
.site-layout .site-layout-background {
background: #fff;
}
```
<style>
[data-theme="dark"] .site-layout .site-layout-background {
background: #141414;
}
</style>