mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-06 16:06:28 +08:00
Merge pull request #5660 from ddcat1115/fixed-Layout.Sider
add fixed sider
This commit is contained in:
偏右
GitHub
commit
318258d5d8
@ -297,6 +297,267 @@ exports[`renders ./components/layout/demo/fixed.md correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-layout ant-layout-has-sider"
|
||||
style="height:100vh;"
|
||||
>
|
||||
<div
|
||||
class="ant-layout-sider"
|
||||
style="overflow:auto;flex:0 0 200px;width:200px;"
|
||||
>
|
||||
<div
|
||||
class="logo"
|
||||
/>
|
||||
<ul
|
||||
aria-activedescendant=""
|
||||
class="ant-menu ant-menu-inline ant-menu-dark ant-menu-root"
|
||||
role="menu"
|
||||
tabindex="0"
|
||||
>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="ant-menu-item"
|
||||
role="menuitem"
|
||||
style="padding-left:24px;"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-user"
|
||||
/>
|
||||
<span
|
||||
class="nav-text"
|
||||
>
|
||||
nav 1
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="ant-menu-item"
|
||||
role="menuitem"
|
||||
style="padding-left:24px;"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-video-camera"
|
||||
/>
|
||||
<span
|
||||
class="nav-text"
|
||||
>
|
||||
nav 2
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="ant-menu-item"
|
||||
role="menuitem"
|
||||
style="padding-left:24px;"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-upload"
|
||||
/>
|
||||
<span
|
||||
class="nav-text"
|
||||
>
|
||||
nav 3
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
aria-selected="true"
|
||||
class="ant-menu-item-selected ant-menu-item"
|
||||
role="menuitem"
|
||||
style="padding-left:24px;"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-bar-chart"
|
||||
/>
|
||||
<span
|
||||
class="nav-text"
|
||||
>
|
||||
nav 4
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="ant-menu-item"
|
||||
role="menuitem"
|
||||
style="padding-left:24px;"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-cloud-o"
|
||||
/>
|
||||
<span
|
||||
class="nav-text"
|
||||
>
|
||||
nav 5
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="ant-menu-item"
|
||||
role="menuitem"
|
||||
style="padding-left:24px;"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-appstore-o"
|
||||
/>
|
||||
<span
|
||||
class="nav-text"
|
||||
>
|
||||
nav 6
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="ant-menu-item"
|
||||
role="menuitem"
|
||||
style="padding-left:24px;"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-team"
|
||||
/>
|
||||
<span
|
||||
class="nav-text"
|
||||
>
|
||||
nav 7
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="ant-menu-item"
|
||||
role="menuitem"
|
||||
style="padding-left:24px;"
|
||||
>
|
||||
<i
|
||||
class="anticon anticon-shop"
|
||||
/>
|
||||
<span
|
||||
class="nav-text"
|
||||
>
|
||||
nav 8
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
class="ant-layout"
|
||||
>
|
||||
<div
|
||||
class="ant-layout-header"
|
||||
style="background:#fff;padding:0;"
|
||||
/>
|
||||
<div
|
||||
class="ant-layout-content"
|
||||
style="margin:24px 16px 0;overflow:initial;"
|
||||
>
|
||||
<div
|
||||
style="padding:24px;background:#fff;text-align: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>
|
||||
</div>
|
||||
<div
|
||||
class="ant-layout-footer"
|
||||
style="text-align:center;"
|
||||
>
|
||||
Ant Design ©2016 Created by Ant UED
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-layout ant-layout-has-sider"
|
||||
|
||||
92
components/layout/demo/fixed-sider.md
Normal file
92
components/layout/demo/fixed-sider.md
Normal file
@ -0,0 +1,92 @@
|
||||
---
|
||||
order: 7
|
||||
iframe: 360
|
||||
title:
|
||||
zh-CN: 固定侧边栏
|
||||
en-US: Fixed Sider
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
当内容较长时，使用固定侧边栏可以提供更好的体验。
|
||||
|
||||
## en-US
|
||||
|
||||
When 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…
Reference in New Issue
Block a user