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

Framework7-通知レイアウト

説明