QPageContainer и QPage

QPageContainer — это компонент-контейнер, предназначенный для организации основной области контента приложения, построенного на Quasar. Он отвечает за корректное отображение страниц в сочетании с компонентами навигации, такими как QLayout, QHeader, QFooter и QDrawer. Без QPageContainer страницы не будут правильно позиционироваться и могут перекрываться с фиксированными элементами интерфейса.

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

  • tag (String, по умолчанию: ‘main’) Позволяет изменить HTML-тег, который будет использоваться для контейнера. Это полезно при необходимости семантически правильной разметки.

  • class (String | Array | Object) Позволяет задавать CSS-классы для стилизации контейнера. Рекомендуется использовать для добавления отступов, фонов или дополнительных стилевых настроек.

  • style (Object | String) Применяется для инлайновых стилей к контейнеру.

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

QPage: управление страницами

QPage используется для определения отдельной страницы внутри QPageContainer. Каждая QPage растягивается на всю доступную область контейнера и имеет встроенную поддержку скроллинга.

Ключевые свойства QPage

  • padding (Boolean, по умолчанию: false) Добавляет внутренние отступы вокруг контента страницы, обеспечивая визуальный отрыв от краёв контейнера.

  • style и class Позволяют кастомизировать внешний вид страницы с помощью CSS, аналогично QPageContainer.

  • name (String, опционально) Используется для идентификации страницы в системах навигации или для работы с Vue Router при динамическом отображении страниц.

  • container-style и container-class Позволяют отдельно настраивать обёртку страницы, не влияя на основной контейнер.

Взаимодействие QPageContainer и QPage

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

<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-toolbar-title>Пример приложения</q-toolbar-title>
      </q-toolbar>
    </q-header>

    <q-page-container>
      <q-page padding>
        <div>
          Основной контент страницы
        </div>
      </q-page>
      <q-page padding>
        <div>
          Другая страница
        </div>
      </q-page>
    </q-page-container>

    <q-footer elevated>
      Футер приложения
    </q-footer>
  </q-layout>
</template>

Особенности работы:

  1. Автоскроллинг – каждая QPage получает собственный скролл, что позволяет прокручивать только содержимое страницы без изменения фиксированных элементов интерфейса.
  2. Padding – включение свойства padding упрощает работу с контентом, избавляя от необходимости вручную задавать отступы в стилях.
  3. Flexbox-поддержка – QPage и QPageContainer построены на Flexbox, что облегчает горизонтальное и вертикальное центрирование элементов, а также адаптивное распределение пространства.

Продвинутое использование

Динамическая подгрузка страниц

QPage можно использовать вместе с динамическими компонентами Vue для ленивой подгрузки контента. Это уменьшает время первоначальной загрузки приложения:

<q-page-container>
  <component :is="currentPage" />
</q-page-container>

<script setup>
import HomePage from './pages/HomePage.vue';
import AboutPage from './pages/AboutPage.vue';
import { ref } from 'vue';

const currentPage = ref(HomePage);

// Переключение страницы
function switchPage() {
  currentPage.value = currentPage.value === HomePage ? AboutPage : HomePage;
}
</script>

Работа с Vue Router

При использовании маршрутизации QPageContainer автоматически подстраивается под рендеринг страниц:

<q-page-container>
  <router-view />
</q-page-container>

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

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

  • Обязательно использовать QPageContainer при работе с QLayout, чтобы контент страниц не накладывался на header или footer.
  • Использовать padding на QPage для соблюдения визуальных отступов без написания дополнительных CSS.
  • Именовать страницы через name для удобной идентификации при динамической навигации или интеграции с Vue Router.
  • Flexbox и scroll – использовать встроенные возможности QPage для центрирования и прокрутки контента, что позволяет уменьшить количество кастомных стилей и JavaScript для управления размерами.

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

Оглавление