离子FAB按钮

Ionic FAB是充当容器元素的浮动操作按钮。它们是可以包含一个或多个fab按钮的材料设计组件。应将其放置在固定位置，以使其不会随内容滚动。 FAB必须包含一个主工厂按钮。它还包括一个fab列表，其中包含相关的按钮，这些按钮显示何时按下/单击主fab按钮。它还允许包含多个具有不同边值的fab列表元素。 FAB按钮的形状像一个圆形。我们可以使用标准的组件来访问浮动操作按钮。

具有FAB按钮的想法被用作对页面上已提升操作的调用。例如，如果您有一个项目列表，并且想要再添加一个项目，则添加按钮可以用作“浮动操作按钮”。

默认情况下，浮动操作按钮固定在右下角。但是，我们也可以配置FAB按钮以在视图中提供默认操作。例如，它可以固定在特定位置，或者可以是带有视图的滚动等。

例

以下示例说明了Ionic应用程序中FAB按钮的工作方式。在这里，我们将在组件内放置三个，并为所有这些按钮添加图标。

  
    Ionic FAB
  



   
   
    
      
    
  

  
  
    
      
    
  

   
   
    
      
    
  

输出：

执行上述Ionic应用程序时，将显示以下屏幕。在此屏幕中，您可以看到三个FAB按钮分别显示在顶端，底端和中心开始位置。

离子工厂列表

它包含多个fab按钮。这些fab按钮包含与主fab按钮相关的操作，并在按下或单击时抛出。通过设置side属性的开始，结束，顶部和底部，该按钮还可以指定显示在特定位置。以下示例说明与一起工作的方式。

例

在此示例中，我们将创建一个包含几个FAB按钮的列表。晶圆厂按钮具有不同的图标，例如WhatsApp，Twitter，Facebook和Instagram的图标。这些fab按钮包含与主fab按钮相关的操作，并在按下或单击时抛出。

  
    Ionic FAB
  



  
    
      
    
    
      
    
    
      
    
    
      
    
    
      
    
  

输出：

当您执行上述Ionic应用程序时，将显示以下屏幕。在这里，您将看到共享按钮图标，该图标在按下或单击时会弹出。

按下或单击共享按钮图标后，将显示以下屏幕。在这里，您可以看到Facebook，Instagram，WhatsApp和Twitter的图标。