mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 09:49:57 +08:00
f88f383be6
* fix: suggestion dark bg * fix: demo use autoComplete="off" * feat: support iframe theme change * fix: iframe dark theme * upd: test snapshot * fix: lint * fix: lint * tweak: use theme-switcher to handle iframe and parent * feat: support iframe theme change * fix: dark shadow * fix: layout style * fix: dark site style * fix: snapshot
4.0 KiB
4.0 KiB
order | iframe | title | ||||
---|---|---|---|---|---|---|
7 | 360 |
|
zh-CN
当内容较长时,使用固定侧边栏可以提供更好的体验。
en-US
When dealing with long content, a fixed sider can provide a better user experience.
import { Layout, Menu } from 'antd';
import {
AppstoreOutlined,
BarChartOutlined,
CloudOutlined,
ShopOutlined,
TeamOutlined,
UserOutlined,
UploadOutlined,
VideoCameraOutlined,
} from '@ant-design/icons';
const { Header, Content, Footer, Sider } = Layout;
ReactDOM.render(
<Layout>
<Sider
style={{
overflow: 'auto',
height: '100vh',
position: 'fixed',
left: 0,
}}
>
<div className="logo" />
<Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
<Menu.Item key="1">
<UserOutlined />
<span className="nav-text">nav 1</span>
</Menu.Item>
<Menu.Item key="2">
<VideoCameraOutlined />
<span className="nav-text">nav 2</span>
</Menu.Item>
<Menu.Item key="3">
<UploadOutlined />
<span className="nav-text">nav 3</span>
</Menu.Item>
<Menu.Item key="4">
<BarChartOutlined />
<span className="nav-text">nav 4</span>
</Menu.Item>
<Menu.Item key="5">
<CloudOutlined />
<span className="nav-text">nav 5</span>
</Menu.Item>
<Menu.Item key="6">
<AppstoreOutlined />
<span className="nav-text">nav 6</span>
</Menu.Item>
<Menu.Item key="7">
<TeamOutlined />
<span className="nav-text">nav 7</span>
</Menu.Item>
<Menu.Item key="8">
<ShopOutlined />
<span className="nav-text">nav 8</span>
</Menu.Item>
</Menu>
</Sider>
<Layout className="site-layout" style={{ marginLeft: 200 }}>
<Header className="site-layout-background" style={{ padding: 0 }} />
<Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
<div className="site-layout-background" style={{ padding: 24, 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 ©2018 Created by Ant UED</Footer>
</Layout>
</Layout>,
mountNode,
);
#components-layout-demo-fixed-sider .logo {
height: 32px;
background: rgba(255, 255, 255, 0.2);
margin: 16px;
}
.site-layout .site-layout-background {
background: #fff;
}