Framework7 Notifications

Notifications are used to display required messages which appear like Push (or Local) iOS notifications.

Usage of Framework7 Notification:

Index	Notification Usage	Description
1)	Notifications JavaScript API	The notifications can also be added or closed with JavaScript by using the related app methods.
2)	Notifications Layout	Framework7 notifications will be added by using JavaScript.
3)	Example iOS	Framework7 allows you to use different types of notifications in your iOS layout.
4)	Example Material	Framework7 notifications can also be used in material layout.

Notifications JavaScript API

You can use JavaScript with Framework7 notifications by using the following App methods:

myApp.addNotification(parameters): This method is used to add/show notification. It accepts required object with notification parameters. This method returns HTMLElement with notification element created dynamically.

myApp.closeNotification(notificationElement): This method is used to close specified notification, which accepts notificationElement as mandatory parameter and it is a HTMLElement or string of required notification.

See the notification parameter required when new notification is added:

Index	Parameter	Type	Description
1)	title	string	It represents the notification title and is equal to notificationTitle app's parameter by default. It is used with iOS theme only.
2)	subtitle	string	It represents the notification subtitle and is equal to notificationSubtitle app's parameter, by default. It is used with iOS theme only.
3)	media	string	It is the notification media element, which is an HTML string with icon or image. It is equal to notificationMedia app's parameter by default. It is used with iOS theme only.
4)	hold	number	It is used to close notification automatically after the specified timeout. It is equal to notificationHold app's parameter by default. It is used with iOS theme only.
5)	closeIcon	boolean	It is disabled to remove close icon from notification. It is equal to notificationCloseIcon app's parameter by default.
6)	button	object	It is the material notification button, which accepts 3 properties namely text, color and close. It is used with material theme only.
7)	closeOnClick	boolean	If this is set to true then, notification will be closed after clicking on it. It is equal to notificationCloseOnClick app's parameter by default.
8)	additionalClass	string	It is used to add additionally specified CSS class to notification element.
9)	custom	string	When you want to use notification with custom HTML layout, this parameter is used. The title, subtitle, media and closeIcon parameters will be ignored while using this parameter.
10)	onClick	function	This callback function will be executed after clicking the notification item.
11)	onClose	function	This callback function will be executed when notification is closed.

Notifications Layouts

You can use JavaScript for notifications. It can also be used for custom styling. The Framework7 will put special notifications div to the body along with the list block, when you add notification.

<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 goes here -->
                     </div>
                     
                     <div class = "item-after">
                        <!-- Notification close icon -->
                        <a href = "#" class = "close-notification"></a>
                     </div>
                  </div>
                  
                  <div class = "item-subtitle">
                     <!-- Notification subtitle goes here -->
                  </div>
                  
                  <div class = "item-text">
                     <!-- Notification message goes here -->
                  </div>
               </div>
               
            </div>
         </li>
      </ul>
   </div>    
</body>

The 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 goes here -->
         </li>
      </ul>
   </div>    
</body>    

iOS Example

Framework7 facilitates you to use different types of notifications in your iOS layout.

Example:

Let's take an example to demonstrate the use of iOS notifications in Framework7:

<!DOCTYPE html>
<html class="with-statusbar-overlay">
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <title>Notifications</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css">
      <link rel="stylesheet" href="custom.css">
   </head>
   <body>
      <div class="views">
         <div class="view view-main">
            <div class="pages navbar-fixed">
               <div data-page="home" class="page">
                  <div class="navbar">
                     <div class="navbar-inner">
                        <div class="center sliding">Notifications</div>
                     </div>
                  </div>
                  <div class="page-content">
                     <div class="content-block">
                        <p><a href="#" class="button notification-default">Default</a></p>
                        <p><a href="#" class="button notification-full">Full-layout notification</a></p>
                        <p><a href="#" class="button notification-custom">Custom image</a></p>
                        <p><a href="#" class="button notification-callback">Callback on close</a></p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
      <script>
         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');
        }
    });
});
      </script>
   </body>
</html>

Test it Now

Framework7 Example Material

Framework7 notifications can also be used in Material layout.

Example:

Let's take an example to demonstrate the use of material layout notifications in Framework7:

<!DOCTYPE html>
<html class="with-statusbar-overlay">
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <title>Notifications</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.css">
   </head>
   <body>
      <div class="views">
         <div class="view view-main">
            <div class="pages navbar-fixed">
               <div data-page="home" class="page">
                  <div class="navbar">
                     <div class="navbar-inner">
                        <div class="center">Notifications</div>
                     </div>
                  </div>
                  <div class="page-content">
                     <div class="content-block">
                        <p><a href="#" class="button button-raised notification-single">Single-line notification</a></p>
                        <p><a href="#" class="button button-raised notification-multi">Multi-line notification</a></p>
                        <p><a href="#" class="button button-raised notification-custom">With custom button</a></p>
                        <p><a href="#" class="button button-raised notification-callback">With callback on close</a></p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
      <script>
         var myApp = new Framework7({
           material: true
         });
         var mainView = myApp.addView('.view-main');

         var $$ = Dom7;

         $$('.notification-single').on('click', function () {
            myApp.addNotification({
               message: 'Battery remaining only 20%'
            });
         });
         $$('.notification-multi').on('click', function () {
            myApp.addNotification({
               message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
            });
         });
         $$('.notification-custom').on('click', function () {
            myApp.addNotification({
               message: 'Nice teal color button',
               button: {
                  text: 'Click me',
                  color: 'teal'
               }
            });
         });
         $$('.notification-callback').on('click', function () {
            myApp.addNotification({
               message: 'Close this notification to see an alert',
               button: {
                  text: 'Close Me',
                  color: 'red'
               },
               onClose: function () {
                  myApp.alert('Callback made.. Notification closed');
               }
            });
         });
      </script>
   </body>
</html>

Test it Now

Next Topic#

← prev next →