Notification

Notification App Methods
Notification Parameters
Notification Methods & Properties
Notification Events

DOM Events
App and Notification Instance Events

CSS Variables
Examples

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:

Parameter	Type	Default	Description
el	HTMLElement string		Notification element. Can be useful if you already have Notification element in your HTML and want to create new instance using this element
icon	string		Notification icon HTML layout, e.g. `<i class="f7-icons">house</i>` or image `<img src="path/to/icon.png" />`
title	string		Notification title
titleRightText	string		Additional text on the right side of title
subtitle	string		Notification subtitle
text	string		Notification inner text
closeButton	boolean	false	Adds notification close button
closeTimeout	number		Timeout delay (in ms) to close notification automatically
closeOnClick	boolean	false	If enabled, notification will be closed on notification click
swipeToClose	boolean	true	If enabled, notification can be closed by swipe gesture
cssClass	string		Additional css class to add
render	function		Custom function to render Notification. Must return notification html
on	object		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.app	Link to global app instance
notification.el	Notification HTML element
notification.$el	Dom7 instance with notification HTML element
notification.params	Notification 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

Event	Target	Description
notification:open	Notification Element<div class="notification">	Event will be triggered when Notification starts its opening animation
notification:opened	Notification Element<div class="notification">	Event will be triggered after Notification completes its opening animation
notification:close	Notification Element<div class="notification">	Event will be triggered when Notification starts its closing animation
notification:closed	Notification 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.

Event	Arguments	Target	Description
click	notification	notification	Event will be triggered when user clicks on Notification element. As an argument event handler receives notification instance
notificationClick	notification	app
open	notification	notification	Event will be triggered when Notification starts its opening animation. As an argument event handler receives notification instance
notificationOpen	notification	app
opened	notification	notification	Event will be triggered after Notification completes its opening animation. As an argument event handler receives notification instance
notificationOpened	notification	app
close	notification	notification	Event will be triggered when Notification starts its closing animation. As an argument event handler receives notification instance
notificationClose	notification	app
closed	notification	notification	Event will be triggered after Notification completes its closing animation. As an argument event handler receives notification instance
notificationClosed	notification	app
beforeDestroy	notification	notification	Event will be triggered right before Notification instance will be destroyed. As an argument event handler receives notification instance
notificationBeforeDestroy	notification	app

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 .dark,
:root.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 .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-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 .dark,
.md.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 .dark,
.aurora.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);
}

Examples

<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>