- Framework7 Tutorial
- Framework7 - Home
- Framework7 - Overview
- Framework7 - Environment
- Framework7 Components
- Framework7 - Layouts
- Framework7 - Navbars
- Framework7 - Toolbars
- Framework7 - Search Bar
- Framework7 - Status Bar
- Framework7 - Side Panels
- Framework7 - Content Block
- Framework7 - Layout Grid
- Framework7 - Overlays
- Framework7 - Preloaders
- Framework7 - Progress Bar
- Framework7 - List Views
- Framework7 - Accordion
- Framework7 - Cards
- Framework7 - Chips
- Framework7 - Buttons
- Framework7 - Action Button
- Framework7 - Forms
- Framework7 - Tabs
- Framework7 - Swiper Slider
- Framework7 - Photo Browser
- Framework7 - Autocomplete
- Framework7 - Picker
- Framework7 - Calendar
- Framework7 - Refresh
- Framework7 - Infinite Scroll
- Framework7 - Messages
- Framework7 - Message Bar
- Framework7 - Notifications
- Framework7 - Lazy Load
- Framework7 Styling
- Framework7 - Color Themes
- Framework7 - Hairlines
- Framework7 Templates
- Framework7 - Templates Overview
- Framework7 - Auto Compilation
- Framework7 - Template7 Pages
- Framework7 Fast Clicks
- Framework7 - Active State
- Framework7 - Tap Hold Event
- Framework7 - Touch Ripple
- Framework7 Useful Resources
- Framework7 - Quick Guide
- Framework7 - Useful Resources
- Framework7 - Discussion
Framework7 - Notifications JavaScript API
Description
The notifications can also be added and closed with JavaScript by using the related app methods as shown below −
myApp.addNotification(parameters) − It is used to add/show notification, which accepts required object with notification parameters. This method returns HTMLElement with notification element created dynamically.
myApp.closeNotification(notificationElement) − It is used to close specified notification, which accepts notificationElement as mandatory parameter and it is a HTMLElement or string of required notification.
The following table shows the notification parameters required when new notification is added −
| S.No | Parameter & Description | Type | Default |
|---|---|---|---|
| 1 | title It represents the notification title and is equal to notificationTitle app's parameter by default. It is used with iOS theme only. |
string | |
| 2 | subtitle It represents the notification subtitle and is equal to notificationSubtitle app's parameter, by default. It is used with iOS theme only. |
string | |
| 3 | media 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. |
string | |
| 4 | hold 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. |
number | |
| 5 | closeIcon It is disabled to remove close icon from notification. It is equal to notificationCloseIcon app's parameter by default. |
boolean | true |
| 6 | button It is the material notification button, which accepts 3 properties namely text, color and close. It is used with material theme only. |
object | |
| 7 | closeOnClick 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. |
boolean | false |
| 8 | additionalClass It is used to add additionally specified CSS class to notification element. |
string | |
| 9 | custom 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. |
string | |
| 10 | onClick This callback function will be executed after clicking the notification item. |
function | |
| 11 | onClose This callback function will be executed when notification is closed. |
function |