mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-25 11:40:04 +08:00
dda45e4796
* feat: support narrow theme mode * chore: rename narrow to compact * chore: height part * chore: preview compact mode * chore: to make site corrected * chore: preview site * docs: 📖 document compact theme usage * docs: tweak theme doc * docs: 📖 Add description about double css bundle size * chore: preview * chore: for preview * chore: adjust pagination * chore: compact mode done! * chore: remove useless todo * chore: fix review bug * chore: fix review bug * chore: fix card margin * chore: fix review bug * chore: fix review bug * chore: improve i18n and transition * Update site/theme/static/common.less Co-Authored-By: 偏右 <afc163@gmail.com> * chore: fix button size and description padding * chore: update snapshots * chore: add compact css bundlesize limit * chore: compact dist support Co-authored-by: afc163 <afc163@gmail.com>
74 lines
2.7 KiB
Markdown
74 lines
2.7 KiB
Markdown
---
|
||
order: 1
|
||
title:
|
||
zh-CN: 上中下布局
|
||
en-US: Header-Content-Footer
|
||
---
|
||
|
||
## zh-CN
|
||
|
||
最基本的『上-中-下』布局。
|
||
|
||
一般主导航放置于页面的顶端，从左自右依次为：logo、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器影响；上下级的结构符合用户上下浏览的习惯，也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率，但在纵向空间上会有一些牺牲。此外，由于导航栏水平空间的限制，不适合那些一级导航项很多的信息结构。
|
||
|
||
## en-US
|
||
|
||
The most basic "header-content-footer" layout.
|
||
|
||
Generally, the mainnav is placed at the top of the page, and includes the logo, the first level navigation, and the secondary menu (users, settings, notifications) from left to right in it. We always put contents in a fixed size navigation (eg: `1200px`), the layout of the whole page is stable, it's not affected by viewing area.
|
||
|
||
Top-bottom structure is conform with the top-bottom viewing habit, it's a classical navigation pattern of websites. This pattern demonstrates efficiency in the main workarea, while using some vertical space. And because the horizontal space of the navigation is limited, this pattern is not suitable for cases when the first level navigation contains many elements or links
|
||
|
||
```jsx
|
||
import { Layout, Menu, Breadcrumb } from 'antd';
|
||
|
||
const { Header, Content, Footer } = Layout;
|
||
|
||
ReactDOM.render(
|
||
<Layout className="layout">
|
||
<Header>
|
||
<div className="logo" />
|
||
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
|
||
<Menu.Item key="1">nav 1</Menu.Item>
|
||
<Menu.Item key="2">nav 2</Menu.Item>
|
||
<Menu.Item key="3">nav 3</Menu.Item>
|
||
</Menu>
|
||
</Header>
|
||
<Content style={{ padding: '0 50px' }}>
|
||
<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-content">Content</div>
|
||
</Content>
|
||
<Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
|
||
</Layout>,
|
||
mountNode,
|
||
);
|
||
```
|
||
|
||
```css
|
||
.site-layout-content {
|
||
background: #fff;
|
||
padding: 24px;
|
||
min-height: 280px;
|
||
}
|
||
#components-layout-demo-top .logo {
|
||
width: 120px;
|
||
height: 31px;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
margin: 16px 24px 16px 0;
|
||
float: left;
|
||
}
|
||
```
|
||
|
||
<style>
|
||
[data-theme="dark"] .site-layout-content {
|
||
background: #141414;
|
||
}
|
||
[data-theme="dark"] #components-layout-demo-top .logo {
|
||
background: rgba(255,255,255,0.3);
|
||
}
|
||
</style>
|