Framework7 - Diseño de notificaciones

Descripción

Aunque las notificaciones se agregarán usando JavaScript, es necesario comprenderlas para personalizar el estilo. Framework7 colocará notificaciones especiales div en el cuerpo junto con el bloque de lista, cuando agregue una notificación. El diseño de notificación para este caso se muestra a continuación:

<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>

La notificación personalizada tendrá el siguiente diseño:

<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>

↰ Previous page