Framework7 - 通知布局

说明

虽然通知将使用 JavaScript 添加，但必须了解它们才能进行自定义样式。当您添加通知时，Framework7 会将特殊的 通知 div 与列表块一起放入 body。此案例的通知布局如下所示 −

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

自定义通知将具有以下布局 −

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