• Layout布局
    • 设计规则
      • 尺寸
      • 交互
      • 视觉
    • 组件概述
    • 代码演示
    • API
      • Layout
      • Layout.Sider
        • breakpoint width

    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.SubMenu;
    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-
    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 darkdark
    trigger自定义 trigger，设置为 null 时隐藏 triggerstring|ReactNode-
    width宽度number|string200
    onCollapse展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发(collapsed, type) => {}-
    onBreakpoint触发响应式布局断点时的回调(broken) => {}-

    breakpoint width

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