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

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
  12.         theme="dark"
  13.         mode="horizontal"
  14.         defaultSelectedKeys={['2']}
  15.         style={{ lineHeight: '64px' }}
  16.       >
  17.         <Menu.Item key="1">nav 1</Menu.Item>
  18.         <Menu.Item key="2">nav 2</Menu.Item>
  19.         <Menu.Item key="3">nav 3</Menu.Item>
  20.       </Menu>
  21.     </Header>
  22.     <Layout>
  23.       <Sider width={200} className="site-layout-background">
  24.         <Menu
  25.           mode="inline"
  26.           defaultSelectedKeys={['1']}
  27.           defaultOpenKeys={['sub1']}
  28.           style={{ height: '100%', borderRight: 0 }}
  29.         >
  30.           <SubMenu
  31.             key="sub1"
  32.             title={
  33.               <span>
  34.                 <UserOutlined />
  35.                 subnav 1
  36.               </span>
  37.             }
  38.           >
  39.             <Menu.Item key="1">option1</Menu.Item>
  40.             <Menu.Item key="2">option2</Menu.Item>
  41.             <Menu.Item key="3">option3</Menu.Item>
  42.             <Menu.Item key="4">option4</Menu.Item>
  43.           </SubMenu>
  44.           <SubMenu
  45.             key="sub2"
  46.             title={
  47.               <span>
  48.                 <LaptopOutlined />
  49.                 subnav 2
  50.               </span>
  51.             }
  52.           >
  53.             <Menu.Item key="5">option5</Menu.Item>
  54.             <Menu.Item key="6">option6</Menu.Item>
  55.             <Menu.Item key="7">option7</Menu.Item>
  56.             <Menu.Item key="8">option8</Menu.Item>
  57.           </SubMenu>
  58.           <SubMenu
  59.             key="sub3"
  60.             title={
  61.               <span>
  62.                 <NotificationOutlined />
  63.                 subnav 3
  64.               </span>
  65.             }
  66.           >
  67.             <Menu.Item key="9">option9</Menu.Item>
  68.             <Menu.Item key="10">option10</Menu.Item>
  69.             <Menu.Item key="11">option11</Menu.Item>
  70.             <Menu.Item key="12">option12</Menu.Item>
  71.           </SubMenu>
  72.         </Menu>
  73.       </Sider>
  74.       <Layout style={{ padding: '0 24px 24px' }}>
  75.         <Breadcrumb style={{ margin: '16px 0' }}>
  76.           <Breadcrumb.Item>Home</Breadcrumb.Item>
  77.           <Breadcrumb.Item>List</Breadcrumb.Item>
  78.           <Breadcrumb.Item>App</Breadcrumb.Item>
  79.         </Breadcrumb>
  80.         <Content
  81.           className="site-layout-background"
  82.           style={{
  83.             padding: 24,
  84.             margin: 0,
  85.             minHeight: 280,
  86.           }}
  87.         >
  88.           Content
  89.         </Content>
  90.       </Layout>
  91.     </Layout>
  92.   </Layout>,
  93.   mountNode,
  94. );
  1. #components-layout-demo-top-side-2 .logo {
  2.   width: 120px;
  3.   height: 31px;
  4.   background: rgba(255, 255, 255, 0.2);
  5.   margin: 16px 28px 16px 0;
  6.   float: left;
  7. }
  9. .site-layout-background {
  10.   background: #fff;
  11. }

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
  12.         theme="dark"
  13.         mode="horizontal"
  14.         defaultSelectedKeys={['2']}
  15.         style={{ lineHeight: '64px' }}
  16.       >
  17.         <Menu.Item key="1">nav 1</Menu.Item>
  18.         <Menu.Item key="2">nav 2</Menu.Item>
  19.         <Menu.Item key="3">nav 3</Menu.Item>
  20.       </Menu>
  21.     </Header>
  22.     <Content style={{ padding: '0 50px' }}>
  23.       <Breadcrumb style={{ margin: '16px 0' }}>
  24.         <Breadcrumb.Item>Home</Breadcrumb.Item>
  25.         <Breadcrumb.Item>List</Breadcrumb.Item>
  26.         <Breadcrumb.Item>App</Breadcrumb.Item>
  27.       </Breadcrumb>
  28.       <Layout className="site-layout-background" style={{ padding: '24px 0' }}>
  29.         <Sider className="site-layout-background" width={200}>
  30.           <Menu
  31.             mode="inline"
  32.             defaultSelectedKeys={['1']}
  33.             defaultOpenKeys={['sub1']}
  34.             style={{ height: '100%' }}
  35.           >
  36.             <SubMenu
  37.               key="sub1"
  38.               title={
  39.                 <span>
  40.                   <UserOutlined />
  41.                   subnav 1
  42.                 </span>
  43.               }
  44.             >
  45.               <Menu.Item key="1">option1</Menu.Item>
  46.               <Menu.Item key="2">option2</Menu.Item>
  47.               <Menu.Item key="3">option3</Menu.Item>
  48.               <Menu.Item key="4">option4</Menu.Item>
  49.             </SubMenu>
  50.             <SubMenu
  51.               key="sub2"
  52.               title={
  53.                 <span>
  54.                   <LaptopOutlined />
  55.                   subnav 2
  56.                 </span>
  57.               }
  58.             >
  59.               <Menu.Item key="5">option5</Menu.Item>
  60.               <Menu.Item key="6">option6</Menu.Item>
  61.               <Menu.Item key="7">option7</Menu.Item>
  62.               <Menu.Item key="8">option8</Menu.Item>
  63.             </SubMenu>
  64.             <SubMenu
  65.               key="sub3"
  66.               title={
  67.                 <span>
  68.                   <NotificationOutlined />
  69.                   subnav 3
  70.                 </span>
  71.               }
  72.             >
  73.               <Menu.Item key="9">option9</Menu.Item>
  74.               <Menu.Item key="10">option10</Menu.Item>
  75.               <Menu.Item key="11">option11</Menu.Item>
  76.               <Menu.Item key="12">option12</Menu.Item>
  77.             </SubMenu>
  78.           </Menu>
  79.         </Sider>
  80.         <Content style={{ padding: '0 24px', minHeight: 280 }}>Content</Content>
  81.       </Layout>
  82.     </Content>
  83.     <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
  84.   </Layout>,
  85.   mountNode,
  86. );
  1. #components-layout-demo-top-side .logo {
  2.   width: 120px;
  3.   height: 31px;
  4.   background: rgba(255, 255, 255, 0.2);
  5.   margin: 16px 28px 16px 0;
  6.   float: left;
  7. }
  9. .site-layout-background {
  10.   background: #fff;
  11. }

Layout布局 - 图5

侧边布局

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

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

  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.     return (
  25.       <Layout style={{ minHeight: '100vh' }}>
  26.         <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
  27.           <div className="logo" />
  28.           <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
  29.             <Menu.Item key="1">
  30.               <PieChartOutlined />
  31.               <span>Option 1</span>
  32.             </Menu.Item>
  33.             <Menu.Item key="2">
  34.               <DesktopOutlined />
  35.               <span>Option 2</span>
  36.             </Menu.Item>
  37.             <SubMenu
  38.               key="sub1"
  39.               title={
  40.                 <span>
  41.                   <UserOutlined />
  42.                   <span>User</span>
  43.                 </span>
  44.               }
  45.             >
  46.               <Menu.Item key="3">Tom</Menu.Item>
  47.               <Menu.Item key="4">Bill</Menu.Item>
  48.               <Menu.Item key="5">Alex</Menu.Item>
  49.             </SubMenu>
  50.             <SubMenu
  51.               key="sub2"
  52.               title={
  53.                 <span>
  54.                   <TeamOutlined />
  55.                   <span>Team</span>
  56.                 </span>
  57.               }
  58.             >
  59.               <Menu.Item key="6">Team 1</Menu.Item>
  60.               <Menu.Item key="8">Team 2</Menu.Item>
  61.             </SubMenu>
  62.             <Menu.Item key="9">
  63.               <FileOutlined />
  64.             </Menu.Item>
  65.           </Menu>
  66.         </Sider>
  67.         <Layout className="site-layout">
  68.           <Header className="site-layout-background" style={{ padding: 0 }} />
  69.           <Content style={{ margin: '0 16px' }}>
  70.             <Breadcrumb style={{ margin: '16px 0' }}>
  71.               <Breadcrumb.Item>User</Breadcrumb.Item>
  72.               <Breadcrumb.Item>Bill</Breadcrumb.Item>
  73.             </Breadcrumb>
  74.             <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
  75.               Bill is a cat.
  76.             </div>
  77.           </Content>
  78.           <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
  79.         </Layout>
  80.       </Layout>
  81.     );
  82.   }
  83. }
  85. ReactDOM.render(<SiderDemo />, mountNode);
  1. #components-layout-demo-side .logo {
  2.   height: 32px;
  3.   background: rgba(255, 255, 255, 0.2);
  4.   margin: 16px;
  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">
  30.               <UserOutlined />
  31.               <span>nav 1</span>
  32.             </Menu.Item>
  33.             <Menu.Item key="2">
  34.               <VideoCameraOutlined />
  35.               <span>nav 2</span>
  36.             </Menu.Item>
  37.             <Menu.Item key="3">
  38.               <UploadOutlined />
  39.               <span>nav 3</span>
  40.             </Menu.Item>
  41.           </Menu>
  42.         </Sider>
  43.         <Layout className="site-layout">
  44.           <Header className="site-layout-background" style={{ padding: 0 }}>
  45.             {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
  46.               className: 'trigger',
  47.               onClick: this.toggle,
  48.             })}
  49.           </Header>
  50.           <Content
  51.             className="site-layout-background"
  52.             style={{
  53.               margin: '24px 16px',
  54.               padding: 24,
  55.               minHeight: 280,
  56.             }}
  57.           >
  58.             Content
  59.           </Content>
  60.         </Layout>
  61.       </Layout>
  62.     );
  63.   }
  64. }
  66. ReactDOM.render(<SiderDemo />, mountNode);
  1. #components-layout-demo-custom-trigger .trigger {
  2.   font-size: 18px;
  3.   line-height: 64px;
  4.   padding: 0 24px;
  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.   background: rgba(255, 255, 255, 0.2);
  16.   margin: 16px;
  17. }
  19. .site-layout .site-layout-background {
  20.   background: #fff;
  21. }

Layout布局 - 图7

响应式布局

Layout.Sider 支持响应式布局。

说明：配置 breakpoint 属性即生效，视窗宽度小于 breakpoint 时 Sider 缩小为 collapsedWidth 宽度，若将 collapsedWidth 设置为零，会出现特殊 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">
  21.           <UserOutlined />
  22.           <span className="nav-text">nav 1</span>
  23.         </Menu.Item>
  24.         <Menu.Item key="2">
  25.           <VideoCameraOutlined />
  26.           <span className="nav-text">nav 2</span>
  27.         </Menu.Item>
  28.         <Menu.Item key="3">
  29.           <UploadOutlined />
  30.           <span className="nav-text">nav 3</span>
  31.         </Menu.Item>
  32.         <Menu.Item key="4">
  33.           <UserOutlined />
  34.           <span className="nav-text">nav 4</span>
  35.         </Menu.Item>
  36.       </Menu>
  37.     </Sider>
  38.     <Layout>
  39.       <Header className="site-layout-sub-header-background" style={{ padding: 0 }} />
  40.       <Content style={{ margin: '24px 16px 0' }}>
  41.         <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
  42.           content
  43.         </div>
  44.       </Content>
  45.       <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
  46.     </Layout>
  47.   </Layout>,
  48.   mountNode,
  49. );
  1. #components-layout-demo-responsive .logo {
  2.   height: 32px;
  3.   background: rgba(255, 255, 255, 0.2);
  4.   margin: 16px;
  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
  10.         theme="dark"
  11.         mode="horizontal"
  12.         defaultSelectedKeys={['2']}
  13.         style={{ lineHeight: '64px' }}
  14.       >
  15.         <Menu.Item key="1">nav 1</Menu.Item>
  16.         <Menu.Item key="2">nav 2</Menu.Item>
  17.         <Menu.Item key="3">nav 3</Menu.Item>
  18.       </Menu>
  19.     </Header>
  20.     <Content className="site-layout" style={{ padding: '0 50px', marginTop: 64 }}>
  21.       <Breadcrumb style={{ margin: '16px 0' }}>
  22.         <Breadcrumb.Item>Home</Breadcrumb.Item>
  23.         <Breadcrumb.Item>List</Breadcrumb.Item>
  24.         <Breadcrumb.Item>App</Breadcrumb.Item>
  25.       </Breadcrumb>
  26.       <div className="site-layout-background" style={{ padding: 24, minHeight: 380 }}>
  27.         Content
  28.       </div>
  29.     </Content>
  30.     <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
  31.   </Layout>,
  32.   mountNode,
  33. );
  1. #components-layout-demo-fixed .logo {
  2.   width: 120px;
  3.   height: 31px;
  4.   background: rgba(255, 255, 255, 0.2);
  5.   margin: 16px 24px 16px 0;
  6.   float: left;
  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">
  28.           <UserOutlined />
  29.           <span className="nav-text">nav 1</span>
  30.         </Menu.Item>
  31.         <Menu.Item key="2">
  32.           <VideoCameraOutlined />
  33.           <span className="nav-text">nav 2</span>
  34.         </Menu.Item>
  35.         <Menu.Item key="3">
  36.           <UploadOutlined />
  37.           <span className="nav-text">nav 3</span>
  38.         </Menu.Item>
  39.         <Menu.Item key="4">
  40.           <BarChartOutlined />
  41.           <span className="nav-text">nav 4</span>
  42.         </Menu.Item>
  43.         <Menu.Item key="5">
  44.           <CloudOutlined />
  45.           <span className="nav-text">nav 5</span>
  46.         </Menu.Item>
  47.         <Menu.Item key="6">
  48.           <AppstoreOutlined />
  49.           <span className="nav-text">nav 6</span>
  50.         </Menu.Item>
  51.         <Menu.Item key="7">
  52.           <TeamOutlined />
  53.           <span className="nav-text">nav 7</span>
  54.         </Menu.Item>
  55.         <Menu.Item key="8">
  56.           <ShopOutlined />
  57.           <span className="nav-text">nav 8</span>
  58.         </Menu.Item>
  59.       </Menu>
  60.     </Sider>
  61.     <Layout className="site-layout" style={{ marginLeft: 200 }}>
  62.       <Header className="site-layout-background" style={{ padding: 0 }} />
  63.       <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
  64.         <div className="site-layout-background" style={{ padding: 24, textAlign: 'center' }}>
  65.           ...
  66.           <br />
  67.           Really
  68.           <br />
  69.           ...
  70.           <br />
  71.           ...
  72.           <br />
  73.           ...
  74.           <br />
  75.           long
  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.           ...
  152.           <br />
  153.           ...
  154.           <br />
  155.           ...
  156.           <br />
  157.           ...
  158.           <br />
  159.           content
  160.         </div>
  161.       </Content>
  162.       <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
  163.     </Layout>
  164.   </Layout>,
  165.   mountNode,
  166. );
  1. #components-layout-demo-fixed-sider .logo {
  2.   height: 32px;
  3.   background: rgba(255, 255, 255, 0.2);
  4.   margin: 16px;
  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指定样式object-

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指定样式object-
theme主题颜色light | darkdark
trigger自定义 trigger，设置为 null 时隐藏 triggerstring|ReactNode-
width宽度number|string200
onCollapse展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发(collapsed, type) => {}-
onBreakpoint触发响应式布局断点时的回调(broken) => {}-
zeroWidthTriggerStyle指定当 collapsedWidth 为 0 时出现的特殊 trigger 的样式object-

breakpoint width

{
  xs: '480px',
  sm: '576px',
  md: '768px',
  lg: '992px',
  xl: '1200px',
  xxl: '1600px',
}