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

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

Использование массивов для адаптивных значений

Chakra UI позволяет задавать значения пропсов как массив, где каждый элемент соответствует конкретному брейкпоинту. Брейкпоинты по умолчанию следующие:

const breakpoints = {
  sm: "30em",  // 480px
  md: "48em",  // 768px
  lg: "62em",  // 992px
  xl: "80em",  // 1280px
  "2xl": "96em" // 1536px
};

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

<Box
  p={[2, 4, 6, 8]}
>
  Адаптивный отступ
</Box>

Здесь p задаёт внутренние отступы (padding), где:

  • 2 — для экранов меньше sm,
  • 4 — для sm и выше,
  • 6 — для md и выше,
  • 8 — для lg и выше.

Важно: Массив применяется последовательно по брейкпоинтам, начиная с самого маленького. Chakra автоматически подставляет ближайшее доступное значение, если текущий брейкпоинт выходит за предел массива.

Использование объектной формы для брейкпоинтов

Альтернативно, можно использовать объект, где ключи соответствуют брейкпоинтам:

<Box
  mt={{ base: 2, md: 4, lg: 6 }}
>
  Верхний отступ с объектной адаптацией
</Box>
  • base — базовое значение для всех экранов, если не указано иное.
  • md, lg — значения для соответствующих брейкпоинтов.

Объектная форма даёт более явный контроль над стилями на конкретных размерах экранов и часто удобнее при больших интерфейсах.

Масштабируемые единицы и тема

Chakra UI использует тематические значения, что облегчает поддержку единообразного дизайна:

  • spacing — отступы (m, p, mt, mb, px, py)
  • sizes — ширина и высота компонентов (w, h, minW, maxW, minH, maxH)
  • fontSizes — размеры шрифтов
  • radii — скругления углов (borderRadius)

Пример использования тематических размеров:

<Box
  w={{ base: "100%", md: "50%" }}
  p={4}
  borderRadius="md"
>
  Адаптивная ширина и скругления
</Box>

Здесь w меняется с 100% на 50% при переходе на средние экраны, а borderRadius="md" использует значение из темы, обеспечивая единообразие по всему проекту.

Комбинирование адаптивных отступов и размеров

Часто требуется комбинировать отступы и размеры для полной адаптивной верстки:

<Flex
  direction={{ base: "column", md: "row" }}
  p={{ base: 2, md: 6 }}
  gap={{ base: 2, md: 4 }}
>
  <Box flex="1" h={{ base: "100px", md: "200px" }} bg="blue.200" />
  <Box flex="2" h={{ base: "100px", md: "200px" }} bg="green.200" />
</Flex>
  • direction меняется с вертикального на горизонтальное расположение.
  • p и gap подстраиваются под размер экрана.
  • Высота блоков (h) изменяется для разных брейкпоинтов.

Такой подход позволяет создавать интерфейсы, которые естественно масштабируются без необходимости писать медиазапросы вручную.

Адаптивные размеры шрифтов и иконок

Шрифты и иконки тоже можно адаптировать:

<Text fontSize={{ base: "sm", md: "md", lg: "xl" }}>
  Адаптивный текст
</Text>

<Icon
  as={MdHome}
  boxSize={{ base: 4, md: 6, lg: 8 }}
/>
  • fontSize и boxSize изменяются в зависимости от ширины экрана.
  • Использование тематических значений (sm, md, xl) обеспечивает согласованность дизайна.

Практические рекомендации

  1. Использовать масштабируемые значения из темы, чтобы сохранять консистентность.
  2. Предпочитать массивы для простых случаев и объекты для более сложной адаптивной логики.
  3. Комбинировать адаптивные отступы, размеры и направления (например, Flex и Grid) для создания полностью отзывчивых макетов.
  4. Минимизировать жестко заданные значения (px, em) вне темы, чтобы облегчить поддержку интерфейса.

Адаптивная система Chakra UI позволяет полностью отказаться от ручного написания медиазапросов, сохраняя при этом гибкость и масштабируемость. Использование массивов и объектной формы для пропсов делает интерфейсы естественно отзывчивыми и поддерживает единый стиль проекта.

Оглавление