Ionic FAB 按钮

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

拥有 FAB 按钮背后的想法是将其用作对页面上已推广操作的调用。例如，如果您有一个项目列表并且您想添加一个项目，则可以使用添加按钮作为浮动操作按钮。

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

示例

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

输出

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

Ion-fab-list

它包含多个 fab 按钮。这些 fab 按钮包含与主 fab 按钮相关的操作，并在按下或单击时被 抛出。该按钮还可以通过设置 side 属性 开始、结束、顶部和底部来指定显示在特定位置。以下示例解释了 <ion-fab-list> 如何与 <ion-fab-button> 一起使用。

示例

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

输出

当您执行上述 Ionic 应用程序时，它将给出以下屏幕。在这里，您将看到 分享按钮图标，当按下或单击时，它会被抛出。

当分享按钮图标在按下或单击时被抛出时，您将获得以下屏幕。在这里，您可以看到 Facebook、Instagram、WhatsApp 和 Twitter 的图标。