Box

Компонент Box является фундаментальным строительным блоком в Chakra UI. По сути, это универсальный контейнер, который может использоваться для создания любых элементов интерфейса, от простых обёрток до сложных макетов. Он наследует все стандартные свойства CSS, а также поддерживает удобные системные пропсы, упрощающие стилизацию и адаптивное оформление.

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

Box поддерживает стандартные CSS-свойства, такие как margin, padding, width, height, display, position, background, color и многие другие. Однако Chakra UI добавляет системные пропсы, которые позволяют задавать стили с использованием сокращённой и более читаемой записи:

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

<Box
  w="200px"       // width
  h="100px"       // height
  bg="teal.500"   // background-color
  color="white"   // text color
  p={4}           // padding
  m={2}           // margin
>
  Пример Box
</Box>

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

  • w, h — ширина и высота, поддерживаются значения в px, %, em, rem.
  • p, pt, pr, pb, pl, px, py — удобные сокращения для padding.
  • m, mt, mr, mb, ml, mx, my — сокращения для margin.
  • bg и color — использование цветовой палитры Chakra UI, включая оттенки.

Адаптивность и медиазапросы

Chakra UI позволяет легко создавать адаптивные интерфейсы с помощью массивов и объектов:

<Box
  w={["100%", "50%", "25%"]} // мобильные устройства, планшеты, десктоп
  p={{ base: 2, md: 4, lg: 6 }} // разные отступы на разных breakpoints
  bg={{ base: "red.200", md: "blue.200", lg: "green.200" }}
>
  Адаптивный Box
</Box>

Принципы работы:

  • Массив [mobile, tablet, desktop] соответствует breakpoints, заданным в теме Chakra.
  • Объект { base, sm, md, lg, xl } позволяет более детально контролировать стили на каждом размере экрана.
  • Любое свойство Box может быть адаптивным.

Позиционирование и отображение

Box может использоваться для управления расположением элементов через свойства display, position, top, left, right, bottom и zIndex:

<Box
  position="absolute"
  top="50px"
  left="50px"
  zIndex={10}
  bg="orange.300"
  w="100px"
  h="100px"
>
  Позиционированный Box
</Box>

Рекомендации:

  • Использовать flex и grid для организации макета вместо ручного позиционирования, если требуется адаптивность.
  • zIndex полезен для наложения элементов, например, модальных окон или всплывающих подсказок.

Flexbox и Grid с Box

Box может выполнять роль контейнера flex или grid без использования отдельного компонента:

<Box display="flex" justifyContent="center" alignItems="center" h="200px">
  <Box w="50px" h="50px" bg="red.500" />
  <Box w="50px" h="50px" bg="blue.500" />
</Box>

<Box display="grid" gridTemplateColumns="repeat(3, 1fr)" gap={4}>
  <Box bg="yellow.400" h="50px" />
  <Box bg="green.400" h="50px" />
  <Box bg="pink.400" h="50px" />
</Box>

Преимущества:

  • Полная поддержка CSS-свойств flex и grid.
  • Простая интеграция с адаптивными пропсами.
  • Универсальность: один и тот же Box может быть контейнером и элементом.

Тема и стилизация

Box интегрируется с темой Chakra, что позволяет использовать предопределённые цвета, шрифты, размеры и радиусы:

<Box
  bg="purple.500"
  color="white"
  borderRadius="md"
  shadow="lg"
  p={4}
>
  Box с темой
</Box>
  • borderRadius — sm, md, lg, full или числовое значение.
  • shadow — predefined тени (sm, md, lg, xl, 2xl).
  • Цвета и размеры автоматически подстраиваются под конфигурацию темы.

События и интерактивность

Box может реагировать на события, такие как onClick, onMouseEnter, onMouseLeave и др.:

<Box
  w="150px"
  h="150px"
  bg="blue.400"
  _hover={{ bg: "blue.600", cursor: "pointer" }}
  onCl ick={() => alert("Box кликнут!")}
>
  Hover и Click
</Box>

Особенности псевдоклассов Chakra:

  • _hover, _focus, _active, _disabled — для интерактивных состояний.
  • _before, _after — для вставки псевдоэлементов.
  • Использование _dark и _light для поддержки темной/светлой темы.

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

Box часто используется как обёртка для других компонентов Chakra или кастомных элементов:

<Box p={6} borderWidth={1} borderRadius="lg" overflow="hidden">
  <Box fontWeight="bold" fontSize="xl" mb={2}>
    Заголовок
  </Box>
  <Box color="gray.500">
    Контент внутри Box с padding и границей
  </Box>
</Box>
  • Позволяет создавать карточки, панели и секции интерфейса.
  • Упрощает контроль отступов, фона и рамок без необходимости писать отдельные CSS-классы.

Итоговые возможности Box

  • Универсальный контейнер для макета и стилизации.
  • Поддержка всех CSS-свойств через пропсы.
  • Адаптивность через массивы и объекты.
  • Полная интеграция с темой Chakra UI.
  • Возможность интерактивных состояний и псевдоклассов.
  • Использование flex, grid и позиционирования для сложных макетов.

Box — это сердце построения интерфейсов в Chakra UI, позволяющее быстро создавать чистые и адаптивные компоненты без избыточного CSS.

Оглавление