Framework7 - 通知布局

描述

虽然通知是使用 JavaScript 添加的，但为了自定义样式，理解它们是必要的。当您添加通知时，Framework7 会将特殊的 notifications 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.htm

打印页面