Notification

With Notification component you can show required messages that looks like Push (or Local) system notifications.

Notification App Methods

Let's look at related App methods to work with Notification:

app.notification.create(parameters)- create Notification instance

  • parameters - object. Object with notification parameters

Method returns created Notification's instance

app.notification.destroy(el)- destroy Notification instance

  • el - HTMLElement or string (with CSS Selector) or object. Notification element or Notification instance to destroy.

app.notification.get(el)- get Notification instance by HTML element

  • el - HTMLElement or string (with CSS Selector). Notification element.

Method returns Notification's instance

app.notification.open(el, animate)- opens Notification

  • el - HTMLElement or string (with CSS Selector). Notification element to open.
  • animate - boolean. Open Notification with animation.

Method returns Notification's instance

app.notification.close(el, animate)- closes Notification

  • el - HTMLElement or string (with CSS Selector). Notification element to close.
  • animate - boolean. Close Notification with animation.

Method returns Notification's instance

Notification Parameters

Now let's look at list of available parameters we need to create Notification:

ParameterTypeDefaultDescription
elHTMLElement
string
Notification element. Can be useful if you already have Notification element in your HTML and want to create new instance using this element
iconstringNotification icon HTML layout, e.g. <i class="f7-icons">house</i> or image <img src="path/to/icon.png" />
titlestringNotification title
titleRightTextstringAdditional text on the right side of title
subtitlestringNotification subtitle
textstringNotification inner text
closeButtonbooleanfalseAdds notification close button
closeTimeoutnumberTimeout delay (in ms) to close notification automatically
closeOnClickbooleanfalseIf enabled, notification will be closed on notification click
swipeToClosebooleantrueIf enabled, notification can be closed by swipe gesture
cssClassstringAdditional css class to add
renderfunctionCustom function to render Notification. Must return notification html
onobject

Object with events handlers. For example:

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

Note that all following parameters can be used in global app parameters under notification property to set defaults for all notifications. For example:

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

Notification Methods & Properties

So to create Notification we have to call:

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

After that we have its initialized instance (like notification variable in example above) with useful methods and properties:

Properties
notification.appLink to global app instance
notification.elNotification HTML element
notification.$elDom7 instance with notification HTML element
notification.paramsNotification parameters
Methods
notification.open()Open notification
notification.close()Close notification
notification.on(event, handler)Add event handler
notification.once(event, handler)Add event handler that will be removed after it was fired
notification.off(event, handler)Remove event handler
notification.off(event)Remove all handlers for specified event
notification.emit(event, ...args)Fire event on instance

Notification Events

Notification will fire the following DOM events on notification element and events on app and notification instance:

DOM Events

EventTargetDescription
notification:openNotification Element<div class="notification">Event will be triggered when Notification starts its opening animation
notification:openedNotification Element<div class="notification">Event will be triggered after Notification completes its opening animation
notification:closeNotification Element<div class="notification">Event will be triggered when Notification starts its closing animation
notification:closedNotification Element<div class="notification">Event will be triggered after Notification completes its closing animation

App and Notification Instance Events

Notification instance emits events on both self instance and app instance. App instance events has same names prefixed with notification.

EventArgumentsTargetDescription
clicknotificationnotificationEvent will be triggered when user clicks on Notification element. As an argument event handler receives notification instance
notificationClicknotificationapp
opennotificationnotificationEvent will be triggered when Notification starts its opening animation. As an argument event handler receives notification instance
notificationOpennotificationapp
openednotificationnotificationEvent will be triggered after Notification completes its opening animation. As an argument event handler receives notification instance
notificationOpenednotificationapp
closenotificationnotificationEvent will be triggered when Notification starts its closing animation. As an argument event handler receives notification instance
notificationClosenotificationapp
closednotificationnotificationEvent will be triggered after Notification completes its closing animation. As an argument event handler receives notification instance
notificationClosednotificationapp
beforeDestroynotificationnotificationEvent will be triggered right before Notification instance will be destroyed. As an argument event handler receives notification instance
notificationBeforeDestroynotificationapp

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;
}
.ios {
  --f7-notification-margin: 8px;
  --f7-notification-padding-horizontal: 10px;
  --f7-notification-padding-vertical: 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 .dark,
.ios.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-subtitle-color: #fff;
  --f7-notification-title-right-color: rgba(255, 255, 255, 0.55);
}
.md {
  --f7-notification-margin: 16px;
  --f7-notification-padding-vertical: 20px;
  --f7-notification-padding-horizontal: 16px;
  --f7-notification-border-radius: 16px;
  --f7-notification-box-shadow: none;
  --f7-notification-icon-size: 24px;
  --f7-notification-title-font-size: 16px;
  --f7-notification-title-text-transform: none;
  --f7-notification-title-line-height: 1.35;
  --f7-notification-title-font-weight: 500;
  --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;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-notification-title-color: var(--f7-md-on-surface);
  --f7-notification-bg-color: var(--f7-md-surface-5);
  --f7-notification-text-color: var(--f7-md-on-surface-variant);
  --f7-notification-title-right-color: var(--f7-md-on-surface-variant);
  --f7-notification-subtitle-color: var(--f7-md-on-surface);
}

Examples

notifications.html
<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>Framework7 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, { $f7, $el, $on }) => {
    let notificationFull;
    let notificationWithButton;
    let notificationCloseOnClick;
    let notificationCallbackOnClose;

    const showNotificationFull = () => {
      // Create notification
      if (!notificationFull) {
        notificationFull = $f7.notification.create({
          icon: '<i class="icon icon-f7"></i>',
          title: 'Framework7',
          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 = $f7.notification.create({
          icon: '<i class="icon icon-f7"></i>',
          title: 'Framework7',
          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 = $f7.notification.create({
          icon: '<i class="icon icon-f7"></i>',
          title: 'Framework7',
          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 = $f7.notification.create({
          icon: '<i class="icon icon-f7"></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 it
      notificationCallbackOnClose.open();
    }

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

    return $render;
  };
</script>