-
Get Started
-
Events
-
Router / Navigation
-
Components
- App / Core
- Accordion / Collapsible
- Action Sheet / Actions
- Autocomplete
- Badge
- Block / Content Block
- Button
- Calendar / Datepicker
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Data Table
- Dialog
- Elevation
- Floating Action Button / FAB
- Form Data / Storage
- Gauge
- Grid / Layout Grid
- Icons
- Infinite Scroll
- Inputs / Form Inputs
- Lazy Load
- Link
- List View
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Notification
- Page
- Panel / Side Panels
- Photo Browser
- Picker
- Popover
- Popup
- Preloader
- Progressbar
- Pull to Refresh
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable List
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Timeline
- Toast
- Toggle
- Toolbar / Tabbar
- Tooltip
- Video Intelligence (vi)
- View / Router
- Virtual List
-
Framework7 Icons
-
Styling
-
Dom7
-
Template7
-
Fast Clicks
-
Utilities
-
Plugins API
-
Lazy Modules
-
Custom Build
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 |
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();
});