Stack, HStack, VStack

В библиотеке Chakra UI Stack является мощным компонентом для управления вертикальным или горизонтальным расположением элементов с равными промежутками. Он упрощает создание макетов, устраняя необходимость вручную задавать отступы между дочерними компонентами. В основе лежит концепция flex-контейнера, но с удобным API для типичных сценариев верстки.

Компонент Stack

Stack — это базовый контейнер, который позволяет располагать дочерние элементы вертикально или горизонтально, управляя их промежутками через проп spacing. По умолчанию Stack является вертикальным контейнером, но направление можно изменить через проп direction.

Пример вертикального Stack:

import { Stack, Box } from "@chakra-ui/react";

function Example() {
  return (
    <Stack spacing={4}>
      <Box bg="tomato" p={4} color="white">Элемент 1</Box>
      <Box bg="green.500" p={4} color="white">Элемент 2</Box>
      <Box bg="blue.500" p={4} color="white">Элемент 3</Box>
    </Stack>
  );
}

Ключевые моменты:

  • spacing задаёт расстояние между элементами.
  • Дочерние элементы получают равномерные отступы без использования margin.
  • direction может быть 'column' (по умолчанию) или 'row'.
<Stack direction="row" spacing={6}>
  ...
</Stack>

HStack — горизонтальный Stack

HStack — это специализированная версия Stack с фиксированным направлением 'row'. Используется для горизонтального выравнивания элементов.

Пример использования HStack:

import { HStack, Button } from "@chakra-ui/react";

function ExampleHStack() {
  return (
    <HStack spacing={3} align="center">
      <Button colorScheme="teal">Кнопка 1</Button>
      <Button colorScheme="blue">Кнопка 2</Button>
      <Button colorScheme="pink">Кнопка 3</Button>
    </HStack>
  );
}

Особенности HStack:

  • Горизонтальное расположение элементов по умолчанию.
  • align позволяет выравнивать элементы по вертикали (start, center, end, stretch).
  • Поддерживает spacing для управления промежутками между элементами.
  • Можно комбинировать с wrap через shouldWrapChildren или оборачивая в Wrap для адаптивного поведения.

VStack — вертикальный Stack

VStack — это аналог HStack, но с вертикальным расположением (direction="column"). Используется для вертикальных списков или вертикально ориентированных компонентов.

Пример VStack:

import { VStack, Box, Text } from "@chakra-ui/react";

function ExampleVStack() {
  return (
    <VStack spacing={5} align="stretch">
      <Box bg="red.300" p={4}>Элемент 1</Box>
      <Box bg="green.300" p={4}>Элемент 2</Box>
      <Box bg="blue.300" p={4}>Элемент 3</Box>
    </VStack>
  );
}

Особенности VStack:

  • Вертикальное расположение дочерних элементов.
  • align управляет горизонтальным выравниванием (start, center, end, stretch).
  • Удобен для создания форм, карточек и вертикальных меню.

Пропсы Stack, HStack и VStack

Проп Описание Применение
spacing Расстояние между дочерними элементами Все Stack компоненты
direction 'row' | 'column' | 'row-reverse' | 'column-reverse' Только Stack (HStack и VStack фиксированы)
align Вертикальное/горизонтальное выравнивание HStack (вертикальное) / VStack (горизонтальное)
justify Выравнивание по основной оси Все Stack компоненты
wrap Позволяет переносить элементы на новую строку Stack + flexWrap
shouldWrapChildren Автоматическая обертка дочерних элементов в Box Все Stack компоненты

Комбинирование Stack с другими компонентами

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

Пример формы с Stack:

import { Stack, Input, Button, FormLabel, FormControl } from "@chakra-ui/react";

function FormExample() {
  return (
    <Stack spacing={4} maxW="400px" mx="auto">
      <FormControl>
        <FormLabel>Имя</FormLabel>
        <Input placeholder="Введите имя" />
      </FormControl>
      <FormControl>
        <FormLabel>Email</FormLabel>
        <Input type="email" placeholder="Введите email" />
      </FormControl>
      <Button colorScheme="teal">Отправить</Button>
    </Stack>
  );
}

Резюме по использованию Stack, HStack и VStack

  • Stack — универсальный контейнер, направление можно менять через direction.
  • HStack — упрощает горизонтальное расположение элементов.
  • VStack — упрощает вертикальное расположение элементов.
  • Все компоненты используют spacing для равномерных отступов, align и justify для выравнивания.
  • Поддержка автоматической обертки и адаптивного поведения через wrap и shouldWrapChildren.
  • Идеально интегрируется с другими компонентами Chakra UI для построения форм, панелей, карточек и адаптивных интерфейсов.

Эти компоненты существенно упрощают создание чистых и предсказуемых макетов без ручного управления CSS margin/padding, делая код более читаемым и поддерживаемым.

Оглавление