FabContainer

ion-fab

<ion-fab>本身不是一个FAB按钮，而是一个帮助fab按钮（<button ion-fab>）的容器，允许它放置在不与内容滚动的固定位置。 它也用于实现“材料设计快速拨号”，即。 FAB按钮在单击时显示相关操作的小列表。

使用

<!-- this fab is placed at top right -->
<ion-content>
 <ion-fab top right>
   <button ion-fab>Button</button>
 </ion-fab>

 <!-- this fab is placed at the center of the content viewport -->
 <ion-fab center middle>
   <button ion-fab>Button</button>
 </ion-fab>
</ion-content>

效果：

Ionic FAB还支持“material design's fab speed dia”。 它是一个正常的晶圆厂按钮，显示单击相关操作的列表。

相同的 ion-fab 容器可以包含几个具有不同边值的 ion-fab-list ：顶部，底部，左侧和右侧。 例如，如果要在主按钮顶部有一个按钮列表，则应使用side =“top”等。 默认情况下，如果侧面被忽略，side =“bottom”。

<ion-content>
 <!-- this fab is placed at bottom right -->
 <ion-fab bottom right >
   <button ion-fab>Share</button>
   <ion-fab-list side="top">
     <button ion-fab>Facebook</button>
     <button ion-fab>Twitter</button>
     <button ion-fab>Youtube</button>
   </ion-fab-list>
   <ion-fab-list side="left">
     <button ion-fab>Vimeo</button>
   </ion-fab-list>
 </ion-fab>
</ion-content>

也可以通过编程方式关闭FAB speed dial。

<ion-content>
 <ion-fab bottom right #fab>
   <button ion-fab>Share</button>
   <ion-fab-list side="top">
     <button ion-fab (click)="share('facebook', fab)">Facebook</button>
     <button ion-fab (click)="share('twitter', fab)">Twitter</button>
   </ion-fab-list>
 </ion-fab>
</ion-content>

share(socialNet: string, fab: FabContainer) {
  fab.close();
  console.log("Sharing in", socialNet);
}

属性:

实例成员

close()

关闭活动的FAB列表容器

Sass 变量

• All

• iOS

• Material Design

• Windows Platform

相关

FAB 组件文档