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

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

Базовая структура адаптивного пропса выглядит так:

<Box
  width={['100%', '75%', '50%']}
  padding={['2', '4', '6']}
>
  Контент
</Box>

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

  1. Первый элемент массива — стиль для мобильных устройств (base).
  2. Второй элемент — стиль для планшетов (sm или md в зависимости от темы).
  3. Третий элемент — для десктопов (lg и выше).

Можно использовать также объектный синтаксис для более явного указания:

<Box
  width={{ base: '100%', md: '50%', lg: '33%' }}
  padding={{ base: 2, md: 4, lg: 6 }}
>
  Контент
</Box>

Это особенно удобно, когда нужно менять стили не по порядку, а для конкретного брейкпоинта.

Настройка брейкпоинтов

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

const theme = extendTheme({
  breakpoints: {
    sm: '30em',  // 480px
    md: '48em',  // 768px
    lg: '62em',  // 992px
    xl: '80em',  // 1280px
    '2xl': '96em', // 1536px
  },
})

Можно добавить собственные брейкпоинты или изменить существующие, чтобы адаптировать интерфейс под конкретные устройства.

Responsive props для текста и типографики

Chakra UI позволяет управлять размером шрифта, межстрочным интервалом и весом текста в зависимости от размера экрана:

<Text
  fontSize={{ base: 'sm', md: 'md', lg: 'lg' }}
  lineHeight={{ base: 'short', md: 'base', lg: 'tall' }}
  fontWeight={{ base: '400', md: '500', lg: '600' }}
>
  Адаптивный текст
</Text>

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

Адаптивные Flex и Grid

Chakra UI интегрирует адаптивность в Flex и Grid компоненты, что позволяет менять направление, отступы и размеры элементов:

<Flex
  direction={{ base: 'column', md: 'row' }}
  gap={{ base: 2, md: 4 }}
>
  <Box flex="1" bg="blue.200">Элемент 1</Box>
  <Box flex="1" bg="green.200">Элемент 2</Box>
</Flex>

Для Grid:

<Grid
  templateColumns={{ base: 'repeat(1, 1fr)', md: 'repeat(3, 1fr)' }}
  gap={4}
>
  <Box bg="red.200">1</Box>
  <Box bg="yellow.200">2</Box>
  <Box bg="teal.200">3</Box>
</Grid>

Это позволяет динамически изменять количество колонок и отступы без медиа-запросов.

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

Иногда нужно применять адаптивные значения не только в JSX, но и в логике компонентов. Для этого Chakra UI предоставляет хук useBreakpointValue:

import { useBreakpointValue, Box } from '@chakra-ui/react'

const ResponsiveComponent = () => {
  const padding = useBreakpointValue({ base: 2, md: 6, lg: 10 })

  return <Box p={padding}>Контент с адаптивным паддингом</Box>
}

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

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

Chakra UI поддерживает пропсы display и visibility в адаптивной форме:

<Box display={{ base: 'none', md: 'block' }}>
  Только для планшетов и десктопов
</Box>

Также можно использовать готовые компоненты Hide и Show:

import { Hide, Show, Box } from '@chakra-ui/react'

<Hide below="md">
  <Box>Скрыт на мобильных</Box>
</Hide>

<Show above="md">
  <Box>Показывается на планшетах и десктопах</Box>
</Show>

Эти компоненты оборачивают display и делают код более семантичным.

Адаптивные темы и цвета

Цветовые схемы и тема также могут быть адаптивными:

<Box
  bg={{ base: 'gray.100', md: 'gray.200', lg: 'gray.300' }}
  color={{ base: 'black', md: 'blue.800' }}
>
  Адаптивный фон и цвет текста
</Box>

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

Комбинирование всех подходов

Для комплексных интерфейсов Chakra UI позволяет комбинировать responsive props, useBreakpointValue, Flex/Grid и адаптивные темы. Например:

<Flex
  direction={{ base: 'column', lg: 'row' }}
  gap={{ base: 2, md: 4 }}
  bg={{ base: 'gray.50', lg: 'gray.100' }}
  p={useBreakpointValue({ base: 4, md: 6 })}
>
  <Box flex={1}>Контент 1</Box>
  <Box flex={1}>Контент 2</Box>
</Flex>

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

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

Оглавление