Browse Source

add fixed sider

pull/5660/head
乐仪 8 years ago
parent
commit
69f7cf0c55
  1. 92
      components/layout/demo/fixed-sider.md

92
components/layout/demo/fixed-sider.md

@ -0,0 +1,92 @@
---
order: 7
iframe: 360
title:
zh-CN: 固定侧边栏
en-US: Fixed Sider
---
## zh-CN
当内容较长时,使用固定侧边栏可以提供更好的体验。
## en-US
In dealing with long content, a fixed sider can provide a better user experience.
````jsx
import { Layout, Menu, Icon } from 'antd';
const { Header, Content, Footer, Sider } = Layout;
ReactDOM.render(<Layout style={{ height: '100vh' }}>
<Sider style={{ overflow: 'auto' }}>
<div className="logo" />
<Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
<Menu.Item key="1">
<Icon type="user" />
<span className="nav-text">nav 1</span>
</Menu.Item>
<Menu.Item key="2">
<Icon type="video-camera" />
<span className="nav-text">nav 2</span>
</Menu.Item>
<Menu.Item key="3">
<Icon type="upload" />
<span className="nav-text">nav 3</span>
</Menu.Item>
<Menu.Item key="4">
<Icon type="bar-chart" />
<span className="nav-text">nav 4</span>
</Menu.Item>
<Menu.Item key="5">
<Icon type="cloud-o" />
<span className="nav-text">nav 5</span>
</Menu.Item>
<Menu.Item key="6">
<Icon type="appstore-o" />
<span className="nav-text">nav 6</span>
</Menu.Item>
<Menu.Item key="7">
<Icon type="team" />
<span className="nav-text">nav 7</span>
</Menu.Item>
<Menu.Item key="8">
<Icon type="shop" />
<span className="nav-text">nav 8</span>
</Menu.Item>
</Menu>
</Sider>
<Layout>
<Header style={{ background: '#fff', padding: 0 }} />
<Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
<div style={{ padding: 24, background: '#fff', textAlign: 'center' }}>
...
<br />
Really
<br />...<br />...<br />...<br />
long
<br />...<br />...<br />...<br />...<br />...<br />...
<br />...<br />...<br />...<br />...<br />...<br />...
<br />...<br />...<br />...<br />...<br />...<br />...
<br />...<br />...<br />...<br />...<br />...<br />...
<br />...<br />...<br />...<br />...<br />...<br />...
<br />...<br />...<br />...<br />...<br />...<br />...
<br />...<br />...<br />...<br />...<br />...<br />
content
</div>
</Content>
<Footer style={{ textAlign: 'center' }}>
Ant Design ©2016 Created by Ant UED
</Footer>
</Layout>
</Layout>, mountNode);
````
````css
#components-layout-demo-fixed-sider .logo {
height: 32px;
background: #333;
border-radius: 6px;
margin: 16px;
}
````
Loading…
Cancel
Save