Wrap

Компонент Wrap в Chakra UI предназначен для удобного расположения элементов в строке с автоматическим переносом на следующую линию, когда пространство ограничено. Это особенно полезно для списков карточек, кнопок, тегов и любых компонентов, которые должны выстраиваться в ряды с гибкой адаптацией под ширину контейнера.

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

Основная структура

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

function Example() {
  return (
    <Wrap spacing="30px">
      <WrapItem>
        <Box w="100px" h="100px" bg="teal.500" />
      </WrapItem>
      <WrapItem>
        <Box w="100px" h="100px" bg="orange.500" />
      </WrapItem>
      <WrapItem>
        <Box w="100px" h="100px" bg="purple.500" />
      </WrapItem>
    </Wrap>
  );
}

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

  • Wrap — контейнер для элементов.
  • WrapItem — оборачивает каждый дочерний элемент, чтобы управлять отступами и поведением при переносе.
  • spacing — определяет промежуток между элементами, может задаваться в пикселях, единицах rem или по шкале Chakra (spacing="4").

Свойства компонента Wrap

1. spacing

Определяет расстояние между WrapItem. Может задаваться через:

  • пиксели: spacing="20px"
  • Chakra scale: spacing={4} (равно 1rem)
  • комбинированно: допустимы медиазапросы через responsive array

Пример:

<Wrap spacing={[2, 4, 6]}>
  <WrapItem><Box w="50px" h="50px" bg="red.400" /></WrapItem>
  <WrapItem><Box w="50px" h="50px" bg="blue.400" /></WrapItem>
</Wrap>

Массив [2, 4, 6] задаёт разные значения spacing для мобильного, планшета и десктопа.

2. direction

Управляет направлением расположения элементов:

  • row (по умолчанию) — горизонтальный ряд
  • column — вертикальное расположение с переносом

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

<Wrap direction="column" spacing="20px">
  <WrapItem><Box w="80px" h="80px" bg="green.400" /></WrapItem>
  <WrapItem><Box w="80px" h="80px" bg="pink.400" /></WrapItem>
</Wrap>

3. align и justify

Управляют выравниванием элементов внутри контейнера:

  • align — выравнивание по вертикали (top, center, bottom, stretch)
  • justify — выравнивание по горизонтали (start, center, end, space-between, space-around, space-evenly)

Пример:

<Wrap align="center" justify="space-between" spacing="10px">
  <WrapItem><Box w="60px" h="60px" bg="yellow.400" /></WrapItem>
  <WrapItem><Box w="60px" h="60px" bg="blue.400" /></WrapItem>
  <WrapItem><Box w="60px" h="60px" bg="red.400" /></WrapItem>
</Wrap>

4. shouldWrapChildren

Флаг, который автоматически оборачивает всех прямых детей в WrapItem.

Пример:

<Wrap spacing="15px" shouldWrapChildren>
  <Box w="70px" h="70px" bg="purple.300" />
  <Box w="70px" h="70px" bg="teal.300" />
</Wrap>

Преимущество: нет необходимости вручную добавлять WrapItem для каждого ребенка.

Практические сценарии

Список кнопок

<Wrap spacing="12px">
  {['Применить', 'Сбросить', 'Отменить', 'Сохранить'].map((label) => (
    <WrapItem key={label}>
      <Button colorScheme="blue">{label}</Button>
    </WrapItem>
  ))}
</Wrap>

Галерея карточек

<Wrap spacing="20px">
  {Array.from({ length: 8 }).map((_, idx) => (
    <WrapItem key={idx}>
      <Box w="150px" h="150px" bg={`gray.${100 + idx * 100}`} borderRadius="md" />
    </WrapItem>
  ))}
</Wrap>

Теги или чипсы

<Wrap spacing="8px">
  {['React', 'JavaScript', 'Chakra UI', 'CSS', 'HTML'].map((tag) => (
    <WrapItem key={tag}>
      <Badge colorScheme="green">{tag}</Badge>
    </WrapItem>
  ))}
</Wrap>

Комбинирование с responsive стилями

Wrap отлично работает с адаптивными массивами Chakra UI:

<Wrap spacing={[2, 4, 6]} justify={['center', 'space-between', 'flex-start']}>
  {Array.from({ length: 6 }).map((_, i) => (
    <WrapItem key={i}>
      <Box w={['50px', '70px', '100px']} h={['50px', '70px', '100px']} bg="blue.200" />
    </WrapItem>
  ))}
</Wrap>

В этом примере:

  • spacing, justify и размеры элементов меняются в зависимости от ширины экрана.
  • Wrap автоматически перестраивает ряды при переносе на мобильных устройствах.

Особенности использования

  • Wrap наследует поведение flexbox, но добавляет удобный перенос с равными промежутками.
  • Используется совместно с WrapItem, но можно включить shouldWrapChildren для автоматической обертки.
  • Работает с адаптивными массивами для spacing, размеров и выравнивания.
  • Идеален для кнопок, тегов, карточек и любых повторяющихся элементов.

Советы по оптимизации

  1. При большом количестве элементов использовать shouldWrapChildren для сокращения кода.
  2. Для одинаковых размеров карточек использовать массив Box с одинаковой шириной и высотой, чтобы избежать визуальных сдвигов.
  3. Использовать адаптивные свойства spacing и justify для корректного отображения на всех устройствах.
  4. Комбинировать с Box и Badge для быстрого создания интерфейсных компонентов без лишней разметки.

Компонент Wrap в Chakra UI обеспечивает гибкую и чистую организацию элементов с автоматическим переносом, делая интерфейсы аккуратными и адаптивными без сложной работы с CSS.

Оглавление