Framework7 - transformarse en Popover

Descripción

Si desea abrir Popover haciendo clic en el botón de acción flotante, puede usar la clase de botón flotante a Popover .

ejemplo

El siguiente ejemplo especifica la presentación del contenido mediante la transición de transformación (crea la apariencia del contenido con animaciones suaves) en el 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>

salida

Realicemos los siguientes pasos dados anteriormente para ver cómo funciona el código:

  • Guarde el código HTML proporcionado anteriormente como action_button_morph.html archivo en la carpeta raíz de su servidor.

  • Abra este archivo HTML como http: //localhost/action_button_morph.html y la salida se muestra como se muestra a continuación.

  • Cuando se hace clic en el botón de acción flotante, el Popover se abre a diferentes tipos de enlaces y muestra información relacionada al hacer clic en él. Aquí, el código muestra cómo puede abrir el Popover tocando el botón de acción flotante en la interfaz de usuario, que agrega más transición.