Создание адаптивных layouts

В Quasar layout определяется как основная структура приложения, обеспечивающая размещение элементов интерфейса, таких как шапка (Header), боковая панель (Drawer), нижний колонтитул (Footer) и основной контент (Page Container). Layout строится на компоненте <q-layout>, который служит контейнером для всех частей интерфейса и обеспечивает управление позиционированием и адаптивностью.

<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-toolbar-title>Пример Layout</q-toolbar-title>
      </q-toolbar>
    </q-header>

    <q-drawer show-if-above v-model="drawerOpen" side="left">
      <q-list>
        <q-item clickable v-ripple>
          <q-item-section>Пункт меню</q-item-section>
        </q-item>
      </q-list>
    </q-drawer>

    <q-page-container>
      <q-page>
        Контент страницы
      </q-page>
    </q-page-container>

    <q-footer elevated>
      Подвал приложения
    </q-footer>
  </q-layout>
</template>

<script>
export default {
  data() {
    return {
      drawerOpen: false
    }
  }
}
</script>

В параметре view компонента <q-layout> задается расположение элементов и их поведение при адаптивной смене размеров окна:

  • lHh — фиксированный Header
  • Lpr — Drawer слева с режимом push
  • lFf — Footer фиксирован снизу

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

Адаптивные Drawer и Sidebar

Компонент <q-drawer> поддерживает множество режимов: overlay, push, mini, что критично для адаптивного дизайна.

  • overlay — Drawer накладывается на контент, полезно для мобильных устройств.
  • push — контент сдвигается вместе с Drawer, удобно для планшетов и десктопов.
  • mini — Drawer сжат до иконок, экономит пространство на широких экранах.

Управление отображением можно реализовать через условные рендеры по размеру экрана, используя Quasar Screen Plugin:

import { Screen } from 'quasar'

computed: {
  isMobile() {
    return Screen.lt.md
  }
}

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

Header и Toolbar: фиксированная и скроллируемая шапка

<q-header> поддерживает фиксированное и скрывающееся поведение:

  • elevated — добавляет тень для визуального разделения
  • reveal — шапка скрывается при скролле вниз и появляется при скролле вверх
  • height — можно задать собственную высоту шапки

Toolbar (<q-toolbar>) внутри Header позволяет организовать кнопки, заголовки, иконки и поисковые поля.

<q-header elevated reveal>
  <q-toolbar>
    <q-btn flat round icon="menu" @click="drawerOpen = !drawerOpen"/>
    <q-toolbar-title>Адаптивный Header</q-toolbar-title>
  </q-toolbar>
</q-header>

Page Container и страницы

<q-page-container> служит контейнером для всех страниц приложения. Каждая страница оборачивается в <q-page>, что обеспечивает правильное управление скроллом и адаптивностью.

Особенности:

  • <q-page> автоматически получает padding и margin, учитывая высоту Header и Footer.
  • Можно использовать padding и class="q-pa-md" для управления внутренними отступами.
  • Для нескольких страниц с разными layout можно динамически менять параметры <q-layout> через props или Vuex.

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

Quasar предоставляет встроенные утилиты для адаптивного дизайна:

  • Visibility Helpers: q-mt-md, q-pa-xs, hidden-md-up, hidden-sm-down
  • Flex и Grid: <q-row> и <q-col> для сетки с адаптивными размерами
  • Screen Plugin: определение размеров и типов устройств

Пример условного отображения кнопки только на мобильных устройствах:

<q-btn v-if="$q.screen.lt.md" icon="menu" flat @click="drawerOpen = !drawerOpen"/>

<q-footer> может быть фиксированным (elevated) или скользящим. Для мобильных приложений удобно использовать <q-page-sticky> для закрепления кнопок навигации внизу.

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

<q-footer elevated>
  <q-tabs align="justify" dense>
    <q-tab name="home" icon="home"/>
    <q-tab name="search" icon="search"/>
    <q-tab name="profile" icon="person"/>
  </q-tabs>
</q-footer>

Компонент <q-tabs> в Footer позволяет создавать адаптивные панели навигации, изменяющие размер иконок и текстовых подписей в зависимости от ширины экрана.

Динамическое управление Layout

Для сложных приложений полезно управлять состоянием layout через Vuex или Composition API. Пример с Composition API:

import { ref } from 'vue'

export default {
  setup() {
    const drawerOpen = ref(false)
    const toggleDrawer = () => { drawerOpen.value = !drawerOpen.value }

    return { drawerOpen, toggleDrawer }
  }
}

С помощью реактивного состояния можно динамически менять видимость боковой панели, размеры Header и Footer и даже перестраивать структуру страниц под разные устройства.

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

  1. Минимальный набор элементов на мобильных устройствах — сокращение Drawer, скрытие текста на кнопках.
  2. Использование Screen для медиазапросов в JavaScript — более гибкое управление элементами.
  3. Фиксированные Header и Footer только при необходимости — экономия места на маленьких экранах.
  4. Минимализм в Toolbar — избегать перегруженности на мобильных устройствах.
  5. Использование QPage для каждой логической страницы — обеспечивает корректный скролл и адаптивность.

Эти подходы позволяют создавать универсальные, масштабируемые и адаптивные layouts, полностью соответствующие принципам Quasar Framework и современного веб-дизайна.

Оглавление