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