Hidden для скрытия элементов

Компонент Hidden из библиотеки MUI предназначен для условного скрытия элементов интерфейса в зависимости от размеров экрана или других условий. Он обеспечивает удобное управление адаптивностью без необходимости писать сложные CSS-медиа-запросы вручную.

Основные возможности

  1. Скрытие по брейкпоинтам Hidden позволяет скрывать элементы на определённых размерах экранов, используя систему брейкпоинтов MUI (xs, sm, md, lg, xl).

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

    import Hidden from '@mui/material/Hidden';
import Button from '@mui/material/Button';

<Hidden smDown>
  <Button variant="contained">Только на больших экранах</Button>
</Hidden>

    В этом примере кнопка будет отображаться только на устройствах с шириной md и выше, так как она скрыта для smDown (sm и меньше).

  2. Пропсы для управления видимостью

    • xsUp, smUp, mdUp, lgUp, xlUp — элемент будет виден начиная с указанного брейкпоинта и выше.
    • xsDown, smDown, mdDown, lgDown, xlDown — элемент будет виден только до указанного брейкпоинта включительно.
    • only — элемент виден только на указанных брейкпоинтах.

    Пример с использованием only:

    <Hidden only={['sm', 'md']}>
  <div>Не отображается на sm и md</div>
</Hidden>

  3. Комбинирование условий Можно комбинировать пропсы для сложного контроля отображения:

    <Hidden smDown only={['lg']}>
  <div>Сложное условие видимости</div>
</Hidden>

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

Особенности реализации

  • Hidden использует CSS media queries для управления отображением.

  • Компонент не удаляет элементы из DOM, он просто управляет стилем display: none. Это важно учитывать, если требуется динамическое взаимодействие с элементами через JavaScript.

  • Если необходимо полностью исключить элемент из DOM, следует использовать условный рендеринг через тернарный оператор:

    {isVisible && <Component />}

Сценарии применения

  1. Адаптивные панели навигации Например, на мобильных устройствах можно скрывать боковую панель:

    <Hidden smDown>
  <Sidebar />
</Hidden>

  2. Рекламные блоки или баннеры Баннер можно показывать только на больших экранах, чтобы не загромождать интерфейс на мобильных:

    <Hidden mdDown>
  <PromoBanner />
</Hidden>

  3. Формы и элементы управления Скрытие дополнительных полей на маленьких экранах:

    <Hidden xsDown>
  <TextField label="Дополнительная информация" />
</Hidden>

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

  • Для производительности следует минимизировать количество скрытых элементов, если они содержат тяжелые компоненты.
  • Использовать Hidden для адаптивного дизайна удобно, но для полного удаления из DOM лучше использовать условный рендеринг.
  • Комбинируя Hidden с системными контейнерами MUI (Box, Grid), можно создавать сложные адаптивные макеты без лишнего CSS.

Взаимодействие с темами и брейкпоинтами

Hidden работает в связке с темой MUI, поэтому брейкпоинты автоматически подстраиваются под кастомные настройки темы. Пример кастомной темы с изменёнными брейкпоинтами:

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 900,
      lg: 1200,
      xl: 1536,
    },
  },
});

После этого Hidden будет использовать новые значения для smDown, mdUp и других пропсов.

Компонент Hidden — мощный инструмент для контроля видимости элементов в MUI, который сочетает простоту использования с гибкой адаптивностью, позволяя создавать интерфейсы, корректно отображающиеся на любых устройствах.

Оглавление