通知布局（Notifications Layout）

优质

小牛编辑

128浏览

2023-12-01

描述 (Description)

虽然，将使用JavaScript添加通知，但有必要了解它们以进行自定义样式。当您添加通知时，Framework7将向body添加特殊notifications div以及列表块。此案例的通知布局如下所示 -

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