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:

    Parameter Type Default Description
    el HTMLElement 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">home</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

    Examples

    <div class="block">
      <p>
        <a class="button button-raised open-full" href="#">Full-layout notification</a>
      </p>
      <p>
        <a class="button button-raised open-with-button" href="#">With close button</a>
      </p>
      <p>
        <a class="button button-raised open-click-to-close" href="#">Click to close</a>
      </p>
      <p>
        <a class="button button-raised open-callback-on-close" href="#">Callback on close</a>
      </p>
    </div>
    var app = new Framework7();
    
    var $$ = Dom7;
    
    // Create full-layout notification
    var notificationFull = app.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 = app.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 = app.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 = app.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 () {
          app.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();
    });