Space

Компонент Space в библиотеке Ant Design предназначен для удобного управления промежутками между элементами интерфейса. Он обеспечивает гибкое выравнивание компонентов по горизонтали или вертикали без необходимости вручную задавать маргины каждому элементу. Основная задача Space — создать аккуратный, читаемый и визуально согласованный интерфейс с минимальными усилиями.

import { Space, Button } from 'antd';

<Space>
  <Button>Кнопка 1</Button>
  <Button>Кнопка 2</Button>
  <Button>Кнопка 3</Button>
</Space>

В этом примере все кнопки автоматически получают равные промежутки между собой.

Горизонтальное и вертикальное расположение

По умолчанию Space располагает элементы горизонтально. Для вертикального расположения используется свойство direction:

<Space direction="vertical">
  <Button>Верхняя кнопка</Button>
  <Button>Нижняя кнопка</Button>
</Space>

Важное свойство:

direction="horizontal" — элементы выстраиваются в ряд (по умолчанию).
direction="vertical" — элементы выстраиваются в колонку.

Управление промежутками

Пространство между элементами настраивается через свойство size, которое может принимать несколько форм:

<Space size="small">
  <Button>Малый</Button>
  <Button>Малый</Button>
</Space>

<Space size="middle">
  <Button>Средний</Button>
  <Button>Средний</Button>
</Space>

<Space size="large">
  <Button>Большой</Button>
  <Button>Большой</Button>
</Space>

Кроме предустановленных значений, можно использовать число в пикселях, чтобы задать точный размер промежутка:

<Space size={40}>
  <Button>Промежуток 40px</Button>
  <Button>Промежуток 40px</Button>
</Space>

Выровнять элементы с помощью `align`

Свойство align позволяет контролировать вертикальное выравнивание элементов при горизонтальном расположении:

<Space align="start">
  <Button>Сверху</Button>
  <Button>Середина</Button>
</Space>

<Space align="center">
  <Button>Центр</Button>
  <Button>Центр</Button>
</Space>

<Space align="end">
  <Button>Снизу</Button>
  <Button>Снизу</Button>
</Space>

Поддерживаемые значения: start, center, end, baseline. Выбор зависит от визуального контекста и типа содержимого.

Разделители между элементами

Space позволяет добавлять визуальные разделители между элементами с помощью свойства split:

<Space split="|">
  <Button>Кнопка 1</Button>
  <Button>Кнопка 2</Button>
  <Button>Кнопка 3</Button>
</Space>

В качестве split можно использовать строку, любой React-элемент или компонент, что обеспечивает гибкость при стилизации интерфейса.

<Space split={<Divider type="vertical" />}>
  <Button>Кнопка 1</Button>
  <Button>Кнопка 2</Button>
  <Button>Кнопка 3</Button>
</Space>

Использование wrap для переноса

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

<Space wrap>
  {Array.from({ length: 10 }).map((_, index) => (
    <Button key={index}>Кнопка {index + 1}</Button>
  ))}
</Space>

Элементы будут переноситься на следующую строку при нехватке места, сохраняя одинаковые промежутки.

Интеграция с другими компонентами

Space отлично сочетается с формами, карточками, иконками, текстом. Пример с формой:

<Space direction="vertical" size="middle">
  <Input placeholder="Имя" />
  <Input placeholder="Фамилия" />
  <Button type="primary">Отправить</Button>
</Space>

Комбинация вертикального направления и контролируемого размера промежутка делает интерфейс аккуратным без необходимости использования CSS маргинов.

Продвинутые возможности

Комбинированные направления Можно создавать вертикальные блоки с горизонтально выстроенными элементами внутри:

<Space direction="vertical" size="large">
  <Space>
    <Button>Левый</Button>
    <Button>Правый</Button>
  </Space>
  <Button>Нижний</Button>
</Space>

Использование с иконками Space облегчает расположение иконок рядом с текстом:

<Space>
  <UserOutlined />
  <span>Профиль</span>
</Space>

Динамические элементы Space автоматически обновляет промежутки при изменении числа дочерних компонентов, что удобно для списков и карт.