QHeader и QFooter

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

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

  • height-hint Определяет рекомендуемую высоту заголовка. Полезно для корректного расчета пространства для контента под шапкой.

  • elevated Применяет тень, создавая эффект «поднятой» панели.

    <q-header elevated>
  ...
</q-header>

  • reveal Позволяет заголовку скрываться при прокрутке вниз и появляться при прокрутке вверх. Используется совместно с QPageContainer и QPage для создания динамического интерфейса.

  • bordered Добавляет нижнюю границу заголовка, что визуально отделяет его от основного контента.

Слоты QHeader

  • default Основной слот для размещения контента внутри шапки. Чаще всего сюда помещают QToolbar, который содержит логотип, навигационные кнопки и меню.

  • Пример использования QToolbar внутри QHeader:

    <q-header elevated height-hint="70">
  <q-toolbar>
    <q-btn flat icon="menu" @click="toggleLeftDrawer" />
    <q-toolbar-title>
      Мое приложение
    </q-toolbar-title>
    <q-btn flat icon="search" />
  </q-toolbar>
</q-header>

Варианты позиционирования

  • position="sticky" Заголовок остаётся видимым при прокрутке страницы.
  • position="absolute" Позволяет разместить заголовок поверх контента, полезно для эффектных анимаций или прозрачных шапок.

QFooter в Quasar

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

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

  • height-hint Указывает рекомендуемую высоту футера, что важно для корректного расчета пространства в QPageContainer.

  • elevated Создает визуальную тень для отделения футера от основного контента.

  • bordered Добавляет верхнюю границу футера, обеспечивая визуальную структуру интерфейса.

  • reveal Позволяет футеру скрываться при прокрутке вниз и появляться при прокрутке вверх.

Слоты QFooter

  • default Основной слот для размещения содержимого футера. Часто здесь используют QToolbar для размещения кнопок, ссылок или копирайта.

  • Пример использования QToolbar внутри QFooter:

    <q-footer elevated height-hint="50">
  <q-toolbar>
    <q-btn flat icon="home" label="Главная" />
    <q-btn flat icon="info" label="О проекте" />
    <q-space />
    <div>© 2026 Компания</div>
  </q-toolbar>
</q-footer>

Варианты позиционирования

  • position="sticky" Футер остается внизу экрана, пока контент не превышает высоту страницы.
  • position="absolute" Используется для футеров, которые накладываются на контент. Часто применяется в мобильных приложениях с минимальной прокруткой.

Совместное использование QHeader и QFooter

QHeader и QFooter часто работают вместе в структуре QLayout для создания полноценных интерфейсов. Основные моменты:

  • QPageContainer Всегда помещается между QHeader и QFooter. Он автоматически учитывает высоту этих компонентов, если заданы height-hint, обеспечивая корректную прокрутку контента.

  • Пример полной структуры:

    <q-layout view="hHh Lpr fFf">
  <q-header elevated height-hint="70">
    <q-toolbar>
      <q-toolbar-title>Приложение</q-toolbar-title>
    </q-toolbar>
  </q-header>

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

  <q-footer elevated height-hint="50">
    <q-toolbar>
      <q-btn flat label="Контакты" />
      <q-space />
      <div>© 2026 Компания</div>
    </q-toolbar>
  </q-footer>
</q-layout>

  • Совместимость с динамическими панелями Если включен режим reveal для QHeader и QFooter, QPageContainer автоматически подстраивается, предотвращая перекрытие контента.

Советы по кастомизации

  • Для изменения цвета и стиля заголовка и футера используются свойства class и style. Примеры:

    <q-header class="bg-primary text-white" elevated />
<q-footer class="bg-grey-8 text-white" elevated />

  • Для сложной навигации удобно использовать компоненты QToolbar, QBtn, QAvatar, QMenu внутри слотов header и footer.

  • Для адаптивного дизайна рекомендуется комбинировать свойства reveal, elevated и position, чтобы шапка и футер выглядели одинаково хорошо на разных устройствах.

  • Следует всегда задавать height-hint, чтобы QPageContainer корректно рассчитывал пространство и не допускал перекрытия контента.

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

Оглавление