Layout 布局 #

概述 #

Layout 布局组件用于构建页面的整体框架，包含 Header（头部）、Sider（侧边栏）、Content（内容区）、Footer（底部）四个子组件。

text 
┌──────────────────────────────────────────────────────┐
│                       Header                         │
├──────────┬───────────────────────────────────────────┤
│          │                                           │
│          │                                           │
│  Sider   │                 Content                  │
│          │                                           │
│          │                                           │
├──────────┴───────────────────────────────────────────┤
│                       Footer                         │
└──────────────────────────────────────────────────────┘

基础用法 #

典型布局 #

tsx 
import { Layout, Menu } from 'antd';
import { UserOutlined } from '@ant-design/icons';

const { Header, Footer, Sider, Content } = Layout;

<Layout>
  <Header style={{ background: '#fff' }}>
    <div className="logo" />
    <Menu mode="horizontal" items={menuItems} />
  </Header>
  <Content style={{ padding: '0 50px' }}>
    <div style={{ background: '#fff', padding: 24, minHeight: 280 }}>
      内容区域
    </div>
  </Content>
  <Footer style={{ textAlign: 'center' }}>
    Ant Design ©2024 Created by Ant UED
  </Footer>
</Layout>

顶部-侧边布局 #

tsx 
import { Layout, Menu } from 'antd';

const { Header, Sider, Content } = Layout;

<Layout>
  <Header style={{ display: 'flex', alignItems: 'center' }}>
    <div className="logo" />
    <Menu
      theme="dark"
      mode="horizontal"
      defaultSelectedKeys={['1']}
      items={items}
      style={{ flex: 1, minWidth: 0 }}
    />
  </Header>
  <Layout>
    <Sider width={200}>
      <Menu
        mode="inline"
        defaultSelectedKeys={['1']}
        defaultOpenKeys={['sub1']}
        style={{ height: '100%' }}
        items={menuItems}
      />
    </Sider>
    <Layout style={{ padding: '0 24px 24px' }}>
      <Content
        style={{
          padding: 24,
          margin: 0,
          minHeight: 280,
          background: '#fff',
        }}
      >
        内容
      </Content>
    </Layout>
  </Layout>
</Layout>

侧边布局 #

tsx 
import { Layout, Menu } from 'antd';
import { useState } from 'react';

const { Header, Sider, Content } = Layout;

const App = () => {
  const [collapsed, setCollapsed] = useState(false);

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider
        collapsible
        collapsed={collapsed}
        onCollapse={(value) => setCollapsed(value)}
      >
        <div className="logo" />
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['1']}
          items={items}
        />
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: '#fff' }} />
        <Content style={{ margin: '16px' }}>
          <div style={{ padding: 24, minHeight: 360, background: '#fff' }}>
            内容
          </div>
        </Content>
      </Layout>
    </Layout>
  );
};

Sider 侧边栏 #

可收缩侧边栏 #

tsx 
import { Layout, Menu } from 'antd';
import { useState } from 'react';

const { Sider } = Layout;

const [collapsed, setCollapsed] = useState(false);

<Sider
  collapsible
  collapsed={collapsed}
  onCollapse={(value) => setCollapsed(value)}
>
  <Menu theme="dark" mode="inline" items={items} />
</Sider>

侧边栏位置 #

tsx 
import { Layout, Menu } from 'antd';

const { Sider } = Layout;

<Layout>
  <Sider
    breakpoint="lg"
    collapsedWidth="0"
    onBreakpoint={(broken) => {
      console.log(broken);
    }}
    onCollapse={(collapsed, type) => {
      console.log(collapsed, type);
    }}
  >
    <Menu theme="dark" mode="inline" items={items} />
  </Sider>
</Layout>

响应式侧边栏 #

tsx 
import { Layout, Menu } from 'antd';

const { Sider } = Layout;

<Sider
  breakpoint="lg"
  collapsedWidth="0"
  trigger={null}
>
  <Menu theme="dark" mode="inline" items={items} />
</Sider>

自定义触发器 #

tsx 
import { Layout, Menu, Button } from 'antd';
import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
import { useState } from 'react';

const { Sider } = Layout;

const [collapsed, setCollapsed] = useState(false);

<Layout>
  <Sider trigger={null} collapsible collapsed={collapsed}>
    <Menu theme="dark" mode="inline" items={items} />
  </Sider>
  <Layout>
    <Header style={{ padding: 0, background: '#fff' }}>
      <Button
        type="text"
        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        onClick={() => setCollapsed(!collapsed)}
        style={{ fontSize: '16px', width: 64, height: 64 }}
      />
    </Header>
  </Layout>
</Layout>

Header 头部 #

基础头部 #

tsx 
import { Layout, Menu } from 'antd';

const { Header } = Layout;

<Header style={{ display: 'flex', alignItems: 'center' }}>
  <div className="logo" />
  <Menu
    theme="dark"
    mode="horizontal"
    defaultSelectedKeys={['1']}
    items={items}
    style={{ flex: 1, minWidth: 0 }}
  />
</Header>

顶部导航 #

tsx 
import { Layout, Menu } from 'antd';

const { Header, Content, Footer } = Layout;

<Layout>
  <Header style={{ position: 'fixed', zIndex: 1, width: '100%' }}>
    <Menu theme="dark" mode="horizontal" items={items} />
  </Header>
  <Content style={{ marginTop: 64 }}>
    内容区域
  </Content>
</Layout>

Content 内容区 #

tsx 
import { Layout, Breadcrumb } from 'antd';

const { Content } = Layout;

<Content style={{ padding: '0 50px' }}>
  <Breadcrumb items={breadcrumbItems} />
  <div style={{ background: '#fff', padding: 24, minHeight: 280 }}>
    内容
  </div>
</Content>
tsx 
import { Layout } from 'antd';

const { Footer } = Layout;

<Footer style={{ textAlign: 'center' }}>
  Ant Design ©2024 Created by Ant UED
</Footer>

API #

Layout #

属性 说明 类型 默认值
className 容器 className string -
hasSider 是否包含 Sider boolean -
style 指定样式 CSSProperties -

Layout.Header #

属性 说明 类型 默认值
className 容器 className string -
style 指定样式 CSSProperties -

Layout.Content #

属性 说明 类型 默认值
className 容器 className string -
style 指定样式 CSSProperties -

Layout.Footer #

属性 说明 类型 默认值
className 容器 className string -
style 指定样式 CSSProperties -

Layout.Sider #

属性 说明 类型 默认值
breakpoint 触发响应式的断点 xs | sm | md | lg | xl | xxl -
className 容器 className string -
collapsed 当前收起状态 boolean -
collapsedWidth 收缩宽度 number | string 80
collapsible 是否可收起 boolean false
defaultCollapsed 默认收起状态 boolean false
reverseArrow 翻转箭头方向 boolean false
style 指定样式 CSSProperties -
theme 主题 light | dark dark
trigger 自定义触发器 ReactNode -
width 宽度 number | string 200
zeroWidthTriggerStyle 零宽度触发器样式 object -
onBreakpoint 触发响应式回调 (broken) => void -
onCollapse 收起回调 (collapsed, type) => void -

最佳实践 #

1. 后台管理布局 #

tsx 
import { Layout, Menu, Breadcrumb } from 'antd';
import { useState } from 'react';

const { Header, Content, Footer, Sider } = Layout;

const App = () => {
  const [collapsed, setCollapsed] = useState(false);

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider
        collapsible
        collapsed={collapsed}
        onCollapse={setCollapsed}
      >
        <div className="logo" />
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['1']}
          items={menuItems}
        />
      </Sider>
      <Layout>
        <Header style={{ background: '#fff', padding: 0 }} />
        <Content style={{ margin: '16px' }}>
          <Breadcrumb items={breadcrumbItems} />
          <div style={{ padding: 24, minHeight: 360, background: '#fff' }}>
            内容
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          Ant Design ©2024
        </Footer>
      </Layout>
    </Layout>
  );
};

2. 固定头部和侧边栏 #

tsx 
import { Layout, Menu } from 'antd';

const { Header, Content, Sider } = Layout;

<Layout>
  <Header style={{ position: 'fixed', zIndex: 1, width: '100%' }}>
    <Menu theme="dark" mode="horizontal" items={items} />
  </Header>
  <Layout style={{ marginTop: 64 }}>
    <Sider
      style={{
        overflow: 'auto',
        height: '100vh',
        position: 'fixed',
        left: 0,
        top: 64,
        bottom: 0,
      }}
    >
      <Menu theme="dark" mode="inline" items={menuItems} />
    </Sider>
    <Layout style={{ marginLeft: 200 }}>
      <Content style={{ margin: 24, overflow: 'initial' }}>
        内容
      </Content>
    </Layout>
  </Layout>
</Layout>

3. 响应式布局 #

tsx 
import { Layout, Menu, Drawer } from 'antd';
import { useState } from 'react';

const { Header, Content, Sider } = Layout;

const App = () => {
  const [collapsed, setCollapsed] = useState(false);
  const [isMobile, setIsMobile] = useState(false);

  return (
    <Layout>
      {!isMobile ? (
        <Sider
          breakpoint="lg"
          collapsedWidth="0"
          onBreakpoint={(broken) => setIsMobile(broken)}
        >
          <Menu theme="dark" mode="inline" items={items} />
        </Sider>
      ) : (
        <Drawer
          placement="left"
          onClose={() => setCollapsed(false)}
          open={collapsed}
        >
          <Menu mode="inline" items={items} />
        </Drawer>
      )}
      <Layout>
        <Header />
        <Content>内容</Content>
      </Layout>
    </Layout>
  );
};

下一步 #

接下来学习 Menu 导航菜单 组件！

最后更新：2026-03-28