Skip to main content

Сповіщення

За допомогою компонента сповіщень ви можете показувати необхідні повідомлення, які виглядають як Push (або локальні) системні сповіщення.

Методи застосунку сповіщень

Розгляньмо пов’язані методи роботи застосунку сповіщення:
МетодОпис
app.notification.create

(parameters)

створити екземпляр Notification

parameters - object. Об'єкт з параметрами сповіщення

Метод повертає створений екземпляр Notification

app.notification.destroy(el)
знищити екземпляр Notification

el - HTMLElement or string(із CSS Selector) або object. Елемент сповіщення або екземпляр сповіщення для знищення.

app.notification.get(el)
отримати екземпляр сповіщення за елементом HTML

el - HTMLElement or string (з CSS Селектором)Елемент сповіщення.

Метод повертає екземпляр Notification

app.notification.open

(el, animate)

відкриває сповіщення

el - HTMLElement or string (with CSS Selector). Елемент сповіщення для відкриття.

animate - boolean. Відкрити сповіщення з анімацією.

Метод повертає екземпляр Notification

app.notification.close

(el, animate

закриває сповіщення

el - HTMLElement or string (with CSS Selector). Елемент сповіщення для закриття.

animate - boolean.Закрити сповіщення з анімацією.

Метод повертає екземпляр Notification

Параметри сповіщення

Тепер давайте подивимося на список доступних параметрів, необхідних для створення сповіщень:
ПараметрЗа замовчуваннямОписТип
el
Елемент сповіщення. Може бути корисним, якщо у вас уже є елемент Notification у вашому HTML і ви хочете створити новий екземпляр за допомогою цього елемента
HTMLElement

string

icon
Макет HTML значка сповіщення, наприклад, ‘<i class="t4-icons">hous</i>’ або зображення ‘<img src="/path/to/icon.png" />’
string
title
Назва сповіщення
string
titleRightText
Додатковий текст праворуч від заголовка
string
subtitle
Підзаголовок сповіщення
string
text
Внутрішній текст сповіщення
string
closeButton
false
Додає кнопку закриття сповіщень
boolean
closeTimeout
Час очікування (у мс), щоб автоматично закрити сповіщення
number
closeOnClick
false
Якщо ввімкнено, сповіщення буде закрито після натискання сповіщення
boolean
swipeToClose
true
Якщо ввімкнено, сповіщення можна закрити жестом пальця
boolean
cssClass
Додатковий клас css для додавання
string
render
Спеціальна функція для відтворення сповіщень. Має повернути сповіщення html
function

ПараметрОписТип
on
Об'єкт з обробниками подій. Наприклад:
object
var notification = app.notification.create({
  title: 'John Doe',
  text: 'Hello, how are you?',
  on: {
    opened: function () {
      console.log('Notification opened')
    }
  }
})
Зауважте, що всі наведені нижче параметри можна використовувати в глобальних параметрах застосунку у властивості notification , щоб встановити значення за замовчуванням для всіх сповіщень. Наприклад:
var app = new Techno4({
  notification: {
    title: 'My App',
    closeTimeout: 3000,
  }
});

Методи та властивості сповіщень

Отже, щоб створити сповіщення, ми повинні викликати:
var notification = app.notification.create({ /* parameters */ })
Після цього у нас є його ініціалізований екземпляр (як notification змінна у прикладі вище) з корисними методами та властивостями:
Властивості
Властивість Опис
notification.app
Посилання на глобальний екземпляр застосунку
notification.el
HTML-елемент сповіщення
notification.$el
Екземпляр Dom64 з елементом HTML сповіщень
notification.params
Параметри сповіщення
Методи
МетодОпис
notification.open()
Відкрити сповіщення
notification.close()
Закрити сповіщення
notification.on(event, handler)
Додати обробник подій
notification.once(event, handler)
Додати обробник подій, який буде видалено після запуску
notification.off(event, handler)
Видалити обробник подій
notification.off(event)
Видалити всі обробники для вказаної події
notification.emit(event, ...args)
Запустити подію на єкземплярі

Події сповіщень

Сповіщення запускатиме такі події DOM в елементі сповіщення та події в додатку та екземплярі сповіщення:

Події DOM

ПодіяОб'єктОпис
notification:open
Елемент сповіщення

<div class="notification">

Подію буде запущено, коли сповіщення розпочне свою початкову анімацію
notification:opened
Елемент сповіщення

<div class="notification">

Подію буде запущено після завершення анімації сповіщення
notification:close
Елемент сповіщення

<div class="notification">

Подію буде запущено, коли сповіщення розпочне свою кінцеву анімацію
notification:closed
Елемент сповіщення

<div class="notification">

Подію буде запущено після завершення анімації сповіщення

Події екземплярів застосунку та сповіщень

Екземпляр сповіщень заспускає події як у себе, так і в екземплярі застосунку. Події екземплярів застосунку мають ті самі назви з префіксом notification.
ПодіяАргументОписОб'єкт
click
notification
Подія буде ініційована, коли користувач клацне елемент сповіщення. Як аргумент обробник події отримує екземпляр сповіщення
notification
notificationClick
notification
Подія буде ініційована, коли користувач клацне елемент сповіщення. Як аргумент обробник події отримує екземпляр сповіщення
app
open
notification
Подію буде запущено, коли сповіщення розпочне свою початкову анімацію. Як аргумент обробник події отримує екземпляр сповіщення
notification
notificationOpen
notification
Подію буде запущено, коли сповіщення розпочне свою початкову анімацію. Як аргумент обробник події отримує екземпляр сповіщення
app
opened
notification
Подію буде запущено після завершення анімації сповіщення. Як аргумент обробник події отримує екземпляр сповіщення
notification
notificationOpened
notification
Подію буде запущено після завершення анімації сповіщення. Як аргумент обробник події отримує екземпляр сповіщення
app
close
notification
Подію буде запущено, коли сповіщення розпочне свою кінцеву анімацію. Як аргумент обробник події отримує екземпляр сповіщення
notification
notificationClose
notification
Подію буде запущено, коли сповіщення розпочне свою кінцеву анімацію. Як аргумент обробник події отримує екземпляр сповіщення
app
closed
notification
Подію буде запущено після завершення анімації сповіщення. Як аргумент обробник події отримує екземпляр сповіщення
notification
notificationClosed
notification
Подію буде запущено після завершення анімації сповіщення. Як аргумент обробник події отримує екземпляр сповіщення
app
beforeDestroy
notification
Подія буде запущена безпосередньо перед тим, як екземпляр сповіщення буде знищено. Як аргумент обробник події отримує екземпляр сповіщення
notification
notificationBeforeDestroy
notification
Подія буде запущена безпосередньо перед тим, як екземпляр сповіщення буде знищено. Як аргумент обробник події отримує екземпляр сповіщення
app

Змінні CSS

Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).
:root {	
  --t4-notification-max-width: 568px;
  --t4-notification-subtitle-text-transform: none;
  --t4-notification-subtitle-line-height: 1.35;
  --t4-notification-text-text-transform: none;
  --t4-notification-text-font-weight: 400;
}
.ios {
  --t4-notification-margin: 8px;
  --t4-notification-padding: 10px;
  --t4-notification-border-radius: 12px;
  --t4-notification-box-shadow: 0px 5px 25px -10px rgba(0, 0, 0, 0.7);
  --t4-notification-icon-size: 20px;
  --t4-notification-title-font-size: 13px;
  --t4-notification-title-text-transform: uppercase;
  --t4-notification-title-line-height: 1.4;
  --t4-notification-title-font-weight: 400;
  --t4-notification-title-letter-spacing: 0.02em;
  --t4-notification-title-right-font-size: 13px;
  --t4-notification-subtitle-font-size: 15px;
  --t4-notification-subtitle-font-weight: 600;
  --t4-notification-text-font-size: 15px;
  --t4-notification-text-line-height: 1.2;
  --t4-notification-bg-color: rgba(250, 250, 250, 0.95);
  --t4-notification-bg-color-rgb: 255, 255, 255;
  --t4-notification-title-color: #000;
  --t4-notification-title-right-color: rgba(0, 0, 0, 0.45);
  --t4-notification-subtitle-color: #000;
  --t4-notification-text-color: #000;
}
.ios .dark,
.ios.dark {
  --t4-notification-bg-color: rgba(30, 30, 30, 0.95);
  --t4-notification-bg-color-rgb: 30, 30, 30;
  --t4-notification-title-color: #fff;
  --t4-notification-text-color: #fff;
  --t4-notification-subtitle-color: #fff;
  --t4-notification-title-right-color: rgba(255, 255, 255, 0.55);
}
.md {
  --t4-notification-margin: 16px;
  --t4-notification-padding: 16px;
  --t4-notification-border-radius: 16px;
  --t4-notification-box-shadow: none;
  --t4-notification-icon-size: 24px;
  --t4-notification-title-font-size: 16px;
  --t4-notification-title-text-transform: none;
  --t4-notification-title-line-height: 1.35;
  --t4-notification-title-font-weight: 500;
  --t4-notification-title-right-font-size: 12px;
  --t4-notification-subtitle-font-size: 14px;
  --t4-notification-subtitle-font-weight: 400;
  --t4-notification-text-font-size: 14px;
  --t4-notification-text-line-height: 1.35;
}
.md,
.md .dark,
.md [class*='color-'] {
  --t4-notification-title-color: var(--t4-md-on-surface);
  --t4-notification-bg-color: var(--t4-md-surface-5);
  --t4-notification-text-color: var(--t4-md-on-surface-variant);
  --t4-notification-title-right-color: var(--t4-md-on-surface-variant);
  --t4-notification-subtitle-color: var(--t4-md-on-surface);
}

Приклади

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Notifications</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block block-strong-ios block-outline-ios">
        <p>Techno4 comes with simple Notifications component that allows you to show some useful messages to user and
          request basic actions.</p>
        <p><a class="button button-fill" @click=${showNotificationFull}>Full layout notification</a></p>
        <p><a class="button button-fill" @click=${showNotificationWithButton}>With close button</a></p>
        <p><a class="button button-fill" @click=${showNotificationCloseOnClick}>Click to close</a></p>
        <p><a class="button button-fill" @click=${showNotificationCallbackOnClose}>Callback on close</a></p>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $t4, $el, $on }) => {
    let notificationFull;
    let notificationWithButton;
    let notificationCloseOnClick;
    let notificationCallbackOnClose;

    const showNotificationFull = () => {
      // Create notification
      if (!notificationFull) {
        notificationFull = $t4.notification.create({
          icon: '<i class="icon icon-t4"></i>',
          title: 'Techno4',
          titleRightText: 'now',
          subtitle: 'This is a subtitle',
          text: 'This is a simple notification message',
          closeTimeout: 3000,
        });
      }
      // Open it
      notificationFull.open();
    }
    const showNotificationWithButton = () => {
      // Create notification
      if (!notificationWithButton) {
        notificationWithButton = $t4.notification.create({
          icon: '<i class="icon icon-t4"></i>',
          title: 'Techno4',
          subtitle: 'Notification with close button',
          text: 'Click (x) button to close me',
          closeButton: true,
        });
      }
      // Open it
      notificationWithButton.open();
    }
    const showNotificationCloseOnClick = () => {
      // Create notification
      if (!notificationCloseOnClick) {
        notificationCloseOnClick = $t4.notification.create({
          icon: '<i class="icon icon-t4"></i>',
          title: 'Techno4',
          titleRightText: 'now',
          subtitle: 'Notification with close on click',
          text: 'Click me to close',
          closeOnClick: true,
        });
      }
      // Open it
      notificationCloseOnClick.open();
    }
    const showNotificationCallbackOnClose = () => {
      // Create notification
      if (!notificationCallbackOnClose) {
        notificationCallbackOnClose = $t4.notification.create({
          icon: '<i class="icon icon-t4"></i>',
          title: 'Techno4',
          titleRightText: 'now',
          subtitle: 'Notification with close on click',
          text: 'Click me to close',
          closeOnClick: true,
          on: {
            close: function () {
              $t4.dialog.alert('Notification closed');
            },
          },
        });
      }
      // Open it
      notificationCallbackOnClose.open();
    }

    $on('pageBeforeRemove', () => {
      $t4.notification.close();
      if (notificationFull) notificationFull.destroy();
      if (notificationWithButton) notificationWithButton.destroy();
      if (notificationCloseOnClick) notificationCloseOnClick.destroy();
      if (notificationCallbackOnClose) notificationCallbackOnClose.destroy();
    });

    return $render;
  };
</script>