Framework7 - morph in Popover

Descrizione

Se vuoi aprire il Popover facendo clic sul pulsante di azione fluttuante, puoi utilizzare la classe Floating-button-to-Popover .

esempio

L'esempio seguente specifica la presentazione del contenuto utilizzando la transizione morph (crea l'aspetto del contenuto con animazioni fluide) nel Popover -

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>Morph To Popover</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages">
               <div class = "page navbar-fixed">
               
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "center">Morph To Popover</div>
                     </div>
                  </div>
                  
                  <a href = "#" class = "floating-button floating-button-to-popover open-popover color-orange"><i class = "icon icon-form-email"></i></a>
                  <div class = "page-content">
                     <div class = "content-block">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
                           sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                           Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                           nisi ut aliquip ex ea commodo consequat.</p>
                        
                        <p> Duis aute irure dolor in reprehenderit in voluptate velit 
                           esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
                           cupidatat non proident, sunt in culpa qui officia deserunt mollit anim 
                           id est laborum.</p>
                        
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
                           accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab 
                           illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
                           Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed 
                           quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
                        
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
                           tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
                           quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
                           consequat.</p>
                        
                        <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
                           dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
                           sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
                           tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
                           nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem 
                           ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt 
                           ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
                           ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet,
                           consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore 
                           magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
                           nisi ut aliquip ex ea commodo consequat.</p>
                        
                        <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
                           dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, 
                           sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
                           doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis 
                           et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
                           voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos 
                           qui ratione voluptatem sequi nesciunt.Sed ut perspiciatis unde omnis iste natus error 
                           sit voluptatem accusantium doloremque laudantium, totam rem  aperiam, eaque ipsa quae 
                           ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo 
                           enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
                           magni dolores eos qui ratione voluptatem sequi nesciunt.Sed ut perspiciatis unde omnis 
                           iste natus error sit voluptatem accusantium doloremque  laudantium, totam rem aperiam, 
                           eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
                           explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, 
                           sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
                     </div>
                  </div>
                  
               </div>
            </div>
         </div>
      </div>
      
      <div style = "width:250px%" class = "popover demo-popover">
         <div class = "popover-inner">
            <div class = "list-block">
               <ul>
                  <li>
                     <a href = "#" class = "item-content item-link">
                        <div class = "item-inner">
                           <div class = "item-title">Mail 1</div>
                        </div>
                     </a>
                  </li>
                  
                  <li>
                     <a href = "#" class = "item-content item-link">
                        <div class = "item-inner">
                           <div class = "item-title">Mail 2</div>
                        </div>
                     </a>
                  </li>
                  
                  <li>
                     <a href = "#" class = "item-content item-link">
                        <div class = "item-inner">
                           <div class = "item-title">Mail 3</div>
                        </div>
                     </a>
                  </li>
               </ul>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         var myApp = new Framework7 ({
            material: true
         });
      </script>
   </body>

</html>

produzione

Eseguiamo i seguenti passaggi sopra indicati per vedere come funziona il codice:

  • Salva il codice HTML sopra indicato come action_button_morph.html file nella cartella principale del server.

  • Apri questo file HTML come http: //localhost/action_button_morph.html e l'output viene visualizzato come mostrato di seguito.

  • Quando si fa clic sul pulsante di azione mobile, il Popover apre il morph a diversi tipi di collegamenti e visualizza alcune informazioni correlate quando si fa clic su di esso. Qui, il codice mostra come è possibile aprire il popover toccando il pulsante di azione mobile sull'interfaccia utente, che aggiunge più transizione.