通知

通知コンポーネントを使うと、Push（またはLocal）システム通知のように必要なメッセージを表示できます。

通知アプリのメソッド

Notificationに関連するAppメソッドを見てみましょう。

通知パラメータ

それでは、Notificationを作成するために必要な、利用可能なパラメータのリストを見てみましょう。

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

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

通知のメソッドとプロパティ

通知を作成するためには、呼び出しが必要です。

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

その後、有用なメソッドとプロパティを持つ、初期化されたインスタンス（上記の例では、notification変数のようなもの）を取得します。

通知イベント

通知では、通知要素のDOMイベント、アプリと通知インスタンスのイベントが発生します。

DOMイベント

アプリとNotificationインスタンスのイベント

通知インスタンスは、セルフインスタンスとアプリインスタンスの両方でイベントを発行します。アプリインスタンスのイベントは同じ名前で、プレフィックスとして notification が付きます。

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

:root {
  --f7-notification-max-width: 568px;
  --f7-notification-subtitle-text-transform: none;
  --f7-notification-subtitle-line-height: 1.35;
  --f7-notification-text-text-transform: none;
  --f7-notification-text-font-weight: 400;
}
:root .theme-dark,
:root.theme-dark {
  --f7-notification-subtitle-color: #fff;
}
.ios {
  --f7-notification-margin: 8px;
  --f7-notification-padding: 10px;
  --f7-notification-border-radius: 12px;
  --f7-notification-box-shadow: 0px 5px 25px -10px rgba(0, 0, 0, 0.7);
  --f7-notification-icon-size: 20px;
  --f7-notification-title-font-size: 13px;
  --f7-notification-title-text-transform: uppercase;
  --f7-notification-title-line-height: 1.4;
  --f7-notification-title-font-weight: 400;
  --f7-notification-title-letter-spacing: 0.02em;
  --f7-notification-title-right-font-size: 13px;
  --f7-notification-subtitle-font-size: 15px;
  --f7-notification-subtitle-font-weight: 600;
  --f7-notification-text-font-size: 15px;
  --f7-notification-text-line-height: 1.2;
  --f7-notification-bg-color: rgba(250, 250, 250, 0.95);
  --f7-notification-bg-color-rgb: 255, 255, 255;
  --f7-notification-title-color: #000;
  --f7-notification-title-right-color: rgba(0, 0, 0, 0.45);
  --f7-notification-subtitle-color: #000;
  --f7-notification-text-color: #000;
}
.ios .theme-dark,
.ios.theme-dark {
  --f7-notification-bg-color: rgba(30, 30, 30, 0.95);
  --f7-notification-bg-color-rgb: 30, 30, 30;
  --f7-notification-title-color: #fff;
  --f7-notification-text-color: #fff;
  --f7-notification-title-right-color: rgba(255, 255, 255, 0.55);
}
.md {
  --f7-notification-margin: 0px;
  --f7-notification-padding: 16px;
  --f7-notification-border-radius: 0px;
  --f7-notification-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.24);
  --f7-notification-icon-size: 16px;
  --f7-notification-title-color: var(--f7-theme-color);
  --f7-notification-title-font-size: 12px;
  --f7-notification-title-text-transform: none;
  --f7-notification-title-line-height: 1;
  --f7-notification-title-font-weight: 400;
  --f7-notification-title-right-font-size: 12px;
  --f7-notification-subtitle-font-size: 14px;
  --f7-notification-subtitle-font-weight: 400;
  --f7-notification-text-font-size: 14px;
  --f7-notification-text-line-height: 1.35;
  --f7-notification-bg-color: #fff;
  --f7-notification-title-right-color: rgba(0, 0, 0, 0.54);
  --f7-notification-subtitle-color: #212121;
  --f7-notification-text-color: rgba(0, 0, 0, 0.54);
}
.md .theme-dark,
.md.theme-dark {
  --f7-notification-bg-color: #242424;
  --f7-notification-title-right-color: rgba(255, 255, 255, 0.54);
  --f7-notification-text-color: rgba(255, 255, 255, 0.54);
}
.aurora {
  --f7-notification-margin: 16px;
  --f7-notification-padding: 16px;
  --f7-notification-border-radius: 8px;
  --f7-notification-box-shadow: 0px 5px 25px -10px rgba(0, 0, 0, 0.7);
  --f7-notification-icon-size: 24px;
  --f7-notification-title-font-size: 16px;
  --f7-notification-title-text-transform: none;
  --f7-notification-title-line-height: 1.4;
  --f7-notification-title-font-weight: 600;
  --f7-notification-title-letter-spacing: 0.02em;
  --f7-notification-title-right-font-size: 14px;
  --f7-notification-subtitle-font-size: 14px;
  --f7-notification-subtitle-font-weight: 600;
  --f7-notification-text-font-size: 14px;
  --f7-notification-text-line-height: 1.35;
  --f7-notification-bg-color: #fff;
  --f7-notification-title-color: #000;
  --f7-notification-title-right-color: rgba(0, 0, 0, 0.6);
  --f7-notification-subtitle-color: #000;
  --f7-notification-text-color: #000;
}
.aurora .theme-dark,
.aurora.theme-dark {
  --f7-notification-bg-color: #242424;
  --f7-notification-title-color: #fff;
  --f7-notification-text-color: #fff;
  --f7-notification-title-right-color: rgba(255, 255, 255, 0.54);
}

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Notifications</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block">
        <p><a class="button button-fill open-full" href="#">Full-layout notification</a></p>
        <p><a class="button button-fill open-with-button" href="#">With close button</a></p>
        <p><a class="button button-fill open-click-to-close" href="#">Click to close</a></p>
        <p><a class="button button-fill open-callback-on-close" href="#">Callback on close</a></p>
      </div>
    </div>
  </div>
</template>
<style>
  .demo-icon {
    background: #EE350F;
    color: #fff;
    border-radius: 50%;
    text-align: center;
  }
</style>
<script>
  export default (props, { $, $f7, $on }) => {
    $on('pageInit', () => {
      // Create full-layout notification
      var notificationFull = $f7.notification.create({
        icon: '<i class="icon demo-icon">7</i>',
        title: 'Framework7',
        titleRightText: 'now',
        subtitle: 'This is a subtitle',
        text: 'This is a simple notification message',
        closeTimeout: 3000,
      });

      // Create notification with close button
      var notificationWithButton = $f7.notification.create({
        icon: '<i class="icon demo-icon">7</i>',
        title: 'Framework7',
        subtitle: 'Notification with close button',
        text: 'Click (x) button to close me',
        closeButton: true,
      });

      // Create notification with click to close
      var notificationClickToClose = $f7.notification.create({
        icon: '<i class="icon demo-icon">7</i>',
        title: 'Framework7',
        titleRightText: 'now',
        subtitle: 'Notification with close on click',
        text: 'Click me to close',
        closeOnClick: true,
      })

      // With callback on close
      var notificationCallbackOnClose = $f7.notification.create({
        icon: '<i class="icon demo-icon">7</i>',
        title: 'Framework7',
        titleRightText: 'now',
        subtitle: 'Notification with close on click',
        text: 'Click me to close',
        closeOnClick: true,
        on: {
          close: function () {
            $f7.dialog.alert('Notification closed');
          },
        },
      });

      // Open Notifications
      $('.open-full').on('click', function () {
        notificationFull.open();
      });
      $('.open-with-button').on('click', function () {
        notificationWithButton.open();
      });
      $('.open-click-to-close').on('click', function () {
        notificationClickToClose.open();
      });
      $('.open-callback-on-close').on('click', function () {
        notificationCallbackOnClose.open();
      });
    })

    return $render;
  }

</script>