Система суффиксов классов модулей Joomla - это мощная система, и простое решение для скрытия модулей на определенных размерах экрана — это просто добавить суффикс класса модуля к модулю, который вы хотите скрыть.
Шаблон Joomla 4 по умолчанию — Cassiopeia, который использует библиотеку Bootstrap. Если вы хотите показать или скрыть некоторые модули, служебные классы, включенные в Bootstrap, помогут вам это сделать.
Шаблон Cassiopeia использует Bootstrap 5, поэтому вы можете просто добавить в модуль специальный класс Bootstrap 5, чтобы скрыть его на разных размерах экрана.
Способ добавления суффикса класса модуля к модулю:
- Перейдите к диспетчеру модулей и отредактируйте нужный модуль.
- Щелкните вкладку модуля - Дополнительные параметры.
- Введите класс модуля, который вы хотите присоединить к этому модулю, например, "d-none d-lg-block"
- Нажмите Сохранить
Классы Bootstrap 5 для скрытия или отображения модулей в Joomla 4
Следующие классы Bootstrap 5 можно добавить в модули, чтобы скрыть или отобразить их на экранах определенных размеров.
Чтобы скрыть элементы, используйте:
- класс .d-none;
- или один из классов .d-{sm,md,lg,xl,xxl}-none для любого адаптивного варианта экрана.
Чтобы показать модуль на заданном интервале размеров экрана, объедините один класс .d-*-none с классом .d-*-*.
Классы Bootstrap 5 для разных размеров экрана
Hidden on all | .d-none |
Hidden only on xs | .d-none .d-sm-block |
Hidden only on sm | .d-sm-none .d-md-block |
Hidden only on md | .d-md-none .d-lg-block |
Hidden only on lg | .d-lg-none .d-xl-block |
Hidden only on xl | .d-xl-none |
Hidden only on xxl | .d-xxl-none .d-xxl-block |
Visible on all | .d-block |
Visible only on xs | .d-block .d-sm-none |
Visible only on sm | .d-none .d-sm-block .d-md-none |
Visible only on md | .d-none .d-md-block .d-lg-none |
Visible only on lg | .d-none .d-lg-block .d-xl-none |
Visible only on xl | .d-none .d-xl-block .d-xxl-none |
Visible only on xxl | .d-none .d-xxl-block |
Более подробную информацию о свойстве отображения, включенном в Bootstrap 5, можно найти здесь.
Пример – скрытие модуля на экранах меньше lg
Стиль модуля должен быть - унаследованный
Чтобы протестировать класс, обновите страницу и уменьшите размер окна браузера до необходимого размера или откройте свою страницу на соответствующем устройстве.
Bootstrap 5 breakpoints
Breakpoint | Class infix | Dimensions |
Extra small | None | <576px |
Small | sm | ≥576px |
Medium | md | ≥768px |
Large | lg | ≥992px |
Extra large | xl | ≥1200px |
Extra extra large | xxl | ≥1400px |