Layout, Header, Footer, Sider, Content

Layout в Ant Design — это контейнер для структурирования интерфейса веб-приложения. Он используется для организации Header, Footer, Sider и Content, обеспечивая гибкость и простоту построения сложных макетов.

Базовая структура выглядит следующим образом:

import { Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;

<Layout>
  <Header>Заголовок</Header>
  <Content>Основной контент</Content>
  <Footer>Футер</Footer>
</Layout>

Каждый элемент имеет свои особенности и возможности.

Header используется для размещения верхней части страницы: логотипов, навигации, пользовательских меню.

Основные свойства:

  • style — позволяет задавать кастомные стили, например фон или высоту.
  • className — для подключения CSS-классов.
  • theme — поддержка светлой и тёмной темы через <Layout>.

Пример с фиксированным Header:

<Layout>
  <Header style={{ position: 'fixed', width: '100%', zIndex: 1 }}>
    <div className="logo" />
    <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
      <Menu.Item key="1">Главная</Menu.Item>
      <Menu.Item key="2">О нас</Menu.Item>
      <Menu.Item key="3">Контакты</Menu.Item>
    </Menu>
  </Header>
  <Content style={{ marginTop: 64 }}>
    Основной контент с учётом фиксированного Header
  </Content>
</Layout>

Ключевой момент: фиксированный Header требует отступа у Content, чтобы контент не перекрывался.

Footer отображается внизу страницы и обычно содержит авторские права, ссылки на политику конфиденциальности, контактные данные.

Основные особенности:

  • style и className для стилизации.
  • Можно использовать как фиксированный, так и статический Footer.
  • Работает корректно с Sider и Content в гибких макетах.

Пример простого Footer:

<Footer style={{ textAlign: 'center' }}>
  ©2026 Компания. Все права защищены.
</Footer>

Sider

Sider — боковая панель, обычно для навигации или дополнительных инструментов. Может быть фиксированным, сворачиваемым, адаптивным.

Основные свойства:

  • width — ширина панели.
  • collapsedWidth — ширина при сворачивании.
  • collapsible — возможность сворачивания.
  • breakpoint — точка для автоматического сворачивания на малых экранах.
  • theme — светлая или тёмная тема.

Пример сворачиваемого Sider:

<Sider collapsible defaultCollapsed={false} width={200} theme="dark">
  <Menu mode="inline" defaultSelectedKeys={['1']}>
    <Menu.Item key="1">Панель 1</Menu.Item>
    <Menu.Item key="2">Панель 2</Menu.Item>
    <Menu.Item key="3">Панель 3</Menu.Item>
  </Menu>
</Sider>

Особенность: Sider автоматически выстраивается слева или справа от Content в зависимости от порядка компонентов в Layout.

Content

Content — основной контейнер для отображения информации. Он адаптируется к наличию Header, Footer и Sider.

Важные моменты:

  • style используется для отступов, фонового цвета и минимальной высоты.
  • Можно сочетать с Row и Col для создания сетки внутри контента.
  • В сочетании с фиксированным Header и Footer необходимо учитывать внешние отступы.

Пример Content с внутренними отступами:

<Content style={{ margin: '24px 16px', padding: 24, minHeight: 280, background: '#fff' }}>
  Основной контент страницы
</Content>

Комплексные макеты

Макет с Header, Sider, Content и Footer

<Layout style={{ minHeight: '100vh' }}>
  <Header style={{ color: '#fff' }}>Заголовок</Header>
  <Layout>
    <Sider collapsible>Меню</Sider>
    <Content style={{ padding: '24px' }}>Контент</Content>
  </Layout>
  <Footer style={{ textAlign: 'center' }}>©2026 Компания</Footer>
</Layout>

Особенности построения:

  • minHeight: '100vh' гарантирует, что футер будет внизу страницы даже при малом контенте.
  • Сворачиваемый Sider увеличивает адаптивность интерфейса.
  • Использование вложенного Layout позволяет гибко комбинировать боковую панель и основной контент.

Стилизация и темы

Ant Design поддерживает темы через атрибут theme:

  • theme="dark" — тёмная тема для Header и Sider.
  • theme="light" — светлая тема по умолчанию.
  • Можно задавать фон и размеры через style и CSS-классы.

Пример комбинированной темы:

<Header theme="dark">Тёмный Header</Header>
<Sider theme="light">Светлый Sider</Sider>
<Content>Контент</Content>
<Footer>Футер</Footer>

Адаптивность и отзывчивость

  • Сворачиваемый Sider с breakpoint="lg" автоматически адаптируется к мобильным устройствам.
  • Внутренние отступы Content (padding, margin) помогают сохранить читабельность на любых экранах.
  • Flex-базовая система Layout гарантирует корректное распределение пространства между элементами.

Эта структура позволяет создавать как простые одностраничные интерфейсы, так и сложные административные панели с динамическими боковыми меню, фиксированными заголовками и адаптивным контентом.

Оглавление