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 style={{ background: '#fff', padding: 24, minHeight: 280 }}>Content</div>
  27.     </Content>
  28.     <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
  29.   </Layout>,
  30.   mountNode,
  31. );
  1. #components-layout-demo-top .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. }

Layout布局 - 图3

顶部-侧边布局-通栏

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

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

Layout布局 - 图4

顶部-侧边布局

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

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

Layout布局 - 图5

侧边布局

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

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

  1. import { Layout, Menu, Breadcrumb, Icon } from 'antd';
  3. const { Header, Content, Footer, Sider } = Layout;
  4. const { SubMenu } = Menu;
  6. class SiderDemo extends React.Component {
  7.   state = {
  8.     collapsed: false,
  9.   };
  11.   onCollapse = collapsed => {
  12.     console.log(collapsed);
  13.     this.setState({ collapsed });
  14.   };
  16.   render() {
  17.     return (
  18.       <Layout style={{ minHeight: '100vh' }}>
  19.         <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
  20.           <div className="logo" />
  21.           <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
  22.             <Menu.Item key="1">
  23.               <Icon type="pie-chart" />
  24.               <span>Option 1</span>
  25.             </Menu.Item>
  26.             <Menu.Item key="2">
  27.               <Icon type="desktop" />
  28.               <span>Option 2</span>
  29.             </Menu.Item>
  30.             <SubMenu
  31.               key="sub1"
  32.               title={
  33.                 <span>
  34.                   <Icon type="user" />
  35.                   <span>User</span>
  36.                 </span>
  37.               }
  38.             >
  39.               <Menu.Item key="3">Tom</Menu.Item>
  40.               <Menu.Item key="4">Bill</Menu.Item>
  41.               <Menu.Item key="5">Alex</Menu.Item>
  42.             </SubMenu>
  43.             <SubMenu
  44.               key="sub2"
  45.               title={
  46.                 <span>
  47.                   <Icon type="team" />
  48.                   <span>Team</span>
  49.                 </span>
  50.               }
  51.             >
  52.               <Menu.Item key="6">Team 1</Menu.Item>
  53.               <Menu.Item key="8">Team 2</Menu.Item>
  54.             </SubMenu>
  55.             <Menu.Item key="9">
  56.               <Icon type="file" />
  57.               <span>File</span>
  58.             </Menu.Item>
  59.           </Menu>
  60.         </Sider>
  61.         <Layout>
  62.           <Header style={{ background: '#fff', padding: 0 }} />
  63.           <Content style={{ margin: '0 16px' }}>
  64.             <Breadcrumb style={{ margin: '16px 0' }}>
  65.               <Breadcrumb.Item>User</Breadcrumb.Item>
  66.               <Breadcrumb.Item>Bill</Breadcrumb.Item>
  67.             </Breadcrumb>
  68.             <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>Bill is a cat.</div>
  69.           </Content>
  70.           <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
  71.         </Layout>
  72.       </Layout>
  73.     );
  74.   }
  75. }
  77. 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. }

Layout布局 - 图6

自定义触发器

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

  1. import { Layout, Menu, Icon } from 'antd';
  3. const { Header, Sider, Content } = Layout;
  5. class SiderDemo extends React.Component {
  6.   state = {
  7.     collapsed: false,
  8.   };
  10.   toggle = () => {
  11.     this.setState({
  12.       collapsed: !this.state.collapsed,
  13.     });
  14.   };
  16.   render() {
  17.     return (
  18.       <Layout>
  19.         <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
  20.           <div className="logo" />
  21.           <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
  22.             <Menu.Item key="1">
  23.               <Icon type="user" />
  24.               <span>nav 1</span>
  25.             </Menu.Item>
  26.             <Menu.Item key="2">
  27.               <Icon type="video-camera" />
  28.               <span>nav 2</span>
  29.             </Menu.Item>
  30.             <Menu.Item key="3">
  31.               <Icon type="upload" />
  32.               <span>nav 3</span>
  33.             </Menu.Item>
  34.           </Menu>
  35.         </Sider>
  36.         <Layout>
  37.           <Header style={{ background: '#fff', padding: 0 }}>
  38.             <Icon
  39.               className="trigger"
  40.               type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
  41.               onClick={this.toggle}
  42.             />
  43.           </Header>
  44.           <Content
  45.             style={{
  46.               margin: '24px 16px',
  47.               padding: 24,
  48.               background: '#fff',
  49.               minHeight: 280,
  50.             }}
  51.           >
  52.             Content
  53.           </Content>
  54.         </Layout>
  55.       </Layout>
  56.     );
  57.   }
  58. }
  60. 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. }

Layout布局 - 图7

响应式布局

Layout.Sider 支持响应式布局。

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

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

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 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 style={{ background: '#fff', padding: 24, minHeight: 380 }}>Content</div>
  27.     </Content>
  28.     <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
  29.   </Layout>,
  30.   mountNode,
  31. );
  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. }

Layout布局 - 图9

固定侧边栏

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

  1. import { Layout, Menu, Icon } from 'antd';
  3. const { Header, Content, Footer, Sider } = Layout;
  5. ReactDOM.render(
  6.   <Layout>
  7.     <Sider
  8.       style={{
  9.         overflow: 'auto',
  10.         height: '100vh',
  11.         position: 'fixed',
  12.         left: 0,
  13.       }}
  14.     >
  15.       <div className="logo" />
  16.       <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
  17.         <Menu.Item key="1">
  18.           <Icon type="user" />
  19.           <span className="nav-text">nav 1</span>
  20.         </Menu.Item>
  21.         <Menu.Item key="2">
  22.           <Icon type="video-camera" />
  23.           <span className="nav-text">nav 2</span>
  24.         </Menu.Item>
  25.         <Menu.Item key="3">
  26.           <Icon type="upload" />
  27.           <span className="nav-text">nav 3</span>
  28.         </Menu.Item>
  29.         <Menu.Item key="4">
  30.           <Icon type="bar-chart" />
  31.           <span className="nav-text">nav 4</span>
  32.         </Menu.Item>
  33.         <Menu.Item key="5">
  34.           <Icon type="cloud-o" />
  35.           <span className="nav-text">nav 5</span>
  36.         </Menu.Item>
  37.         <Menu.Item key="6">
  38.           <Icon type="appstore-o" />
  39.           <span className="nav-text">nav 6</span>
  40.         </Menu.Item>
  41.         <Menu.Item key="7">
  42.           <Icon type="team" />
  43.           <span className="nav-text">nav 7</span>
  44.         </Menu.Item>
  45.         <Menu.Item key="8">
  46.           <Icon type="shop" />
  47.           <span className="nav-text">nav 8</span>
  48.         </Menu.Item>
  49.       </Menu>
  50.     </Sider>
  51.     <Layout style={{ marginLeft: 200 }}>
  52.       <Header style={{ background: '#fff', padding: 0 }} />
  53.       <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
  54.         <div style={{ padding: 24, background: '#fff', textAlign: 'center' }}>
  55.           ...
  56.           <br />
  57.           Really
  58.           <br />
  59.           ...
  60.           <br />
  61.           ...
  62.           <br />
  63.           ...
  64.           <br />
  65.           long
  66.           <br />
  67.           ...
  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.           content
  150.         </div>
  151.       </Content>
  152.       <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
  153.     </Layout>
  154.   </Layout>,
  155.   mountNode,
  156. );
  1. #components-layout-demo-fixed-sider .logo {
  2.   height: 32px;
  3.   background: rgba(255, 255, 255, 0.2);
  4.   margin: 16px;
  5. }

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-3.2.0
style指定样式object-

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

Layout.Sider

侧边栏。

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

breakpoint width

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