Javatpoint Logo
Javatpoint Logo

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.

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:

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:

Test it Now
Next Topic#




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA