Language: ENCN

Notifications

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

Notifications JavaScript API

To add/close notifications we need to use related App's methods:

myApp.addNotification(parameters) - add/show notification with specified parameters

  • parameters - object with notification parameters. Required
  • This method returns HTMLElement with dynamically created notification element

myApp.closeNotification(notificationElement) - close specified notification

  • notificationElement - HTMLElement or string (with CSS selector) - of required Notification. Required

Let's look at notification parameters when we add new notification:

Parameter Type Default Description
title string Notification title. By default, equal to the notificationTitle App's parameter - undefined. iOS theme only
subtitle string Notification subtitle. By default, equal to the notificationSubtitle App's parameter - undefined. iOS theme only
message string Notification message
media string Notification media element - HTML string with icon or image. By default, equal to the notificationMedia App's parameter - undefined. iOS theme only
hold number Specify this parameter (in ms) if you want to close notification automatically after specified timeout. By default, equal to the notificationHold App's parameter - undefined.
closeIcon boolean true Disable to remove Close icon/button from notification. By default, equal to the notificationCloseIcon App's parameter - true. iOS theme only
button object Material notification button. Accepts 3 properties:
{
  text: 'close',
  color: 'blue',
  close: true
}

Where

  • text - button text. By default equal to notificationCloseButtonText App's parameter
  • color - button color
  • close - close notification on button click

Material theme only

closeOnClick boolean false Set to true and notification will be closed after click on it. By default, equal to the notificationCloseOnClick App's parameter - false.
additionalClass string Add additional specified CSS class to notification element (for additional styling)
custom string Use this parameter if you want to use notification with custom HTML layout. "title", "subtitle", "media" and "closeIcon" parameters will be ignored when using "custom" parameter
onClick function Callback function that will be executed after click on notification item
onClose function Callback function that will be executed when notification is closed (by click on close icon or via API using myApp.closeNotification method)

Notifications Layout

Notifications are just particual case of Media List View. You probably don't need to use it manually because Notifications will be added using JavaScript, but it could be useful for understanding and custom styling. When you add notification F7 will add special "notifications" div to the body with list block:

<body>
  ...
  <div class="notifications list-block media-list">
    <ul>
 
      <!-- Single notification item -->
      <li class="notification-item">
        <div class="item-content">
          <div class="item-media">
            <!-- Notification media -->
          </div>
          <div class="item-inner">
            <div class="item-title-row">
              <div class="item-title">
                <!-- Notification title -->
              </div>
              <div class="item-after">
                  <!-- Notification close icon -->
                  <a href="#" class="close-notification"></a>
              </div>
            </div>
            <div class="item-subtitle">
              <!-- Notification subtitle -->
            </div>
            <div class="item-text">
              <!-- Notification message -->
            </div>
          </div>
        </div>
      </li>
 
    </ul>
  </div>    
</body>

Custom notification will have the following layout:

<body>
  ...
  <div class="notifications list-block media-list">
    <ul>
 
      <!-- Single notification item -->
      <li class="notification-item">
        <!-- Custom notification content -->
      </li>
 
    </ul>
  </div>    
</body>  

Example iOS

<div class="page-content">
  <div class="content-block">
    <p><a href="#" class="button notification-default">Default notification</a></p>
    <p><a href="#" class="button notification-full">Full-layout notification</a></p>
    <p><a href="#" class="button notification-custom">With custom image</a></p>
    <p><a href="#" class="button notification-callback">With callback on close</a></p>
  </div>
</div> 
var myApp = new Framework7(); 
var mainView = myApp.addView('.view-main');
 
var $$ = Dom7;
 
$$('.notification-default').on('click', function () {
    myApp.addNotification({
        title: 'Framework7',
        message: 'This is a simple notification message with title and message'
    });
});
$$('.notification-full').on('click', function () {
    myApp.addNotification({
        title: 'Framework7',
        subtitle: 'Notification subtitle',
        message: 'This is a simple notification message with custom icon and subtitle',
        media: '<i class="icon icon-f7"></i>'
    });
});
$$('.notification-custom').on('click', function () {
    myApp.addNotification({
        title: 'My Awesome App',
        subtitle: 'New message from John Doe',
        message: 'Hello, how are you? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut posuere erat. Pellentesque id elementum urna, a aliquam ante. Donec vitae volutpat orci. Aliquam sed molestie risus, quis tincidunt dui.',
        media: '<img width="44" height="44" style="border-radius:100%" src="http://lorempixel.com/output/people-q-c-100-100-9.jpg">'
    });
});
$$('.notification-callback').on('click', function () {
    myApp.addNotification({
        title: 'My Awesome App',
        subtitle: 'New message from John Doe',
        message: 'Hello, how are you? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut posuere erat. Pellentesque id elementum urna, a aliquam ante. Donec vitae volutpat orci. Aliquam sed molestie risus, quis tincidunt dui.',
        media: '<img width="44" height="44" style="border-radius:100%" src="http://lorempixel.com/output/people-q-c-100-100-9.jpg">',
        onClose: function () {
            myApp.alert('Notification closed');
        }
    });
});

Example Material

var myApp = new Framework7({
  material: true
}); 
var mainView = myApp.addView('.view-main');
 
var $$ = Dom7;
 
$$('.notification-single').on('click', function () {
    myApp.addNotification({
        message: 'Simple message'
    });
});
$$('.notification-multi').on('click', function () {
    myApp.addNotification({
        message: 'Multi-line message. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in magna nisi.',
    });
});
$$('.notification-custom').on('click', function () {
    myApp.addNotification({
        message: 'Nice yellow button',
        button: {
            text: 'Click me',
            color: 'yellow'
        }
    });
});
$$('.notification-callback').on('click', function () {
    myApp.addNotification({
        message: 'Close me to see Alert',
        button: {
            text: 'Close Me',
            color: 'lightgreen'
        },
        onClose: function () {
            myApp.alert('Notification closed');
        }
    });
});