Layout布局

协助进行页面级整体布局。

设计规则

尺寸

一级导航项偏左靠近 logo 放置，辅助菜单偏右放置。

  • 顶部导航（大部分系统）：一级导航高度 64px，二级导航 48px。

  • 顶部导航（展示类页面）：一级导航高度 80px，二级导航 56px。

  • 顶部导航高度的范围计算公式为：48+8n。

  • 侧边导航宽度的范围计算公式：200+8n。

交互

  • 一级导航和末级的导航需要在可视化的层面被强调出来；

  • 当前项应该在呈现上优先级最高；

  • 当导航收起的时候，当前项的样式自动赋予给它的上一个层级；

  • 左侧导航栏的收放交互同时支持手风琴和全展开的样式，根据业务的要求进行适当的选择。

视觉

导航样式上需要根据信息层级合理的选择样式：

  • 大色块强调

    建议用于底色为深色系时，当前页面父级的导航项。

  • 高亮火柴棍

    当导航栏底色为浅色系时使用，可用于当前页面对应导航项，建议尽量在导航路径的最终项使用。

  • 字体高亮变色

    从可视化层面，字体高亮的视觉强化力度低于大色块，通常在当前项的上一级使用。

  • 字体放大

    12px、14px 是导航的标准字号，14 号字体用在一、二级导航中。字号可以考虑导航项的等级做相应选择。

组件概述

  • Layout：布局容器，其下可嵌套 Header Sider Content Footer 或 Layout 本身，可以放在任何父容器中。

  • Header：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。

  • Sider：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在 Layout 中。

  • Content：内容部分，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。

  • Footer：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。

注意：采用 flex 布局实现，请注意浏览器兼容性问题。

代码演示

Layout布局 - 图1

基本结构

典型的页面布局。

  1. import { Layout } from 'antd';
  3. const { Header, Footer, Sider, Content } = Layout;
  5. ReactDOM.render(
  6.   <>
  7.     <Layout>
  8.       <Header>Header</Header>
  9.       <Content>Content</Content>
  10.       <Footer>Footer</Footer>
  11.     </Layout>
  13.     <Layout>
  14.       <Header>Header</Header>
  15.       <Layout>
  16.         <Sider>Sider</Sider>
  17.         <Content>Content</Content>
  18.       </Layout>
  19.       <Footer>Footer</Footer>
  20.     </Layout>
  22.     <Layout>
  23.       <Header>Header</Header>
  24.       <Layout>
  25.         <Content>Content</Content>
  26.         <Sider>Sider</Sider>
  27.       </Layout>
  28.       <Footer>Footer</Footer>
  29.     </Layout>
  31.     <Layout>
  32.       <Sider>Sider</Sider>
  33.       <Layout>
  34.         <Header>Header</Header>
  35.         <Content>Content</Content>
  36.         <Footer>Footer</Footer>
  37.       </Layout>
  38.     </Layout>
  39.   </>,
  40.   mountNode,
  41. );

Layout布局 - 图2

上中下布局

最基本的『上-中-下』布局。

一般主导航放置于页面的顶端，从左自右依次为：logo、一级导航项、辅助菜单（用户、设置、通知等）。通常将内容放在固定尺寸（例如：1200px）内，整个页面排版稳定，不受用户终端显示器影响；上下级的结构符合用户上下浏览的习惯，也是较为经典的网站导航模式。页面上下切分的方式提高了主工作区域的信息展示效率，但在纵向空间上会有一些牺牲。此外，由于导航栏水平空间的限制，不适合那些一级导航项很多的信息结构。

  1. import { Layout, Menu, Breadcrumb } from 'antd';
  3. const { Header, Content, Footer } = Layout;
  5. ReactDOM.render(
  6.   <Layout className="layout">
  7.     <Header>
  8.       <div className="logo" />
  9.       <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
  10.         <Menu.Item key="1">nav 1</Menu.Item>
  11.         <Menu.Item key="2">nav 2</Menu.Item>
  12.         <Menu.Item key="3">nav 3</Menu.Item>
  13.       </Menu>
  14.     </Header>
  15.     <Content style={{ padding: '0 50px' }}>
  16.       <Breadcrumb style={{ margin: '16px 0' }}>
  17.         <Breadcrumb.Item>Home</Breadcrumb.Item>
  18.         <Breadcrumb.Item>List</Breadcrumb.Item>
  19.         <Breadcrumb.Item>App</Breadcrumb.Item>
  20.       </Breadcrumb>
  21.       <div className="site-layout-content">Content</div>
  22.     </Content>
  23.     <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
  24.   </Layout>,
  25.   mountNode,
  26. );
  1. .site-layout-content {
  2.   min-height: 280px;
  3.   padding: 24px;
  4.   background: #fff;
  5. }
  6. #components-layout-demo-top .logo {
  7.   float: left;
  8.   width: 120px;
  9.   height: 31px;
  10.   margin: 16px 24px 16px 0;
  11.   background: rgba(255, 255, 255, 0.3);
  12. }
  13. .ant-row-rtl #components-layout-demo-top .logo {
  14.   float: right;
  15.   margin: 16px 0 16px 24px;
  16. }

Layout布局 - 图3

顶部-侧边布局-通栏

同样拥有顶部导航及侧边栏，区别是两边未留边距，多用于应用型的网站。

  1. import { Layout, Menu, Breadcrumb } from 'antd';
  2. import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
  4. const { SubMenu } = Menu;
  5. const { Header, Content, Sider } = Layout;
  7. ReactDOM.render(
  8.   <Layout>
  9.     <Header className="header">
  10.       <div className="logo" />
  11.       <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
  12.         <Menu.Item key="1">nav 1</Menu.Item>
  13.         <Menu.Item key="2">nav 2</Menu.Item>
  14.         <Menu.Item key="3">nav 3</Menu.Item>
  15.       </Menu>
  16.     </Header>
  17.     <Layout>
  18.       <Sider width={200} className="site-layout-background">
  19.         <Menu
  20.           mode="inline"
  21.           defaultSelectedKeys={['1']}
  22.           defaultOpenKeys={['sub1']}
  23.           style={{ height: '100%', borderRight: 0 }}
  24.         >
  25.           <SubMenu key="sub1" icon={<UserOutlined />} title="subnav 1">
  26.             <Menu.Item key="1">option1</Menu.Item>
  27.             <Menu.Item key="2">option2</Menu.Item>
  28.             <Menu.Item key="3">option3</Menu.Item>
  29.             <Menu.Item key="4">option4</Menu.Item>
  30.           </SubMenu>
  31.           <SubMenu key="sub2" icon={<LaptopOutlined />} title="subnav 2">
  32.             <Menu.Item key="5">option5</Menu.Item>
  33.             <Menu.Item key="6">option6</Menu.Item>
  34.             <Menu.Item key="7">option7</Menu.Item>
  35.             <Menu.Item key="8">option8</Menu.Item>
  36.           </SubMenu>
  37.           <SubMenu key="sub3" icon={<NotificationOutlined />} title="subnav 3">
  38.             <Menu.Item key="9">option9</Menu.Item>
  39.             <Menu.Item key="10">option10</Menu.Item>
  40.             <Menu.Item key="11">option11</Menu.Item>
  41.             <Menu.Item key="12">option12</Menu.Item>
  42.           </SubMenu>
  43.         </Menu>
  44.       </Sider>
  45.       <Layout style={{ padding: '0 24px 24px' }}>
  46.         <Breadcrumb style={{ margin: '16px 0' }}>
  47.           <Breadcrumb.Item>Home</Breadcrumb.Item>
  48.           <Breadcrumb.Item>List</Breadcrumb.Item>
  49.           <Breadcrumb.Item>App</Breadcrumb.Item>
  50.         </Breadcrumb>
  51.         <Content
  52.           className="site-layout-background"
  53.           style={{
  54.             padding: 24,
  55.             margin: 0,
  56.             minHeight: 280,
  57.           }}
  58.         >
  59.           Content
  60.         </Content>
  61.       </Layout>
  62.     </Layout>
  63.   </Layout>,
  64.   mountNode,
  65. );
  1. #components-layout-demo-top-side-2 .logo {
  2.   float: left;
  3.   width: 120px;
  4.   height: 31px;
  5.   margin: 16px 24px 16px 0;
  6.   background: rgba(255, 255, 255, 0.3);
  7. }
  9. .ant-row-rtl #components-layout-demo-top-side-2 .logo {
  10.   float: right;
  11.   margin: 16px 0 16px 24px;
  12. }
  14. .site-layout-background {
  15.   background: #fff;
  16. }

Layout布局 - 图4

顶部-侧边布局

拥有顶部导航及侧边栏的页面，多用于展示类网站。

  1. import { Layout, Menu, Breadcrumb } from 'antd';
  2. import { UserOutlined, LaptopOutlined, NotificationOutlined } from '@ant-design/icons';
  4. const { SubMenu } = Menu;
  5. const { Header, Content, Footer, Sider } = Layout;
  7. ReactDOM.render(
  8.   <Layout>
  9.     <Header className="header">
  10.       <div className="logo" />
  11.       <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
  12.         <Menu.Item key="1">nav 1</Menu.Item>
  13.         <Menu.Item key="2">nav 2</Menu.Item>
  14.         <Menu.Item key="3">nav 3</Menu.Item>
  15.       </Menu>
  16.     </Header>
  17.     <Content style={{ padding: '0 50px' }}>
  18.       <Breadcrumb style={{ margin: '16px 0' }}>
  19.         <Breadcrumb.Item>Home</Breadcrumb.Item>
  20.         <Breadcrumb.Item>List</Breadcrumb.Item>
  21.         <Breadcrumb.Item>App</Breadcrumb.Item>
  22.       </Breadcrumb>
  23.       <Layout className="site-layout-background" style={{ padding: '24px 0' }}>
  24.         <Sider className="site-layout-background" width={200}>
  25.           <Menu
  26.             mode="inline"
  27.             defaultSelectedKeys={['1']}
  28.             defaultOpenKeys={['sub1']}
  29.             style={{ height: '100%' }}
  30.           >
  31.             <SubMenu key="sub1" icon={<UserOutlined />} title="subnav 1">
  32.               <Menu.Item key="1">option1</Menu.Item>
  33.               <Menu.Item key="2">option2</Menu.Item>
  34.               <Menu.Item key="3">option3</Menu.Item>
  35.               <Menu.Item key="4">option4</Menu.Item>
  36.             </SubMenu>
  37.             <SubMenu key="sub2" icon={<LaptopOutlined />} title="subnav 2">
  38.               <Menu.Item key="5">option5</Menu.Item>
  39.               <Menu.Item key="6">option6</Menu.Item>
  40.               <Menu.Item key="7">option7</Menu.Item>
  41.               <Menu.Item key="8">option8</Menu.Item>
  42.             </SubMenu>
  43.             <SubMenu key="sub3" icon={<NotificationOutlined />} title="subnav 3">
  44.               <Menu.Item key="9">option9</Menu.Item>
  45.               <Menu.Item key="10">option10</Menu.Item>
  46.               <Menu.Item key="11">option11</Menu.Item>
  47.               <Menu.Item key="12">option12</Menu.Item>
  48.             </SubMenu>
  49.           </Menu>
  50.         </Sider>
  51.         <Content style={{ padding: '0 24px', minHeight: 280 }}>Content</Content>
  52.       </Layout>
  53.     </Content>
  54.     <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
  55.   </Layout>,
  56.   mountNode,
  57. );
  1. #components-layout-demo-top-side .logo {
  2.   float: left;
  3.   width: 120px;
  4.   height: 31px;
  5.   margin: 16px 24px 16px 0;
  6.   background: rgba(255, 255, 255, 0.3);
  7. }
  9. .ant-row-rtl #components-layout-demo-top-side .logo {
  10.   float: right;
  11.   margin: 16px 0 16px 24px;
  12. }
  14. .site-layout-background {
  15.   background: #fff;
  16. }

Layout布局 - 图5

侧边布局

侧边两列式布局。页面横向空间有限时，侧边导航可收起。

侧边导航在页面布局上采用的是左右的结构，一般主导航放置于页面的左侧固定位置，辅助菜单放置于工作区顶部。内容根据浏览器终端进行自适应，能提高横向空间的使用率，但是整个页面排版不稳定。侧边导航的模式层级扩展性强，一、二、三级导航项目可以更为顺畅且具关联性的被展示，同时侧边导航可以固定，使得用户在操作和浏览中可以快速的定位和切换当前位置，有很高的操作效率。但这类导航横向页面内容的空间会被牺牲一部分。

🛎️ 想要 3 分钟实现？试试 ProLayout！

  1. import { Layout, Menu, Breadcrumb } from 'antd';
  2. import {
  3.   DesktopOutlined,
  4.   PieChartOutlined,
  5.   FileOutlined,
  6.   TeamOutlined,
  7.   UserOutlined,
  8. } from '@ant-design/icons';
  10. const { Header, Content, Footer, Sider } = Layout;
  11. const { SubMenu } = Menu;
  13. class SiderDemo extends React.Component {
  14.   state = {
  15.     collapsed: false,
  16.   };
  18.   onCollapse = collapsed => {
  19.     console.log(collapsed);
  20.     this.setState({ collapsed });
  21.   };
  23.   render() {
  24.     const { collapsed } = this.state;
  25.     return (
  26.       <Layout style={{ minHeight: '100vh' }}>
  27.         <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
  28.           <div className="logo" />
  29.           <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
  30.             <Menu.Item key="1" icon={<PieChartOutlined />}>
  31.               Option 1
  32.             </Menu.Item>
  33.             <Menu.Item key="2" icon={<DesktopOutlined />}>
  34.               Option 2
  35.             </Menu.Item>
  36.             <SubMenu key="sub1" icon={<UserOutlined />} title="User">
  37.               <Menu.Item key="3">Tom</Menu.Item>
  38.               <Menu.Item key="4">Bill</Menu.Item>
  39.               <Menu.Item key="5">Alex</Menu.Item>
  40.             </SubMenu>
  41.             <SubMenu key="sub2" icon={<TeamOutlined />} title="Team">
  42.               <Menu.Item key="6">Team 1</Menu.Item>
  43.               <Menu.Item key="8">Team 2</Menu.Item>
  44.             </SubMenu>
  45.             <Menu.Item key="9" icon={<FileOutlined />}>
  46.               Files
  47.             </Menu.Item>
  48.           </Menu>
  49.         </Sider>
  50.         <Layout className="site-layout">
  51.           <Header className="site-layout-background" style={{ padding: 0 }} />
  52.           <Content style={{ margin: '0 16px' }}>
  53.             <Breadcrumb style={{ margin: '16px 0' }}>
  54.               <Breadcrumb.Item>User</Breadcrumb.Item>
  55.               <Breadcrumb.Item>Bill</Breadcrumb.Item>
  56.             </Breadcrumb>
  57.             <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
  58.               Bill is a cat.
  59.             </div>
  60.           </Content>
  61.           <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
  62.         </Layout>
  63.       </Layout>
  64.     );
  65.   }
  66. }
  68. ReactDOM.render(<SiderDemo />, mountNode);
  1. #components-layout-demo-side .logo {
  2.   height: 32px;
  3.   margin: 16px;
  4.   background: rgba(255, 255, 255, 0.3);
  5. }
  7. .site-layout .site-layout-background {
  8.   background: #fff;
  9. }

Layout布局 - 图6

自定义触发器

要使用自定义触发器，可以设置 trigger={null} 来隐藏默认设定。

  1. import { Layout, Menu } from 'antd';
  2. import {
  3.   MenuUnfoldOutlined,
  4.   MenuFoldOutlined,
  5.   UserOutlined,
  6.   VideoCameraOutlined,
  7.   UploadOutlined,
  8. } from '@ant-design/icons';
  10. const { Header, Sider, Content } = Layout;
  12. class SiderDemo extends React.Component {
  13.   state = {
  14.     collapsed: false,
  15.   };
  17.   toggle = () => {
  18.     this.setState({
  19.       collapsed: !this.state.collapsed,
  20.     });
  21.   };
  23.   render() {
  24.     return (
  25.       <Layout>
  26.         <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
  27.           <div className="logo" />
  28.           <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
  29.             <Menu.Item key="1" icon={<UserOutlined />}>
  30.               nav 1
  31.             </Menu.Item>
  32.             <Menu.Item key="2" icon={<VideoCameraOutlined />}>
  33.               nav 2
  34.             </Menu.Item>
  35.             <Menu.Item key="3" icon={<UploadOutlined />}>
  36.               nav 3
  37.             </Menu.Item>
  38.           </Menu>
  39.         </Sider>
  40.         <Layout className="site-layout">
  41.           <Header className="site-layout-background" style={{ padding: 0 }}>
  42.             {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
  43.               className: 'trigger',
  44.               onClick: this.toggle,
  45.             })}
  46.           </Header>
  47.           <Content
  48.             className="site-layout-background"
  49.             style={{
  50.               margin: '24px 16px',
  51.               padding: 24,
  52.               minHeight: 280,
  53.             }}
  54.           >
  55.             Content
  56.           </Content>
  57.         </Layout>
  58.       </Layout>
  59.     );
  60.   }
  61. }
  63. ReactDOM.render(<SiderDemo />, mountNode);
  1. #components-layout-demo-custom-trigger .trigger {
  2.   padding: 0 24px;
  3.   font-size: 18px;
  4.   line-height: 64px;
  5.   cursor: pointer;
  6.   transition: color 0.3s;
  7. }
  9. #components-layout-demo-custom-trigger .trigger:hover {
  10.   color: #1890ff;
  11. }
  13. #components-layout-demo-custom-trigger .logo {
  14.   height: 32px;
  15.   margin: 16px;
  16.   background: rgba(255, 255, 255, 0.3);
  17. }
  19. .site-layout .site-layout-background {
  20.   background: #fff;
  21. }

Layout布局 - 图7

响应式布局

Layout.Sider 支持响应式布局。

说明：配置 breakpoint 属性即生效，视窗宽度小于 breakpoint 时 Sider 缩小为 collapsedWidth 宽度，若将 collapsedWidth 设置为 0，会出现特殊 trigger。

  1. import { Layout, Menu } from 'antd';
  2. import { UploadOutlined, UserOutlined, VideoCameraOutlined } from '@ant-design/icons';
  4. const { Header, Content, Footer, Sider } = Layout;
  6. ReactDOM.render(
  7.   <Layout>
  8.     <Sider
  9.       breakpoint="lg"
  10.       collapsedWidth="0"
  11.       onBreakpoint={broken => {
  12.         console.log(broken);
  13.       }}
  14.       onCollapse={(collapsed, type) => {
  15.         console.log(collapsed, type);
  16.       }}
  17.     >
  18.       <div className="logo" />
  19.       <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
  20.         <Menu.Item key="1" icon={<UserOutlined />}>
  21.           nav 1
  22.         </Menu.Item>
  23.         <Menu.Item key="2" icon={<VideoCameraOutlined />}>
  24.           nav 2
  25.         </Menu.Item>
  26.         <Menu.Item key="3" icon={<UploadOutlined />}>
  27.           nav 3
  28.         </Menu.Item>
  29.         <Menu.Item key="4" icon={<UserOutlined />}>
  30.           nav 4
  31.         </Menu.Item>
  32.       </Menu>
  33.     </Sider>
  34.     <Layout>
  35.       <Header className="site-layout-sub-header-background" style={{ padding: 0 }} />
  36.       <Content style={{ margin: '24px 16px 0' }}>
  37.         <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
  38.           content
  39.         </div>
  40.       </Content>
  41.       <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
  42.     </Layout>
  43.   </Layout>,
  44.   mountNode,
  45. );
  1. #components-layout-demo-responsive .logo {
  2.   height: 32px;
  3.   margin: 16px;
  4.   background: rgba(255, 255, 255, 0.2);
  5. }
  7. .site-layout-sub-header-background {
  8.   background: #fff;
  9. }
  11. .site-layout-background {
  12.   background: #fff;
  13. }

Layout布局 - 图8

固定头部

一般用于固定顶部导航，方便页面切换。

  1. import { Layout, Menu, Breadcrumb } from 'antd';
  3. const { Header, Content, Footer } = Layout;
  5. ReactDOM.render(
  6.   <Layout>
  7.     <Header style={{ position: 'fixed', zIndex: 1, width: '100%' }}>
  8.       <div className="logo" />
  9.       <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
  10.         <Menu.Item key="1">nav 1</Menu.Item>
  11.         <Menu.Item key="2">nav 2</Menu.Item>
  12.         <Menu.Item key="3">nav 3</Menu.Item>
  13.       </Menu>
  14.     </Header>
  15.     <Content className="site-layout" style={{ padding: '0 50px', marginTop: 64 }}>
  16.       <Breadcrumb style={{ margin: '16px 0' }}>
  17.         <Breadcrumb.Item>Home</Breadcrumb.Item>
  18.         <Breadcrumb.Item>List</Breadcrumb.Item>
  19.         <Breadcrumb.Item>App</Breadcrumb.Item>
  20.       </Breadcrumb>
  21.       <div className="site-layout-background" style={{ padding: 24, minHeight: 380 }}>
  22.         Content
  23.       </div>
  24.     </Content>
  25.     <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
  26.   </Layout>,
  27.   mountNode,
  28. );
  1. #components-layout-demo-fixed .logo {
  2.   float: left;
  3.   width: 120px;
  4.   height: 31px;
  5.   margin: 16px 24px 16px 0;
  6.   background: rgba(255, 255, 255, 0.2);
  7. }
  8. .site-layout .site-layout-background {
  9.   background: #fff;
  10. }

Layout布局 - 图9

固定侧边栏

当内容较长时，使用固定侧边栏可以提供更好的体验。

  1. import { Layout, Menu } from 'antd';
  2. import {
  3.   AppstoreOutlined,
  4.   BarChartOutlined,
  5.   CloudOutlined,
  6.   ShopOutlined,
  7.   TeamOutlined,
  8.   UserOutlined,
  9.   UploadOutlined,
  10.   VideoCameraOutlined,
  11. } from '@ant-design/icons';
  13. const { Header, Content, Footer, Sider } = Layout;
  15. ReactDOM.render(
  16.   <Layout>
  17.     <Sider
  18.       style={{
  19.         overflow: 'auto',
  20.         height: '100vh',
  21.         position: 'fixed',
  22.         left: 0,
  23.       }}
  24.     >
  25.       <div className="logo" />
  26.       <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
  27.         <Menu.Item key="1" icon={<UserOutlined />}>
  28.           nav 1
  29.         </Menu.Item>
  30.         <Menu.Item key="2" icon={<VideoCameraOutlined />}>
  31.           nav 2
  32.         </Menu.Item>
  33.         <Menu.Item key="3" icon={<UploadOutlined />}>
  34.           nav 3
  35.         </Menu.Item>
  36.         <Menu.Item key="4" icon={<BarChartOutlined />}>
  37.           nav 4
  38.         </Menu.Item>
  39.         <Menu.Item key="5" icon={<CloudOutlined />}>
  40.           nav 5
  41.         </Menu.Item>
  42.         <Menu.Item key="6" icon={<AppstoreOutlined />}>
  43.           nav 6
  44.         </Menu.Item>
  45.         <Menu.Item key="7" icon={<TeamOutlined />}>
  46.           nav 7
  47.         </Menu.Item>
  48.         <Menu.Item key="8" icon={<ShopOutlined />}>
  49.           nav 8
  50.         </Menu.Item>
  51.       </Menu>
  52.     </Sider>
  53.     <Layout className="site-layout" style={{ marginLeft: 200 }}>
  54.       <Header className="site-layout-background" style={{ padding: 0 }} />
  55.       <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
  56.         <div className="site-layout-background" style={{ padding: 24, textAlign: 'center' }}>
  57.           ...
  58.           <br />
  59.           Really
  60.           <br />
  61.           ...
  62.           <br />
  63.           ...
  64.           <br />
  65.           ...
  66.           <br />
  67.           long
  68.           <br />
  69.           ...
  70.           <br />
  71.           ...
  72.           <br />
  73.           ...
  74.           <br />
  75.           ...
  76.           <br />
  77.           ...
  78.           <br />
  79.           ...
  80.           <br />
  81.           ...
  82.           <br />
  83.           ...
  84.           <br />
  85.           ...
  86.           <br />
  87.           ...
  88.           <br />
  89.           ...
  90.           <br />
  91.           ...
  92.           <br />
  93.           ...
  94.           <br />
  95.           ...
  96.           <br />
  97.           ...
  98.           <br />
  99.           ...
  100.           <br />
  101.           ...
  102.           <br />
  103.           ...
  104.           <br />
  105.           ...
  106.           <br />
  107.           ...
  108.           <br />
  109.           ...
  110.           <br />
  111.           ...
  112.           <br />
  113.           ...
  114.           <br />
  115.           ...
  116.           <br />
  117.           ...
  118.           <br />
  119.           ...
  120.           <br />
  121.           ...
  122.           <br />
  123.           ...
  124.           <br />
  125.           ...
  126.           <br />
  127.           ...
  128.           <br />
  129.           ...
  130.           <br />
  131.           ...
  132.           <br />
  133.           ...
  134.           <br />
  135.           ...
  136.           <br />
  137.           ...
  138.           <br />
  139.           ...
  140.           <br />
  141.           ...
  142.           <br />
  143.           ...
  144.           <br />
  145.           ...
  146.           <br />
  147.           ...
  148.           <br />
  149.           ...
  150.           <br />
  151.           content
  152.         </div>
  153.       </Content>
  154.       <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
  155.     </Layout>
  156.   </Layout>,
  157.   mountNode,
  158. );
  1. #components-layout-demo-fixed-sider .logo {
  2.   height: 32px;
  3.   margin: 16px;
  4.   background: rgba(255, 255, 255, 0.2);
  5. }
  6. .site-layout .site-layout-background {
  7.   background: #fff;
  8. }

API

  1. <Layout>
  2.   <Header>header</Header>
  3.   <Layout>
  4.     <Sider>left sidebar</Sider>
  5.     <Content>main content</Content>
  6.     <Sider>right sidebar</Sider>
  7.   </Layout>
  8.   <Footer>footer</Footer>
  9. </Layout>

Layout

布局容器。

参数说明类型默认值
className容器 classNamestring-
hasSider表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动boolean-
style指定样式CSSProperties-

Layout.Header Layout.Footer Layout.Content API 与 Layout 相同

Layout.Sider

侧边栏。

参数说明类型默认值
breakpoint触发响应式布局的断点xs | sm | md | lg | xl | xxl-
className容器 classNamestring-
collapsed当前收起状态boolean-
collapsedWidth收缩宽度，设置为 0 会出现特殊 triggernumber80
collapsible是否可收起booleanfalse
defaultCollapsed是否默认收起booleanfalse
reverseArrow翻转折叠提示箭头的方向，当 Sider 在右边时可以使用booleanfalse
style指定样式CSSProperties-
theme主题颜色light | darkdark
trigger自定义 trigger，设置为 null 时隐藏 triggerReactNode-
width宽度number | string200
zeroWidthTriggerStyle指定当 collapsedWidth 为 0 时出现的特殊 trigger 的样式object-
onBreakpoint触发响应式布局断点时的回调(broken) => {}-
onCollapse展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发(collapsed, type) => {}-

breakpoint width

  1. {
  2.   xs: '480px',
  3.   sm: '576px',
  4.   md: '768px',
  5.   lg: '992px',
  6.   xl: '1200px',
  7.   xxl: '1600px',
  8. }