Система брейкпоинтов Quasar

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

Основные понятия

Брейкпоинт — это точка перехода, при которой интерфейс изменяет своё поведение или внешний вид. В Quasar стандартные брейкпоинты задаются следующим образом:

Брейкпоинт Минимальная ширина (px) Назначение
xs 0 мобильные устройства
sm 600 планшеты в портретной ориентации
md 1024 планшеты в ландшафтной ориентации и небольшие десктопы
lg 1440 обычные десктопы
xl 1920 большие экраны

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

Доступ к брейкпоинтам через $q.screen

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

  • width — текущая ширина экрана в пикселях.
  • height — текущая высота экрана в пикселях.
  • name — строковое обозначение текущего брейкпоинта ('xs', 'sm', 'md', 'lg', 'xl').
  • lt — объект, содержащий булевы значения для проверки, меньше ли экран заданного брейкпоинта. Пример: screen.lt.md будет true, если ширина экрана меньше 1024px.
  • gt — объект, содержащий булевы значения для проверки, больше ли экран заданного брейкпоинта. Пример: screen.gt.sm будет true, если ширина экрана больше 600px.
  • xs, sm, md, lg, xl — булевы значения, указывающие, соответствует ли экран конкретному брейкпоинту.

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

<template>
  <div>
    <p v-if="$q.screen.gt.sm">На этом экране отображается расширенная панель</p>
    <p v-else>Мобильная версия интерфейса</p>
  </div>
</template>

В этом примере проверка $q.screen.gt.sm гарантирует, что блок для десктопной версии будет виден только на устройствах шире 600px.

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

Quasar интегрирует брейкпоинты с системой утилитарных классов. Они позволяют задавать стили напрямую в шаблоне без необходимости писать медиа-запросы вручную. Основные категории:

  • Отображение и скрытие элементов:

    • hidden-xs-only, hidden-sm-only, hidden-md-and-up
    • visible-lg, visible-xl-only

  • Отступы и размеры: Утилиты типа q-pa-md, q-mt-lg могут комбинироваться с брейкпоинтами:

    • q-pa-md-md — padding для md и выше
    • q-mt-sm-xs — margin-top для xs и sm

  • Гибкость сетки (Flex): Использование классов q-gutter-md, q-col-12-sm позволяет управлять размером и расположением колонок в зависимости от брейкпоинта.

Пример:

<div class="q-gutter-md q-col-12-sm q-col-6-md">
  <div class="q-pa-sm bg-primary">Блок адаптивного размера</div>
</div>

В этом примере блок занимает всю ширину на мобильных устройствах (sm) и половину на планшетах и десктопах (md).

Настройка кастомных брейкпоинтов

Quasar позволяет изменять стандартные значения брейкпоинтов в конфигурации проекта (quasar.config.js) через раздел framework.config.screen. Пример:

framework: {
  config: {
    screen: {
      breakpoints: {
        xs: 0,
        sm: 640,
        md: 1280,
        lg: 1600,
        xl: 1920
      },
      bodyClasses: true
    }
  }
}
  • breakpoints — объект, в котором задаются минимальные ширины для каждого брейкпоинта.
  • bodyClasses — при значении true автоматически добавляет классы на <body> (screen-xs, screen-md), что позволяет использовать их в глобальных стилях CSS.

Динамическое реагирование на изменение размеров

Объект $q.screen обновляется автоматически при изменении размеров окна. Для реактивного использования можно обращаться к нему в вычисляемых свойствах или методах:

computed: {
  isMobile() {
    return this.$q.screen.lt.md
  }
}

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

Совмещение с Vue Composition API

Система брейкпоинтов полностью совместима с Composition API:

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

export default {
  setup() {
    const $q = useQuasar()
    const isDesktop = computed(() => $q.screen.gt.sm)

    return { isDesktop }
  }
}

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

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

  1. Меню навигации: переключение между горизонтальным меню на больших экранах и выдвижным боковым меню на мобильных.
  2. Грид-система: настройка колонок сетки в зависимости от брейкпоинтов для оптимального отображения контента.
  3. Изменение видимости кнопок и панелей: скрытие элементов на мобильных устройствах, отображение дополнительных инструментов на десктопах.
  4. Адаптивные размеры шрифтов и отступов: использование утилитарных классов для точного управления типографикой и пространством.

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

Оглавление