Ionic FAB按钮

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

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

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

例

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

<ion-header translucent>
  <ion-toolbar color="danger">
    <ion-title>Ionic FAB</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding" color="light">
   <!-- fab placed to the top end -->
   <ion-fab vertical="top" horizontal="end" slot="fixed">
    <ion-fab-button>
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>

  <!-- fab placed to the bottom end -->
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button>
      <ion-icon name="arrow-dropleft"></ion-icon>
    </ion-fab-button>
  </ion-fab>

   <!-- fab placed to the (vertical) center and start -->
   <ion-fab vertical="center" horizontal="start" slot="fixed">
    <ion-fab-button>
      <ion-icon name="share"></ion-icon>
    </ion-fab-button>
  </ion-fab>

</ion-content>

输出：

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

Ionic工厂列表

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

例

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

<ion-header translucent>
  <ion-toolbar color="danger">
    <ion-title>Ionic FAB</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding" color="light">
  <ion-fab vertical="center" horizontal="center" slot="fixed">
    <ion-fab-button>
      <ion-icon name="share"></ion-icon>
    </ion-fab-button>
    <ion-fab-list side="top">
      <ion-fab-button><ion-icon name="logo-whatsapp"></ion-icon></ion-fab-button>
    </ion-fab-list>
    <ion-fab-list side="bottom">
      <ion-fab-button><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
    </ion-fab-list>
    <ion-fab-list side="start">
      <ion-fab-button><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
    </ion-fab-list>
    <ion-fab-list side="end">
      <ion-fab-button><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
    </ion-fab-list>
  </ion-fab>

</ion-content>

输出：

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

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