Bill is a cat.

); }; export default App; ``` ### 自定义触发器要使用自定义触发器，可以设置 `trigger={null}` 来隐藏默认设定。 ```tsx import React, { useState } from 'react'; import { MenuFoldOutlined, MenuUnfoldOutlined, UploadOutlined, UserOutlined, VideoCameraOutlined, } from '@ant-design/icons'; import { Button, Layout, Menu, theme } from 'antd'; const { Header, Sider, Content } = Layout; const App: React.FC = () => { const [collapsed, setCollapsed] = useState(false); const { token: { colorBgContainer, borderRadiusLG }, } = theme.useToken(); return (

, label: 'nav 1', }, { key: '2', icon: , label: 'nav 2', }, { key: '3', icon: , label: 'nav 3', }, ]} />

Content ); }; export default App; ``` ### 响应式布局 Layout.Sider 支持响应式布局。 > 说明：配置 `breakpoint` 属性即生效，视窗宽度小于 `breakpoint` 时 Sider 缩小为 `collapsedWidth` 宽度，若将 `collapsedWidth` 设置为 0，会出现特殊 trigger。 ```tsx import React from 'react'; import { UploadOutlined, UserOutlined, VideoCameraOutlined } from '@ant-design/icons'; import { Layout, Menu, theme } from 'antd'; const { Header, Content, Footer, Sider } = Layout; const items = [UserOutlined, VideoCameraOutlined, UploadOutlined, UserOutlined].map( (icon, index) => ({ key: String(index + 1), icon: React.createElement(icon), label: `nav ${index + 1}`, }), ); const App: React.FC = () => { const { token: { colorBgContainer, borderRadiusLG }, } = theme.useToken(); const currentYear = new Date().getFullYear(); return ( { console.log(broken); }} onCollapse={(collapsed, type) => { console.log(collapsed, type); }} >

content

); }; export default App; ``` ### 固定头部一般用于固定顶部导航，方便页面切换。 ```tsx import React from 'react'; import { Breadcrumb, Layout, Menu, theme } from 'antd'; const { Header, Content, Footer } = Layout; const items = Array.from({ length: 3 }).map((_, index) => ({ key: String(index + 1), label: `nav ${index + 1}`, })); const App: React.FC = () => { const { token: { colorBgContainer, borderRadiusLG }, } = theme.useToken(); const currentYear = new Date().getFullYear(); return (

Content

); }; export default App; ``` ### 固定侧边栏当内容较长时，使用固定侧边栏可以提供更好的体验。 ```tsx import React from 'react'; import { AppstoreOutlined, BarChartOutlined, CloudOutlined, ShopOutlined, TeamOutlined, UploadOutlined, UserOutlined, VideoCameraOutlined, } from '@ant-design/icons'; import type { MenuProps } from 'antd'; import { Layout, Menu, theme } from 'antd'; const { Header, Content, Footer, Sider } = Layout; const siderStyle: React.CSSProperties = { overflow: 'auto', height: '100vh', position: 'sticky', insetInlineStart: 0, top: 0, scrollbarWidth: 'thin', scrollbarGutter: 'stable', }; 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}`, })); const App: React.FC = () => { const { token: { colorBgContainer, borderRadiusLG }, } = theme.useToken(); const currentYear = new Date().getFullYear(); return (

long content

{ // indicates very long content Array.from({ length: 100 }, (_, index) => ( {index % 20 === 0 && index ? 'more' : '...'}
)) }

); }; export default App; ``` ### 自定义触发器 Debug 修改内容前，请尝试此 Demo 查看样式是否抖动。 ```tsx import React, { useState } from 'react'; import { DesktopOutlined, FileOutlined, MenuFoldOutlined, MenuUnfoldOutlined, PieChartOutlined, TeamOutlined, UserOutlined, } from '@ant-design/icons'; import type { MenuProps } from 'antd'; import { Button, Layout, Menu, theme } from 'antd'; const { Header, Sider, Content } = Layout; const items: MenuProps['items'] = [ { key: '1', icon: , label: 'Option 1', }, { key: '2', icon: , label: 'Option 2', }, { key: 'sub1', icon: , label: 'User', children: [ { key: '3', label: 'Tom', }, { key: '4', label: 'Bill', }, { key: '5', label: 'Alex', }, ], }, { key: 'sub2', icon: , label: 'Team', children: [ { key: '6', label: 'Team 1', }, { key: '7', label: 'Team 2', }, ], }, { key: '9', icon: , }, ]; const App: React.FC = () => { const [collapsed, setCollapsed] = useState(true); const { token: { colorBgContainer, borderRadiusLG }, } = theme.useToken(); return (

Content ); }; export default App; ``` ### 组件 Token 组件 Token ```tsx import React from 'react'; import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons'; import type { MenuProps } from 'antd'; import { Breadcrumb, ConfigProvider, Layout, Menu, theme } from 'antd'; const { Header, Content, Sider } = Layout; const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOutlined].map( (icon, index) => { const key = String(index + 1); return { key: `sub${key}`, icon: React.createElement(icon), label: `subnav ${key}`, children: Array.from({ length: 4 }).map((_, j) => { const subKey = index * 4 + j + 1; return { key: subKey, label: `option${subKey}`, }; }), }; }, ); const App: React.FC = () => { const { token: { colorBgContainer, colorBgLayout, borderRadiusLG }, } = theme.useToken(); return (

Ant Design

Home List App Content ); }; export default App; ```