Компонент Show и Hide

Библиотека Chakra UI предоставляет мощные инструменты для условного отображения компонентов через Show и Hide. Эти компоненты позволяют адаптировать интерфейс под различные размеры экранов без необходимости вручную писать сложные медиазапросы. Они являются обёртками над стандартными React-компонентами и используют внутренний механизм CSS media queries для управления видимостью.

Компонент Show

Компонент Show отображает дочерние элементы только при выполнении указанных условий по размеру экрана.

Синтаксис:

<Show below="md">
  <Text>Этот текст виден только на малых экранах</Text>
</Show>

Параметры:

  • above – элемент будет показан на экранах выше указанного брейкпоинта.
  • below – элемент будет показан на экранах ниже указанного брейкпоинта.

Примеры:

  1. Показ на больших экранах:
<Show above="lg">
  <Button colorScheme="teal">Купить</Button>
</Show>

Здесь кнопка будет видна только на экранах lg и выше.

  1. Показ на мобильных устройствах:
<Show below="md">
  <Text fontSize="sm">Мобильное уведомление</Text>
</Show>

Элемент появится только на экранах md и меньше.

Особенности использования Show:

  • Можно комбинировать с любыми Chakra-компонентами: Box, Flex, Stack.
  • Внутри Show разрешено использовать любые React-компоненты, включая кастомные.
  • Удобно применять для адаптивного контента, навигационных панелей и уведомлений.

Компонент Hide

Компонент Hide действует противоположно Show: скрывает дочерние элементы при указанных условиях.

Синтаксис:

<Hide below="md">
  <Text>Этот текст скрыт на малых экранах</Text>
</Hide>

Параметры:

  • above – элемент будет скрыт на экранах выше указанного брейкпоинта.
  • below – элемент будет скрыт на экранах ниже указанного брейкпоинта.

Примеры:

  1. Скрытие на мобильных устройствах:
<Hide below="sm">
  <Image src="/desktop-banner.png" alt="Desktop Banner"/>
</Hide>

Эта картинка будет видна только на экранах sm и выше, исчезая на мобильных.

  1. Скрытие на больших экранах:
<Hide above="lg">
  <Text fontSize="lg">Специальное предложение для мобильных</Text>
</Hide>

Элемент исчезнет на экранах lg и выше.

Особенности использования Hide:

  • Позволяет полностью исключить элементы из DOM при их скрытии.
  • Удобно использовать для оптимизации производительности на мобильных устройствах.
  • Логика скрытия полностью управляется брейкпоинтами Chakra UI, что делает код чистым и читаемым.

Адаптивные брейкпоинты

Chakra UI использует стандартные брейкпоинты, определённые в теме:

  • sm – 30em (480px)
  • md – 48em (768px)
  • lg – 62em (992px)
  • xl – 80em (1280px)
  • 2xl – 96em (1536px)

Можно использовать эти брейкпоинты в свойствах Show и Hide для точного управления отображением элементов на разных устройствах.

Комбинирование Show и Hide

Иногда требуется более сложная логика адаптивного отображения. Например, элемент виден только на средних экранах:

<Show above="sm" below="lg">
  <Text>Только для экранов от sm до lg</Text>
</Show>

Здесь Show поддерживает одновременное указание above и below, что делает его универсальным инструментом для медиазапросов в JSX.

Практические советы

  1. Чистый JSX: Использование Show/Hide позволяет полностью избавиться от inline CSS и медиазапросов внутри компонентов.
  2. Комбинация с Flex и Grid: Очень удобно применять для адаптивных макетов, скрывая или показывая колонки и панели.
  3. Оптимизация рендеринга: Скрытые компоненты не удаляются из DOM, а полностью исключаются при рендере, что уменьшает нагрузку на браузер.
  4. Динамическая тема: Можно комбинировать Show/Hide с цветовой схемой и другими свойствами Chakra UI, чтобы делать интерфейс максимально адаптивным.

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

<Flex direction={{ base: "column", md: "row" }} align="center" justify="space-between">
  <Box>
    <Show below="md">
      <Text fontSize="sm">Мобильное меню</Text>
    </Show>
    <Hide below="md">
      <Text fontSize="md">Десктопное меню</Text>
    </Hide>
  </Box>
  <Box>
    <Button colorScheme="blue">Войти</Button>
  </Box>
</Flex>

В этом примере:

  • На мобильных устройствах отображается текст Мобильное меню.
  • На десктопе показывается Десктопное меню.
  • Кнопка остаётся видимой на всех устройствах.

Использование компонентов Show и Hide в Chakra UI обеспечивает гибкость адаптивного дизайна, упрощает управление медиазапросами и повышает читаемость кода. Эти инструменты позволяют создавать динамичные интерфейсы, которые автоматически подстраиваются под любые размеры экранов.

Оглавление