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:
|
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;
}
.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-bg-color: rgba(250, 250, 250, 0.95);
--f7-notification-translucent-bg-color-ios: rgba(255, 255, 255, 0.65);
--f7-notification-icon-size: 20px;
--f7-notification-title-color: #000;
--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-color: #444a51;
--f7-notification-title-right-font-size: 13px;
--f7-notification-subtitle-color: #000;
--f7-notification-subtitle-font-size: 15px;
--f7-notification-subtitle-font-weight: 600;
--f7-notification-text-color: #000;
--f7-notification-text-font-size: 15px;
--f7-notification-text-line-height: 1.2;
}
.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-bg-color: #fff;
--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-color: #757575;
--f7-notification-title-right-font-size: 12px;
--f7-notification-subtitle-color: #212121;
--f7-notification-subtitle-font-size: 14px;
--f7-notification-subtitle-font-weight: 400;
--f7-notification-text-color: #757575;
--f7-notification-text-font-size: 14px;
--f7-notification-text-line-height: 1.35;
}
.aurora {
--f7-notification-margin: 10px;
--f7-notification-padding: 10px;
--f7-notification-border-radius: 4px;
--f7-notification-box-shadow: 0px 5px 25px -10px rgba(0, 0, 0, 0.7);
--f7-notification-bg-color: #fff;
--f7-notification-icon-size: 18px;
--f7-notification-title-color: #000;
--f7-notification-title-font-size: 13px;
--f7-notification-title-text-transform: uppercase;
--f7-notification-title-line-height: 1.4;
--f7-notification-title-font-weight: 500;
--f7-notification-title-letter-spacing: 0.02em;
--f7-notification-title-right-color: rgba(255, 255, 255, 0.6);
--f7-notification-title-right-font-size: 13px;
--f7-notification-subtitle-color: #000;
--f7-notification-subtitle-font-size: 12px;
--f7-notification-subtitle-font-weight: 600;
--f7-notification-text-color: #000;
--f7-notification-text-font-size: 12px;
--f7-notification-text-line-height: 1.2;
}
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();
});