- 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 - Example Material
Description
Framework7 notifications can also be used in material layout.
Example
The following example demonstrates the use of material layout notifications in Framework7 −
<!DOCTYPE html> <html class="with-statusbar-overlay"> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title>Notifications</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.css"> </head> <body> <div class="views"> <div class="view view-main"> <div class="pages navbar-fixed"> <div data-page="home" class="page"> <div class="navbar"> <div class="navbar-inner"> <div class="center">Notifications</div> </div> </div> <div class="page-content"> <div class="content-block"> <p><a href="#" class="button button-raised notification-single">Single-line notification</a></p> <p><a href="#" class="button button-raised notification-multi">Multi-line notification</a></p> <p><a href="#" class="button button-raised notification-custom">With custom button</a></p> <p><a href="#" class="button button-raised notification-callback">With callback on close</a></p> </div> </div> </div> </div> </div> </div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script> <script> var myApp = new Framework7({ material: true }); var mainView = myApp.addView('.view-main'); var $$ = Dom7; $$('.notification-single').on('click', function () { myApp.addNotification({ message: 'Battery remaining only 20%' }); }); $$('.notification-multi').on('click', function () { myApp.addNotification({ message: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', }); }); $$('.notification-custom').on('click', function () { myApp.addNotification({ message: 'Nice teal color button', button: { text: 'Click me', color: 'teal' } }); }); $$('.notification-callback').on('click', function () { myApp.addNotification({ message: 'Close this notification to see an alert', button: { text: 'Close Me', color: 'red' }, onClose: function () { myApp.alert('Callback made.. Notification closed'); } }); }); </script> </body> </html>
Output
Let us carry out the following steps to see how the above given code works −
Save the above given HTML code as notifications_material.html file in your server root folder.
Open this HTML file as http://localhost/notifications_material.html and the output is displayed as shown below.
This example provides different types of notifications such as single line notification, multiline notification, notification with custom button etc. in the material layout.
framework7_notifications.htm
Advertisements