--- order: 3 title: zh-CN: 侧边布局 en-US: Sider --- ## zh-CN 多用在两列式布局。 ## en-US Be used in the two-columns layout. ````__react import { Layout, Menu, Breadcrumb, Icon } from 'antd'; const { Header, Content, Footer, Sider } = Layout; class SiderDemo extends React.Component { state = { collapsed: false, }; onCollapse = (collapsed) => { console.log(collapsed); this.setState({ collapsed }); } render() { return (
nav 1 nav 2 nav 3 nav 4 nav 5 nav 6
Home List App
content
Ant Design ©2016 Created by Ant UED
); } } ReactDOM.render(, mountNode); ```` ````css #components-layout-demo-side .logo { height: 32px; background: #333; border-radius: 6px; margin: 16px; } #components-layout-demo-side .ant-layout-sider-collapsed .anticon { font-size: 16px; } #components-layout-demo-side .ant-layout-sider-collapsed .nav-text { display: none; } ````