Framework7动作按钮 - 芒果文档

Framework7浮动操作按钮

Framework7浮动操作按钮用于提升操作。它就像漂浮在UI上方的带圆圈的图标，并具有包括变形，启动和转移锚点在内的运动行为。

注意：“浮动动作”按钮仅在“材质”主题中受支持。

Framework7中使用3种类型的操作按钮：

浮动操作按钮布局：非常简单。您只需要将其作为页面或视图的子项放置即可。
变形弹出窗口：如果要在单击浮动操作按钮时打开弹出窗口，则可以使用浮动按钮弹出窗口类。
快速拨号：通过使用快速拨号单击浮动操作按钮，可以调用相关操作。

浮动动作按钮布局

这是一个非常简单的布局。您只需要将其作为页面或视图的子项放置即可。使用“浮动按钮”?类以在您的应用程序中使用浮动操作按钮。

例

让我们以一个示例来演示浮动操作按钮的布局。




   
      
      
      
      Create and open Action Sheet
      
      
      
      
   

   
      
         
            
               
                  
                  
                     
                        Floating Action Button Layout
                     
                  
                  
                  
                  
                     
                        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.
                           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.
                           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.
                           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.

变形弹出窗口

如果要在单击浮动操作按钮时打开弹出窗口，则使用“浮动按钮弹出窗口”类。

例

让我们以一个示例来演示从变体到弹出框的过渡。




   
      
      
      
      Morph To Popover
      
      
      
      
   

   
      
         
            
               
               
                  
                     
                        Morph To Popover
                     
                  
                  
                  
                  
                     
                        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.
                           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.
                           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.
                     
                  
                  
               
            
         
      
      
      
         
            
               
                  
                     
                        
                           Mail 1
                        
                     
                  
                  
                  
                     
                        
                           Mail 2
                        
                     
                  
                  
                  
                     
                        
                           Mail 3

快速拨号

您可以在浮点按钮上使用快速拨号。通过单击浮动动作按钮，可以调用相关动作。快速拨号操作中可以使用最少3个操作，最多6个操作。

例

让我们举个例子，看看按下浮动按钮时不同类型的快速拨号动作。




   
      
      
      
      Floating Action Button Speed Dial
      
      
      
      
   

   
      
         
            
               
               
                  
                     
                        Speed Dial
                     
                  
                  
                  
                     
                     
                        
                        
                        
                        
                        
                        
                     
                  
                  
                  
                     
                        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.
                           
                           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.
                           
                           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.
                     
                  
                  
               
            
         
      
      
      
         
            
               
                  
                     
                        
                           Mail 1
                        
                     
                  
                  
                  
                     
                        
                           Mail 2
                        
                     
                  
                  
                  
                     
                        
                           Mail 3