Screen плагин

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

Screen плагин предоставляет реактивный объект с набором свойств, которые автоматически обновляются при изменении размеров окна или ориентации экрана.

Подключение и использование

Screen доступен глобально, если проект создан с использованием Quasar CLI и настроен стандартный Quasar Boot-файл. Для его использования не требуется дополнительная установка.

Пример импорта в компоненте Vue:

import { useQuasar } from 'quasar';

export default {
  setup() {
    const $q = useQuasar();
    
    console.log($q.screen.width); // текущая ширина экрана
    console.log($q.screen.height); // текущая высота экрана
    console.log($q.screen.name); // xs, sm, md, lg, xl
    console.log($q.screen.gt.md); // true, если экран больше md
  }
}

Основные свойства

Screen плагин содержит несколько категорий свойств:

1. Ширина и высота

  • width — ширина окна браузера в пикселях.
  • height — высота окна браузера в пикселях.

Пример использования для условного отображения:

if ($q.screen.width < 600) {
  console.log('Мобильная версия интерфейса');
}

2. Именование размеров

Quasar делит экран на стандартные размеры: xs, sm, md, lg, xl.

  • name — текущее имя экрана.
  • lt и gt — объекты, определяющие меньше или больше текущей границы:
$q.screen.lt.md // true, если размер меньше md
$q.screen.gt.sm // true, если размер больше sm

Пример условного рендера в шаблоне Vue:

<template>
  <div>
    <p v-if="$q.screen.lt.md">Показываем мобильный контент</p>
    <p v-else>Показываем десктопный контент</p>
  </div>
</template>

Ориентация устройства

Screen позволяет определять ориентацию экрана через свойства:

  • portrait — true, если экран в портретной ориентации.
  • landscape — true, если экран в альбомной ориентации.

Пример применения для изменения стиля:

<template>
  <div :class="{'landscape-mode': $q.screen.landscape}">
    Контент адаптирован под ориентацию
  </div>
</template>

Реактивность и наблюдение

Все свойства Screen реактивны, поэтому можно создавать реактивные вычисления и автоматически адаптировать интерфейс.

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

import { computed } from 'vue';
import { useQuasar } from 'quasar';

export default {
  setup() {
    const $q = useQuasar();

    const isMobile = computed(() => $q.screen.lt.md);
    const isDesktop = computed(() => $q.screen.gt.sm);

    return { isMobile, isDesktop };
  }
}

Это позволяет использовать v-if или v-show в шаблоне без дополнительных обработчиков событий.

Использование вместе с Layout

Screen активно используется вместе с компонентами Layout и Drawer для динамического скрытия или отображения боковых панелей:

<q-layout view="lHh Lpr lFf">
  <q-drawer v-model="drawer" :breakpoint="$q.screen.gt.sm ? 300 : 0">
    Меню
  </q-drawer>
</q-layout>

В этом примере ширина боковой панели адаптируется под размер экрана: для мобильных устройств Drawer может быть полностью скрыт.

Практические сценарии

  1. Адаптация сетки Использование $q.screen.name для изменения количества колонок в QCard или QTable.

  2. Динамическая подгрузка компонентов Например, для мобильных устройств загружать упрощённый виджеты, а для десктопа — расширенный.

  3. Ориентационно-зависимые стили Применение классов в зависимости от portrait или landscape для корректного отображения контента.

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

Оглавление