Объектная нотация для breakpoints

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

Определение breakpoints

Breakpoints в Chakra UI задаются в объекте темы (theme) в разделе breakpoints:

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

Каждое значение задаёт минимальную ширину экрана, начиная с которой будут применяться стили для соответствующего брейкпоинта. Важно, что Chakra UI использует mobile-first подход, то есть стили применяются сначала к маленьким экранам, а затем расширяются для больших.

Синтаксис объектной нотации

Объектная нотация позволяет задавать стили сразу для нескольких брейкпоинтов, используя ключи с именами breakpoints. Пример для компонента Box:

<Box
  w={{ base: "100%", md: "50%", lg: "25%" }}
  p={{ base: 2, md: 4, lg: 6 }}
  bg={{ base: "gray.100", md: "gray.200", lg: "gray.300" }}
>
  Контент
</Box>

Разбор примера:

  • base — значение для всех экранов по умолчанию.
  • md — применяется при ширине >= 768px.
  • lg — применяется при ширине >= 992px.
  • Таким образом, компонент плавно изменяет ширину, отступы и фон при переходе на большие экраны.

Поддержка всех свойств

Объектная нотация работает со всеми стилевыми свойствами Chakra UI, включая:

  • Размеры: w, h, minW, maxW, minH, maxH.
  • Отступы: m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py.
  • Цвета и фон: color, bg, bgGradient, borderColor.
  • Шрифты и текст: fontSize, lineHeight, letterSpacing, fontWeight.
  • Границы и тени: borderRadius, borderWidth, borderStyle, boxShadow.

Например:

<Text
  fontSize={{ base: "sm", md: "md", lg: "lg" }}
  color={{ base: "red.500", md: "blue.500", lg: "green.500" }}
  lineHeight={{ base: "short", md: "shorter", lg: "shortest" }}
>
  Адаптивный текст
</Text>

Вложенные объекты и псевдоклассы

Объектная нотация может использоваться внутри псевдоклассов (_hover, _focus, _active) и вложенных объектов:

<Button
  bg={{ base: "gray.200", md: "gray.400", lg: "gray.600" }}
  _hover={{
    bg: { base: "gray.300", md: "gray.500", lg: "gray.700" }
  }}
  _active={{
    transform: { base: "scale(0.95)", md: "scale(0.98)" }
  }}
>
  Кнопка
</Button>

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

Преимущества объектной нотации

  1. Ясность и читаемость — все адаптивные значения видны в одном месте.
  2. Отсутствие медиазапросов вручную — Chakra UI автоматически создаёт CSS с медиазапросами.
  3. Универсальность — подходит для любых свойств и псевдоклассов.
  4. Mobile-first подход — гарантирует корректное поведение на всех устройствах.

Примеры комплексного использования

Сетка карточек:

<SimpleGrid
  columns={{ base: 1, sm: 2, md: 3, lg: 4 }}
  spacing={{ base: 2, md: 4, lg: 6 }}
>
  {cards.map(card => (
    <Box key={card.id} bg="white" p={{ base: 4, md: 6 }}>
      {card.content}
    </Box>
  ))}
</SimpleGrid>

Адаптивная панель навигации:

<Flex
  direction={{ base: "column", md: "row" }}
  align={{ base: "stretch", md: "center" }}
  justify={{ base: "flex-start", md: "space-between" }}
  p={{ base: 2, md: 4 }}
>
  <Logo />
  <MenuLinks />
</Flex>

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

  • Для простых изменений достаточно base и одного брейкпоинта (md или lg).
  • Для сложных макетов лучше явно указывать все нужные брейкпоинты.
  • Можно комбинировать массивную и объектную нотацию, но объектная даёт большую читаемость:
<Box
  w={["100%", "50%", "33.33%", "25%"]}       // массивная нотация
  p={{ base: 2, md: 4, lg: 6 }}             // объектная нотация
>
  Контент
</Box>
  • Использование theme.breakpoints позволяет создавать динамические стили, привязанные к единым значениям ширины экрана, облегчая поддержку проекта.

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

Оглавление