Концепция адаптивности в Chakra UI

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

Механизм responsive props

Одним из ключевых инструментов является использование responsive props — специальных свойств, принимающих массивы или объекты для разных точек преломления (breakpoints).

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

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

<Box 
  w={["100%", "75%", "50%", "25%"]} 
  p={[2, 4, 6, 8]} 
  bg="teal.500"
>
  Адаптивный блок
</Box>

Здесь:

  • w задаёт ширину: на мобильных устройствах 100%, на небольших планшетах 75%, на средних экранах 50%, на больших 25%.
  • p — внутренние отступы, которые также меняются в зависимости от размера экрана.

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

<Box 
  w={{ base: "100%", md: "50%", lg: "25%" }} 
  bg="purple.300"
>
  Адаптивный блок
</Box>

В объекте base, sm, md, lg, xl соответствуют стандартным breakpoint’ам Chakra UI:

  • base — по умолчанию, для всех экранов
  • sm — малые устройства
  • md — средние устройства
  • lg — большие устройства
  • xl — очень большие устройства

Использование breakpoints

Breakpoints в Chakra UI определяются в теме и могут быть кастомизированы. По умолчанию они выглядят так:

const theme = {
  breakpoints: {
    sm: "30em",
    md: "48em",
    lg: "62em",
    xl: "80em",
  },
};

1 em ≈ 16px, поэтому sm ≈ 480px. Breakpoints позволяют контролировать поведение компонентов в зависимости от ширины экрана, что обеспечивает гибкость интерфейса.

Адаптивная типографика

Для текста Chakra UI также поддерживает responsive props:

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

<Text fontSize={["sm", "md", "lg", "xl"]} color="gray.700">
  Адаптивный текст
</Text>

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

Адаптивные сетки и Flexbox

Chakra UI предоставляет компоненты SimpleGrid, Grid, Flex, которые полностью поддерживают адаптивность.

Пример SimpleGrid:

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

<SimpleGrid columns={{ base: 1, sm: 2, md: 3, lg: 4 }} spacing={4}>
  <Box bg="red.200" height="100px" />
  <Box bg="green.200" height="100px" />
  <Box bg="blue.200" height="100px" />
  <Box bg="yellow.200" height="100px" />
</SimpleGrid>
  • columns меняет количество колонок в зависимости от ширины экрана.
  • spacing задаёт промежутки между элементами.

Компонент Flex позволяет адаптивно менять направление элементов:

<Flex direction={{ base: "column", md: "row" }} gap={4}>
  <Box bg="pink.300" w="100px" h="100px" />
  <Box bg="cyan.300" w="100px" h="100px" />
</Flex>

На мобильных устройствах блоки будут располагаться вертикально, на средних и больших — горизонтально.

Адаптивное отображение и скрытие элементов

Chakra UI поддерживает свойства display, visibility и hidden с responsive props, что позволяет показывать или скрывать элементы на определённых устройствах:

<Box display={{ base: "none", md: "block" }} bg="teal.200" p={4}>
  Этот блок виден только на экранах >= md
</Box>

Это особенно полезно для навигационных панелей, сайдбаров и элементов интерфейса, которые должны изменять своё присутствие на странице в зависимости от устройства.

Адаптивные изображения и медиа

Компонент Image в Chakra UI может масштабироваться вместе с контейнером, а также поддерживать responsive props:

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

<Image 
  src="example.jpg" 
  boxSize={{ base: "100px", md: "200px", lg: "300px" }} 
  objectFit="cover"
/>

boxSize изменяется в зависимости от ширины экрана, сохраняя пропорции изображения с помощью objectFit.

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

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

const theme = extendTheme({
  sizes: {
    container: {
      sm: "400px",
      md: "800px",
      lg: "1200px",
    },
  },
});

Использование кастомных размеров и breakpoints позволяет создавать единый стиль интерфейса и управлять адаптивностью централизованно.

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

  • Использовать responsive props вместо медиа-запросов в CSS, когда это возможно.
  • Разбивать интерфейс на гибкие контейнеры (Flex, Grid) для упрощения адаптивного поведения.
  • Сохранять логическую читаемость кода: массивы и объекты для responsive props должны быть последовательными и отражать порядок экранов от меньшего к большему.
  • Комбинировать адаптивность с тематикой Chakra UI для единообразного дизайна.

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

Оглавление