Видимость элемента (visibility)link

https://dev.ru.simai.io/ru/ui/utility/layout/visibility.php

С помощью данных модификаторов можно управлять видимостью элементов, сохраняя их место в DOM. Это позволяет, например, скрыть элемент визуально, но при этом не нарушать поток документа.

Синтаксисlink

Использование: {условие действия}:{модификатор}

  • Условие действия (необязательный параметр):
    Может принимать значения:

    • sm — для экранов шириной от 540px и больше
    • md — для экранов шириной от 768px и больше
    • lg — для экранов шириной от 960px и больше
    • xl — для экранов шириной от 1140px и больше
    • xxl — для экранов шириной от 1320px и больше

    Если условие действия не указано, модификатор применяется ко всем размерам.

  • Модификатор (обязательный параметр):

    • invisible — делает элемент невидимым, при этом занимающим место в потоке.
    • visible — делает элемент видимым, отменяя действие invisible.

Примерыlink

invisiblelink

Используйте invisible, чтобы скрыть элемент, сохранив его место в DOM.

<div class="invisible h-d5 ...">
    Lorem ipsum ...
</div>

visiblelink

Используйте visible, чтобы сделать элемент видимым или отменить ранее применённый invisible.

<div class="visible h-d5 ...">
    Lorem ipsum ...
</div>

Адаптивностьlink

Для применения стилей, начиная с определённой контрольной точки, добавьте префикс (sm:, md:, lg:, xl:, xxl:) к модификатору.

Например, чтобы сделать элемент видимым только на экранах размера Medium и больше:

<div class="md:visible"></div>