With Notifications component you can show required messages that looks like Push (or Local) iOS notifications.
To add/close notifications we need to use related App's methods:
myApp.addNotification(parameters) - add/show notification with specified parameters
myApp.closeNotification(notificationElement) - close specified notification
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:
Where
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 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>
<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');
}
});
});
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');
}
});
});