Stack для вертикальной и горизонтальной компоновки

Stack — это компонент библиотеки MUI (Material-UI), предназначенный для упрощённого создания вертикальных и горизонтальных макетов без необходимости использовать сложные CSS-сетки или flexbox вручную. Он оборачивает дочерние элементы и автоматически управляет их расположением и промежутками.

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

  • direction Определяет направление компоновки элементов. Может принимать значения:

    • "row" — горизонтальная компоновка, элементы выстраиваются слева направо;
    • "column" — вертикальная компоновка, элементы располагаются сверху вниз (значение по умолчанию);
    • "row-reverse" и "column-reverse" — зеркальное отображение по оси.

Пример:

import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';

<Stack direction="row" spacing={2}>
  <Button>Кнопка 1</Button>
  <Button>Кнопка 2</Button>
  <Button>Кнопка 3</Button>
</Stack>

В данном примере кнопки выстроятся горизонтально с промежутком между ними.

  • spacing Задаёт расстояние между дочерними элементами. Принимает числовые значения, которые соответствуют кратности базового шага темы MUI (по умолчанию 8px). Пример:
<Stack spacing={4} direction="column">
  <Button>Кнопка A</Button>
  <Button>Кнопка B</Button>
</Stack>

Здесь элементы будут разделены 32px (8px * 4).

  • alignItems Контролирует выравнивание элементов по перпендикулярной оси. Основные варианты:

    • "flex-start" — по началу контейнера;
    • "center" — по центру;
    • "flex-end" — по концу;
    • "stretch" — растягивание на всю высоту/ширину контейнера.

Пример для вертикального стека:

<Stack direction="column" spacing={2} alignItems="center">
  <Button>Центрированная кнопка 1</Button>
  <Button>Центрированная кнопка 2</Button>
</Stack>

  • justifyContent Управляет распределением элементов вдоль основной оси. Поддерживает все стандартные значения flexbox:

    • "flex-start", "center", "flex-end", "space-between", "space-around", "space-evenly".
<Stack direction="row" spacing={2} justifyContent="space-between">
  <Button>Левая</Button>
  <Button>Центр</Button>
  <Button>Правая</Button>
</Stack>

Вложенные стеки

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

<Stack spacing={4}>
  <Stack direction="row" spacing={2}>
    <Button>Кнопка 1</Button>
    <Button>Кнопка 2</Button>
  </Stack>
  <Stack direction="row" spacing={2} justifyContent="center">
    <Button>Кнопка 3</Button>
    <Button>Кнопка 4</Button>
  </Stack>
</Stack>

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

Использование свойства divider

Для визуального разделения элементов Stack можно использовать компонент Divider из MUI. Stack автоматически вставляет его между элементами:

import Divider from '@mui/material/Divider';

<Stack direction="row" spacing={2} divider={<Divider orientation="vertical" flexItem />}>
  <Button>Элемент 1</Button>
  <Button>Элемент 2</Button>
  <Button>Элемент 3</Button>
</Stack>

Для вертикального стека orientation="horizontal" создаст разделительные линии между строками.

Stack и responsive-дизайн

Свойство direction может принимать объект с брейкпоинтами, что позволяет менять ориентацию стека в зависимости от ширины экрана:

<Stack
  direction={{ xs: 'column', sm: 'row' }}
  spacing={2}
>
  <Button>Мобильная кнопка 1</Button>
  <Button>Мобильная кнопка 2</Button>
</Stack>

На маленьких экранах элементы будут вертикальными, а на больших — горизонтальными.

Дополнительные полезные свойства

  • flexWrap — задаёт перенос элементов, полезно для горизонтальных стеков с множеством элементов.
  • sx — позволяет добавлять кастомные стили, не создавая отдельный CSS-класс.
<Stack direction="row" spacing={2} sx={{ backgroundColor: 'lightgray', padding: 2 }}>
  <Button>Стиль 1</Button>
  <Button>Стиль 2</Button>
</Stack>

Оптимизация и производительность

Stack компилируется в обычный flex-контейнер, что делает его лёгким и быстрым. В отличие от Grid, он удобен для простых последовательностей элементов, где не требуется сложная сетка.

Ключевые рекомендации:

  • Использовать Stack для однонаправленных макетов.
  • Не перегружать Stack глубокой вложенностью, если требуется сложная сетка — лучше Grid.
  • Комбинировать spacing, divider, alignItems и justifyContent для максимально точного управления расположением.

Stack обеспечивает быстрый, гибкий и понятный способ управления пространством между элементами интерфейса, делая код чище и уменьшает необходимость писать кастомный CSS для большинства типовых задач по компоновке.

Оглавление