- 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 Layout
Description
Although, notifications will be added using JavaScript, it is necessary to understand them for custom styling. The Framework7 will put special notifications div to the body along with the list block, when you add notification. Notification layout for this case is shown below −
<body> ... <div class = "notifications list-block media-list"> <ul> <!-- Single notification item --> <li class = "notification-item"> <div class = "item-content"> <div class = "item-media"> <!-- Notification media --> </div> <div class = "item-inner"> <div class = "item-title-row"> <div class = "item-title"> <!-- Notification title goes here --> </div> <div class = "item-after"> <!-- Notification close icon --> <a href = "#" class = "close-notification"></a> </div> </div> <div class = "item-subtitle"> <!-- Notification subtitle goes here --> </div> <div class = "item-text"> <!-- Notification message goes here --> </div> </div> </div> </li> </ul> </div> </body>
The custom notification will have the following layout −
<body> ... <div class = "notifications list-block media-list"> <ul> <!-- Single notification item --> <li class = "notification-item"> <!-- Custom notification content goes here --> </li> </ul> </div> </body>
framework7_notifications.htm
Advertisements