Навігація

Сповіщення

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

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

var notification = app.notification.create({
  title: 'John Doe',
  text: 'Hello, how are you?',
  on: {
    opened: function () {
      console.log('Notification opened')
    }
  }
})

var app = new Techno4({
  notification: {
    title: 'My App',
    closeTimeout: 3000,
  }
});

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

var notification = app.notification.create({ /* parameters */ })

Властивості

Методи

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

Події DOM

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

Змінні 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>