Visibility классы

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

Типы классов видимости

Классы делятся на две основные группы:

  1. Display Classes (d-*) – управляют отображением элементов (display CSS).
  2. Visibility Classes (visible-* / hidden-*) – управляют видимостью элементов, сохраняя их место в макете.

Display Classes

d-* классы позволяют задавать элементам различные режимы отображения в зависимости от размеров экрана:

  • Базовые значения d-*:

    • d-none – элемент полностью скрыт (display: none).
    • d-inline – элемент отображается как строчный.
    • d-block – блочный элемент.
    • d-inline-block – комбинация блочного и строчного.
    • d-flex – используется для flex-контейнеров.
    • d-inline-flex – строчный flex-контейнер.

  • Адаптивные классы позволяют задать отображение только на определённых брейкпоинтах:

    • d-none-xs – скрыть элемент на экранах XS.
    • d-block-md – показать элемент как блочный на экранах MD и выше.
    • d-flex-lg – включить flex на больших экранах LG.

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

<div class="d-none d-md-block">
  Этот блок будет видим только на экранах от MD и выше
</div>
  • В данном примере блок полностью скрыт на XS и SM, и отображается как block начиная с MD.

Visibility Classes

Классы visible-* и hidden-* управляют видимостью без удаления элемента из потока документа:

  • visible – делает элемент видимым.

  • invisible – элемент невидим, но сохраняет место в макете.

  • Адаптивные версии:

    • visible-xs – видим на XS.
    • invisible-lg – невидим на LG.

Эти классы полезны, когда требуется сохранять структуру макета, например, при работе с сеткой (grid) или flex-контейнерами, но при этом скрывать содержимое.

Комбинирование классов

Quasar позволяет комбинировать классы d-* и visible-* для более сложных сценариев:

  • Пример адаптивного скрытия с сохранением пространства:
<div class="d-block d-md-none invisible-md">
  Этот блок видим на XS и SM, но невидим на MD, при этом занимает место
</div>
  • Пример условного отображения в сетке:
<q-row>
  <q-col cols="6" class="d-none d-lg-block">
    Видим только на больших экранах
  </q-col>
  <q-col cols="6">
    Всегда видимая колонка
  </q-col>
</q-row>

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

  1. Использовать d-* для полного контроля видимости. Когда элемент должен исчезнуть из DOM потока и не влиять на расположение других элементов.

  2. Использовать visible-* / invisible-* для сохранения макета. Особенно важно в сетках или flex-контейнерах.

  3. Сочетать с брейкпоинтами Quasar:

    • xs, sm, md, lg, xl – для точного управления отображением на различных устройствах.

  4. Минимизировать использование inline CSS для видимости, чтобы сохранить единый стиль и облегчить поддержку.

Интерактивные кейсы

  • Меню навигации: скрыть определённые пункты на мобильных устройствах (d-none d-md-flex).
  • Карточки контента: показывать больше информации только на больших экранах (d-none d-lg-block).
  • Секретный контент: скрыть элемент визуально, но оставить его в макете (invisible), чтобы не ломать сетку.

Поддержка Quasar

Все классы видимости интегрированы в Quasar через CSS утилиты, которые автоматически учитывают текущий брейкпоинт, что делает их удобным инструментом для адаптивного дизайна и минимизации медиазапросов вручную.

Эффективное применение этих классов позволяет создавать чистый, модульный и адаптивный интерфейс без избыточного CSS.

Оглавление