QDrawer для боковых панелей

QDrawer — это компонент библиотеки Quasar, предназначенный для создания боковых панелей (sidebars), которые могут содержать навигационные элементы, фильтры, дополнительные функции или любую другую информацию. Он поддерживает как статическое, так и динамическое управление видимостью, интегрируется с layout-системой Quasar и предоставляет гибкие возможности настройки.

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

  • v-model / model-value: управляет состоянием видимости панели. Тип значения — Boolean.

    В этом примере drawerOpen — реактивное состояние, определяющее открыта панель или закрыта.

  • side: определяет сторону экрана, на которой располагается панель. Возможные значения: left или right.

  • overlay: если true, панель накладывается на основное содержимое вместо того, чтобы сдвигать его.

  • bordered: добавляет границу между панелью и контентом.

  • width / mini-width: задают ширину панели в пикселях. Свойство mini позволяет уменьшить ширину до минимума, например для иконок.

Управление состоянием

Открытие и закрытие панели может выполняться через v-model или методы компонента:



  
    Элемент 1
    Элемент 2

Также поддерживаются события:

  • @input — вызывается при изменении состояния панели;
  • @hide и @show — триггеры при скрытии и открытии соответственно.

Типы QDrawer

  1. Статический (stateless / persistent) Панель всегда видна и сдвигает основной контент. Подходит для десктопной навигации.

    
  
    Главная
    Настройки

  2. Перекрывающий (overlay) Панель появляется поверх основного контента, что удобно для мобильных устройств.

    
  
    Профиль
    Выход

  3. Мини-панель (mini) Мини-панель отображает только иконки элементов и может расширяться при наведении.

Интеграция с QLayout

QDrawer тесно интегрирован с компонентом QLayout, который управляет расположением элементов интерфейса.


  
    
      
      Пример приложения
    
  

  
    
      Пункт меню 1
      Пункт меню 2
    
  

  
    
      Основной контент приложения

Здесь кнопка в QHeader переключает видимость панели, а QPageContainer автоматически подстраивается под сдвиг панели, если она статическая.

Адаптивность и мобильные устройства

Для мобильных устройств рекомендуется использовать overlay, чтобы панель не занимала ценное пространство экрана:


  
    Меню

Свойство breakpoint автоматически переключает панель на overlay при ширине окна меньше указанного значения.

Работа с контентом и списками

QDrawer обычно содержит списки (QList, QItem) с навигационными элементами. Использование v-ripple добавляет эффект нажатия:


  
    
      
    
    Панель управления

Можно комбинировать QItemSection для добавления иконок, заголовков и подпунктов.

Анимация и пользовательский опыт

QDrawer поддерживает плавное открытие и закрытие с помощью встроенной анимации. Для улучшения UX:

  • Использовать v-model для контроля видимости;
  • Настраивать mini для сокращенной панели;
  • Добавлять overlay для мобильных интерфейсов.

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

Оглавление