QNotify система уведомлений

QNotify — это мощный компонент библиотеки Quasar Framework, предназначенный для создания уведомлений в приложениях на Vue.js. Уведомления могут быть информационными, предупреждающими, успешными или критическими, а также поддерживают кастомизацию внешнего вида и поведения. Компонент реализует асинхронные уведомления, которые автоматически исчезают через заданное время, но могут оставаться до взаимодействия пользователя.

Подключение и использование

Для использования QNotify в проекте достаточно импортировать его из Quasar:

import { Notify } from 'quasar';

После этого уведомления можно создавать вызовом метода Notify.create(). Минимальный пример:

Notify.create('Привет! Это простое уведомление');

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

Параметры конфигурации

Notify.create() принимает объект с множеством опций, позволяющих детально управлять уведомлением:

Notify.create({
  message: 'Файл успешно загружен',
  color: 'green',
  icon: 'check',
  position: 'top-right',
  timeout: 3000,
  actions: [
    { label: 'Закрыть', color: 'white', handler: () => { /* действие */ } }
  ]
});

Основные параметры:

  • message — текст уведомления. Обязательный параметр.
  • color — цвет уведомления. Можно использовать стандартные цвета Quasar (primary, secondary, positive, negative, warning).
  • icon — иконка из библиотеки Material Icons или Font Awesome.
  • position — позиция на экране (top, bottom, top-right, bottom-left и т.д.).
  • timeout — время отображения в миллисекундах. Значение 0 оставит уведомление на экране до закрытия вручную.
  • actions — массив объектов для добавления кнопок действия внутри уведомления.
  • multiLine — делает уведомление многострочным.
  • html — позволяет вставлять HTML-контент в сообщение.

Позиционирование уведомлений

QNotify поддерживает гибкое управление позиционированием через параметр position. Допустимые значения:

  • top, bottom — центр верхней или нижней части экрана.
  • top-left, top-right, bottom-left, bottom-right — угловые позиции.
  • center — центр экрана.

Позиция влияет на порядок отображения уведомлений: новые уведомления появляются сверху или снизу в зависимости от выбранной позиции.

Стилизация уведомлений

Стилизация достигается через комбинацию параметров color, textColor, icon и CSS-классов. Пример:

Notify.create({
  message: 'Ошибка при сохранении данных',
  color: 'red',
  textColor: 'white',
  icon: 'error',
  classes: 'q-mb-md q-pa-sm shadow-2'
});

Рекомендации по кастомизации:

  • Использовать стандартные цвета Quasar для согласованного интерфейса.
  • Добавлять тени (shadow-*) для выделения уведомлений.
  • Отступы через классы q-mb-* и q-pa-* для согласованного расстояния между уведомлениями и другими элементами интерфейса.

Взаимодействие с уведомлением

QNotify поддерживает действия пользователя через actions и события. Пример с кнопкой «Отмена»:

Notify.create({
  message: 'Загрузка файла...',
  color: 'blue',
  timeout: 0,
  actions: [
    { label: 'Отмена', color: 'yellow', handler: () => Notify.create('Загрузка отменена') }
  ]
});

Можно также реагировать на события закрытия уведомления:

const myNotify = Notify.create({
  message: 'Процесс завершён',
  color: 'green'
});

myNotify.onDismiss(() => console.log('Уведомление закрыто'));

Метод onDismiss позволяет выполнять дополнительные действия после закрытия уведомления пользователем или автоматически.

Группировка и управление несколькими уведомлениями

Quasar автоматически управляет стеком уведомлений. Для контроля нескольких уведомлений:

  • Notify.create() возвращает объект уведомления для дальнейшего управления.
  • Notify.setDefaults() позволяет установить глобальные параметры, например:
Notify.setDefaults({
  position: 'top-right',
  timeout: 4000,
  color: 'primary'
});
  • Notify.registerType() создаёт кастомные типы уведомлений для повторного использования:
Notify.registerType('success', {
  color: 'green',
  icon: 'check'
});

Notify.create({
  type: 'success',
  message: 'Данные успешно сохранены'
});

Продвинутые возможности

  1. HTML-контент — позволяет вставлять кнопки, ссылки и форматированный текст.
  2. Многострочные уведомления — активируются параметром multiLine: true.
  3. Позиция и анимация — новые уведомления могут сдвигать предыдущие, создавая аккуратный стек.
  4. Программное закрытие — уведомление можно закрыть через метод myNotify.dismiss().
const notification = Notify.create({ message: 'Подождите...' });
// закрыть через 5 секунд
setTimeout(() => notification.dismiss(), 5000);

Советы по оптимальному использованию

  • Для кратких сообщений используйте стандартные уведомления без действий.
  • Для подтверждений или ошибок добавляйте кнопки действий.
  • Используйте глобальные настройки через Notify.setDefaults() для единообразного интерфейса.
  • Избегайте перегрузки интерфейса уведомлениями — при необходимости использовать меньшее время отображения или централизованное логирование событий.

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

Оглавление