Адаптивные значения в теме

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

Массивы для медиазапросов

Наиболее распространённый способ задания адаптивных значений — массив. Каждый элемент массива соответствует определённой точке останова (breakpoint), определённой в теме. Пример:

<Box 
  w={['100%', '75%', '50%', '25%']}
  p={['2', '4', '6', '8']}
>
  Контент
</Box>
  • '100%' — значение для базового (mobile-first) размера экрана.
  • '75%' — для первого breakpoin’та (обычно sm).
  • '50%' — для следующего breakpoin’та (md).
  • '25%' — для больших экранов (lg и выше).

Если массив содержит меньше элементов, чем точек останова, последнее значение используется для всех оставшихся.

Объекты для именованных breakpoints

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

<Box
  w={{ base: '100%', md: '50%', lg: '25%' }}
  p={{ base: '2', md: '6' }}
>
  Контент
</Box>
  • base — значение по умолчанию для всех устройств.
  • sm, md, lg, xl — соответствуют именованным точкам останова в теме.
  • Неуказанные breakpoints наследуют ближайшее предыдущее значение.

Объектный синтаксис обеспечивает лучшее понимание и читаемость, особенно при большом количестве breakpoints.

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

Тема Chakra UI позволяет задавать адаптивные значения не только для компонентов, но и для собственных стилей темы. Например, в theme.js можно определить размеры шрифтов, отступов или цветов для разных breakpoints:

const theme = extendTheme({
  sizes: {
    container: {
      base: "100%",
      md: "720px",
      lg: "960px",
      xl: "1200px",
    },
  },
  fontSizes: {
    heading: {
      base: "2xl",
      md: "3xl",
      lg: "4xl",
    },
  },
});

Это позволяет использовать эти значения в компонентах через системные свойства:

<Heading fontSize="heading">
  Заголовок
</Heading>

Chakra автоматически подставит нужный размер шрифта в зависимости от ширины экрана.

Адаптивные свойства для стилей

Практически любое свойство Chakra UI можно сделать адаптивным:

  • Размеры и отступы: w, h, p, m, px, py
  • Шрифты: fontSize, lineHeight, letterSpacing
  • Цвета и фон: color, bg, borderColor
  • Гибкость контейнера: flexDirection, alignItems, justifyContent, gap

Пример с адаптивным макетом:

<Flex 
  direction={{ base: 'column', md: 'row' }} 
  gap={{ base: 4, md: 8 }}
>
  <Box flex="1" bg="blue.100" p={4}>Левый блок</Box>
  <Box flex="2" bg="green.100" p={4}>Правый блок</Box>
</Flex>
  • На мобильных устройствах блоки будут расположены в колонку, с отступом 4.
  • На экранах от md и выше блоки становятся рядом, с отступом 8.

Интеграция с useBreakpointValue

Для логики компонентов, зависящей от размера экрана, Chakra предлагает хук useBreakpointValue:

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

const fontSize = useBreakpointValue({ base: "sm", md: "lg", lg: "xl" });

<Text fontSize={fontSize}>
  Адаптивный текст
</Text>

Хук возвращает значение для текущего breakpoints, что позволяет использовать адаптивные значения не только в JSX, но и в логике компонентов, например, для выбора видимости элементов, размеров или анимаций.

Вложенные адаптивные значения

Можно комбинировать адаптивные значения для нескольких свойств одновременно:

<Box
  w={{ base: "100%", md: "50%" }}
  h={{ base: "200px", lg: "400px" }}
  bg={{ base: "red.200", md: "blue.200" }}
>
  Многоуровневая адаптация
</Box>
  • Ширина меняется с 100% до 50% на md и выше.
  • Высота увеличивается с 200px на base до 400px на lg.
  • Цвет фона переключается между красным и синим на md.

Советы по использованию

  • Массивы удобны для коротких адаптаций, объекты — для ясного контроля и именованных breakpoints.
  • Использовать base всегда, чтобы задать значение по умолчанию.
  • Для сложных макетов сочетать адаптивные свойства с Flex и Grid, чтобы полностью управлять компоновкой.
  • Хук useBreakpointValue полезен для условного рендеринга компонентов или динамических стилей.

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

Оглавление