--- 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. ```tsx import { Layout, Menu, MenuProps } from 'antd'; import { AppstoreOutlined, BarChartOutlined, CloudOutlined, ShopOutlined, TeamOutlined, UserOutlined, UploadOutlined, VideoCameraOutlined, } from '@ant-design/icons'; const { Header, Content, Footer, Sider } = Layout; const items: MenuProps['items'] = [ UserOutlined, VideoCameraOutlined, UploadOutlined, BarChartOutlined, CloudOutlined, AppstoreOutlined, TeamOutlined, ShopOutlined, ].map((icon, index) => ({ key: String(index + 1), icon: React.createElement(icon), label: `nav ${index + 1}`, })); export default () => (
...
Really
...
...
...
long
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
...
content
Ant Design ©2018 Created by Ant UED
); ``` ```css #components-layout-demo-fixed-sider .logo { height: 32px; margin: 16px; background: rgba(255, 255, 255, 0.2); } #components-layout-demo-fixed-sider .site-layout .site-layout-background { background: #fff; } ```