Массивы значений для breakpoints

Chakra UI предоставляет мощный механизм для построения адаптивного интерфейса с использованием breakpoints. Одной из ключевых особенностей является возможность задавать массивы значений для стилей, которые автоматически распределяются по определённым точкам останова (breakpoints). Это позволяет создавать гибкий и удобный responsive-дизайн без необходимости писать медиа-запросы вручную.

Основная концепция

В Chakra UI любой пропс, который поддерживает responsive-значения, может быть представлен как:

  • Одиночное значение – применяется ко всем размерам экрана одинаково.
  • Массив значений – распределяется по breakpoints по порядку.

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

<Box fontSize={['12px', '14px', '16px', '18px']}>
  Пример текста
</Box>

В этом случае:

  1. '12px' — значение для базового размера (mobile-first, smallest breakpoint)
  2. '14px' — для следующего breakpoints (sm)
  3. '16px' — для md
  4. '18px' — для lg и выше

Важно: Chakra UI использует mobile-first стратегию, поэтому массив обрабатывается по принципу «снизу вверх»: если значение не указано для более крупного breakpoint, оно наследуется от предыдущего.

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

Массивы можно применять практически ко всем style-пропсам: padding, margin, width, height, display, gridTemplateColumns и др.

<Box
  p={[2, 4, 6, 8]}
  w={['100%', '80%', '60%', '40%']}
  display={['block', 'flex']}
>
  Контент
</Box>

Разбор:

  • p={[2, 4, 6, 8]} — padding увеличивается с ростом экрана.
  • w={['100%', '80%', '60%', '40%']} — ширина контейнера адаптируется под размеры экрана.
  • display={['block', 'flex']} — на маленьких экранах блок, на больших — flex-контейнер. Если массив короче числа breakpoints, оставшиеся значения наследуются автоматически.

Связь массивов с темой и breakpoints

Breakpoints задаются в теме Chakra UI:

const theme = extendTheme({
  breakpoints: {
    sm: '30em',
    md: '48em',
    lg: '62em',
    xl: '80em',
  },
})

Массив [val1, val2, val3, val4] будет соответствовать:

  1. val1 → base (до sm)
  2. val2 → sm и выше
  3. val3 → md и выше
  4. val4 → lg и выше

При необходимости можно пропускать значения, используя null:

<Box fontSize={['12px', null, '16px', '18px']}>
  Пример текста
</Box>

Здесь значение fontSize для sm будет наследовано от base (12px), а для md и lg устанавливаются соответственно.

Комбинация массивов с объектами

Иногда удобнее использовать объекты для именованных breakpoints:

<Box fontSize={{ base: '12px', md: '16px', lg: '18px' }}>
  Текст
</Box>

Разница между массивом и объектом:

  • Массив – проще для последовательных breakpoints.
  • Объект – удобно задавать значения для конкретных точек, пропуская промежуточные.

Практические примеры

1. Адаптивная сетка:

<Grid templateColumns={['repeat(1, 1fr)', 'repeat(2, 1fr)', 'repeat(4, 1fr)']} gap={4}>
  <Box bg="red.300" height="100px" />
  <Box bg="green.300" height="100px" />
  <Box bg="blue.300" height="100px" />
  <Box bg="yellow.300" height="100px" />
</Grid>

Сетка автоматически меняет число колонок в зависимости от ширины экрана:

  • 1 колонка на мобильных
  • 2 колонки на sm
  • 4 колонки на md и выше

2. Адаптивные отступы:

<Stack spacing={[2, 4, 6]} direction={['column', 'row']}>
  <Button>Кнопка 1</Button>
  <Button>Кнопка 2</Button>
</Stack>
  • spacing увеличивается с ростом экрана.
  • direction меняется с вертикальной на горизонтальную.

Важные нюансы

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

Заключение по практике массивов

Массивы значений для breakpoints — это ключевой инструмент Chakra UI для построения responsive интерфейсов. Они позволяют:

  • Контролировать стили без CSS-медиа-запросов.
  • Минимизировать повторение кода.
  • Использовать принципы mobile-first разработки.
  • Легко комбинировать с объектной записью для более точного контроля.

Массивы работают с любыми стилевыми пропсами и являются стандартным подходом к адаптивному дизайну в Chakra UI.

Оглавление