Popup и options страницы

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

QMenu — это всплывающее меню, которое обычно привязывается к кнопке или другому элементу. Основные свойства:

  • anchor: указывает точку привязки меню относительно родительского элемента (top left, bottom right и т.д.).
  • self: определяет, какая часть меню будет выровнена относительно anchor.
  • cover: если true, меню перекрывает родительский элемент полностью.
  • context-menu: позволяет открывать меню по правому клику мыши.

Пример базового использования QMenu:



  
    
      Пункт 1
    
    
      Пункт 2

QPopover используется для отображения контекстного окна с произвольным контентом. Он позволяет более гибко управлять внутренним содержимым по сравнению с QMenu.

  • persistent: сохраняет popover открытым при взаимодействии вне него.
  • transition-show и transition-hide: задают анимацию появления и скрытия.


  

    Подробная информация о кнопке

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

  • persistent: запрещает закрытие при клике вне диалога.
  • maximized и full-width: позволяют масштабировать диалог под размер экрана.


  
    
      Подтвердите действие

Управление поведением popup

Quasar предоставляет широкие возможности управления popup через свойства, события и директивы.

  • Директива v-close-popup автоматически закрывает меню или диалог при клике на элемент.
  • События @show и @hide позволяют реагировать на открытие и закрытие popup, полезно для анимаций или динамического подгрузки данных.
  • Динамическая привязка позиции через anchor и self обеспечивает адаптивность интерфейса на разных экранах.

Options страниц

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

Props для страниц:

  • title: заголовок страницы.
  • back-btn: отображение кнопки “Назад”.
  • padding: внутренние отступы контента.
  • scrollable: возможность скроллинга контента.

  
    Настройки пользователя
  
  
    
      Выберите опции отображения

Динамические опции через reactive state:

setup() {
  const options = reactive({
    darkMode: false,
    notifications: true
  })

  const toggleOption = (key) => {
    options[key] = !options[key]
  }

  return { options, toggleOption }
}

Интерактивные элементы можно комбинировать с popup-компонентами для создания удобного интерфейса настроек. Например, QMenu с переключателями внутри позволяет изменять опции на лету без перезагрузки страницы.

Интеграция popup и опций страниц

Сочетание QMenu, QPopover и QDialog с настройками страниц позволяет создавать сложные интерфейсы:

  • Контекстные меню для выбора фильтров и сортировки.
  • Диалоговые окна для подтверждения действий пользователя.
  • Popover с пояснениями и дополнительной информацией по настройкам.

Пример интеграции:


  
  
    
      Темная тема
      {{ options.darkMode ? 'Вкл' : 'Выкл' }}
    
    
      Уведомления
      {{ options.notifications ? 'Вкл' : 'Выкл' }}

Такой подход позволяет создать интерфейс, где popup и options страниц работают синхронно, обеспечивая максимальную интерактивность и удобство управления настройками.

Оглавление