FabContainer

ion-fab

ion-fab 不是一个FAB button ，而是一个装载 FAB button(<button ion-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's FAB 支持 "material design's fab speed dial", 它是一个普通的fab按钮，在单击时显示相关操作的列表。 相同的ion-fab容器可以包含几个具有不同侧面值的ion-fab-list: top, bottom, left and right。例如，如果您想要在主按钮顶部有一个按钮列表，那么应该使用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>

关闭弹出视图

<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);
  }

属性

属性	详解
top	Places the container on the top of the content
bottom	Places the container on the bottom of the content
left	Places the container on the left
right	Places the container on the right
middle	Places the container on the middle vertically
center	Places the container on the center horizontally
edge	Used to place the container between the content and the header/footer

实例成员

close() 关闭一个活动的FAB列表容器

Sass Variables

查询地址