Видимость элемента

visibility
sm
md
lg
xl

В SIMAI Framework с помощью модификатора можно управлять видимостью элемента.

Классы

Класс Значение
invisible visibility: hidden;
visible visibility: visible;

Описание

Адаптивный модификатор. Позволяет управлять поведением браузера при достижении границы области прокрутки, в зависимости от размера области просмотра.

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

  • Контрольная точка. Необязательный параметр. Применяет модификатор начиная с определенного размера области просмотра, согласно контрольным точкам (sm, md, lg, xl). Если контрольная точка не задана, то действует для любого размера области просмотра.
  • Модификатор. Обязательный параметр. Может принимать значения:
    • invisible - можно скрыть элемент, но при этом сохранить свое место в DOM, влияя на расположение других элементов;
    • visible - можно сделать элемент видимым. Это в основном полезно для отмены свойства invisible на экранах разных размеров;

invisible

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

1
3
<div class="invisible h-d5 overflow-auto ... ">
    Lorem ipsum ...        
</div>

visible

С помощью модификатора visible можно сделать элемент видимым. Это в основном полезно для отмены свойства invisible на экранах разных размеров.

1
2
3
<div class="visible h-d5 overflow-auto ... ">
    Lorem ipsum ...        
</div>

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

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

Например, используйте модификатор md:visibility-auto для продолжения прокрутки родительской области прокрутки, когда они достигнут границы основной области прокрутки для экранов размером Medium и больше.

<div class="md:visibility-auto"></div>

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

Изменить статью