Адаптивные классы

Quasar Framework предоставляет мощный набор инструментов для создания адаптивных интерфейсов, позволяя легко управлять отображением компонентов на разных устройствах и разрешениях экрана. Основой этой функциональности являются адаптивные классы, которые применяются к элементам для управления их видимостью, размерами и поведением в зависимости от ширины экрана.

Принцип работы адаптивных классов

Адаптивные классы Quasar строятся на системе breakpoints, аналогичной CSS Media Queries. Quasar по умолчанию использует следующие точки останова:

  • xs — мобильные устройства (0–599px)
  • sm — маленькие планшеты (600–1023px)
  • md — большие планшеты / маленькие ноутбуки (1024–1439px)
  • lg — десктопы (1440–1919px)
  • xl — крупные экраны (1920px и выше)

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

Классы видимости

Quasar предоставляет классы для управления видимостью компонентов на разных устройствах:

  • hidden-{breakpoint}-{condition}
  • visible-{breakpoint}-{condition}

Где {breakpoint} — одна из точек останова (xs, sm, md, lg, xl), а {condition} — only, and-up, and-down.

Примеры:

  • hidden-xs-only — элемент скрыт только на устройствах с шириной xs.
  • hidden-md-and-up — элемент скрыт на устройствах md, lg, xl.
  • visible-sm-and-down — элемент видим только на устройствах sm и меньших.

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

Адаптивные классы для размеров

Quasar поддерживает классы для изменения размеров и отступов в зависимости от брейкпоинта:

  • q-mt-md — верхний отступ на устройствах md и выше.
  • q-pt-sm — внутренний верхний padding на устройствах sm и выше.
  • q-gutter-lg — отступ между элементами в сетке на больших экранах.

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

Адаптивные сетки

Quasar предоставляет компонент <q-layout> и систему <q-page-container> с встроенной адаптивной сеткой, где размеры колонок управляются классами:

  • col-{breakpoint}-{size} — задаёт ширину колонки в процентах (1–12).
  • offset-{breakpoint}-{size} — задаёт смещение колонки.

Пример:

<q-row>
  <q-col cols="12" sm="6" md="4">
    Контент колонки
  </q-col>
  <q-col cols="12" sm="6" md="8">
    Контент второй колонки
  </q-col>
</q-row>

В этом примере колонки будут адаптироваться под ширину экрана: на мобильных (xs) занимают всю ширину, на sm делятся пополам, на md первая занимает 1/3, а вторая — 2/3.

Комбинирование классов для адаптивного дизайна

Классы видимости и размеры можно комбинировать для создания сложных адаптивных макетов:

<q-btn 
  class="hidden-xs-only q-mt-md q-px-lg"
  label="Кнопка адаптивная"
  color="primary"
/>
  • hidden-xs-only скрывает кнопку на мобильных устройствах.
  • q-mt-md добавляет верхний отступ на планшетах и выше.
  • q-px-lg увеличивает горизонтальные отступы на больших экранах.

Такой подход позволяет полностью отказаться от кастомных медиа-запросов в CSS.

Динамическое управление через $q.screen

Для более сложной логики отображения компонентов Quasar предоставляет объект $q.screen, который отражает текущие параметры экрана:

  • $q.screen.width — ширина окна в пикселях
  • $q.screen.height — высота окна
  • $q.screen.gt.sm — true, если ширина больше sm
  • $q.screen.lt.md — true, если ширина меньше md
  • $q.screen.xs — true, если текущий экран xs

Пример динамического рендера кнопки:

<q-btn v-if="$q.screen.gt.sm" label="Только на больших экранах" color="secondary" />

Использование $q.screen позволяет программно адаптировать интерфейс, включая или скрывая элементы в зависимости от размеров экрана.

Практические рекомендации

  • Для простого адаптивного интерфейса достаточно классов видимости и размеров.
  • Для сложной логики лучше использовать $q.screen, чтобы управлять рендером и поведением компонентов динамически.
  • Комбинирование классов позволяет создавать гибкие макеты без кастомного CSS.
  • Всегда проверять адаптивность на нескольких точках останова, особенно xs и xl.

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

Оглавление