mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-30 20:38:45 +08:00
a67d39cd6c
* 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
1.6 KiB
1.6 KiB
| order | iframe | title | ||||
|---|---|---|---|---|---|---|
| 6 | 360 |
|
zh-CN
一般用于固定顶部导航，方便页面切换。
en-US
Fixed Header is generally used to fix the top navigation to facilitate page switching.
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,
);
#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;
}