Мобильный подход Mobile First

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

Адаптивные пропсы

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

Массивы для адаптивности:

<Box
  fontSize={['sm', 'md', 'lg', 'xl']} // смартфон, планшет, десктоп, большой экран
  p={['2', '4', '6', '8']}
>
  Контент
</Box>

Здесь первый элемент массива соответствует самой маленькой ширине экрана, а последующие – увеличивающимся брейкпоинтам. Такой подход упрощает проектирование интерфейсов, начиная с мобильной версии.

Объекты брейкпоинтов:

<Box
  fontSize={{ base: 'sm', md: 'lg', lg: 'xl' }}
  p={{ base: '2', md: '4', lg: '6' }}
>
  Контент
</Box>

Использование объектов делает код более читаемым и позволяет явно задавать стили для конкретных брейкпоинтов.

Брейкпоинты по умолчанию

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

Брекпоинт Размер
base 0px
sm 30em
md 48em
lg 62em
xl 80em
2xl 96em

Примечание: 1em = 16px. Использование этих брейкпоинтов обеспечивает консистентность интерфейсов на всех устройствах.

Адаптивные компоненты

Практически все компоненты Chakra UI поддерживают адаптивные пропсы. Например, компонент Flex позволяет менять направление расположения элементов:

<Flex
  direction={{ base: 'column', md: 'row' }}
  spacing={{ base: '4', md: '8' }}
>
  <Box bg="red.200" w="100%" h="50px" />
  <Box bg="green.200" w="100%" h="50px" />
</Flex>

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

Использование Grid для мобильного дизайна

Grid в Chakra UI также поддерживает адаптивность через пропсы templateColumns и gap:

<Grid
  templateColumns={{ base: '1fr', md: 'repeat(2, 1fr)', lg: 'repeat(4, 1fr)' }}
  gap={{ base: 2, md: 4, lg: 6 }}
>
  <Box bg="blue.100" h="100px" />
  <Box bg="blue.200" h="100px" />
  <Box bg="blue.300" h="100px" />
  <Box bg="blue.400" h="100px" />
</Grid>

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

Скрытие и отображение элементов

Chakra UI предоставляет проп display для управления видимостью на разных устройствах:

<Box display={{ base: 'block', md: 'none' }}>
  Мобильное меню
</Box>
<Box display={{ base: 'none', md: 'block' }}>
  Десктопное меню
</Box>

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

Псевдоклассы и адаптивность

Адаптивные пропсы можно комбинировать с псевдоклассами (_hover, _focus, _active) и псевдоэлементами (_before, _after):

<Button
  bg="teal.400"
  _hover={{ bg: { base: 'teal.300', md: 'teal.500' } }}
>
  Кнопка
</Button>

На мобильных устройствах при наведении цвет будет teal.300, а на планшетах и десктопах – teal.500.

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

Для более сложной логики адаптивности Chakra UI предоставляет хук useBreakpointValue:

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

const ResponsiveText = () => {
  const fontSize = useBreakpointValue({ base: 'sm', md: 'lg', lg: 'xl' });
  
  return <Box fontSize={fontSize}>Адаптивный текст</Box>;
};

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

Поддержка Mobile First в теме

В файле темы можно настраивать значения по умолчанию для брейкпоинтов и адаптивные размеры шрифтов, отступов и цветов:

import { extendTheme } from '@chakra-ui/react';

const theme = extendTheme({
  breakpoints: {
    sm: '30em',
    md: '48em',
    lg: '62em',
    xl: '80em',
    '2xl': '96em',
  },
  fontSizes: {
    sm: '0.875rem',
    md: '1rem',
    lg: '1.125rem',
    xl: '1.25rem',
  },
});

export default theme;

Настройка темы обеспечивает единообразие интерфейса и упрощает поддержание Mobile First подхода на всех страницах приложения.

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

  • Начинать с минимального экрана – проектировать мобильную версию интерфейса и постепенно расширять для планшетов и десктопов.
  • Использовать адаптивные пропсы вместо медиазапросов вручную, чтобы сохранять чистоту кода.
  • Комбинировать Flex, Grid и адаптивные пропсы для построения сложных макетов.
  • Хранить константы брейкпоинтов в теме, чтобы обеспечить единообразие по всему приложению.
  • Скрытие/отображение элементов через display облегчает управление разными версиями интерфейса без дублирования компонентов.

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

Оглавление