実際の実装は、こんな感じです。HTMLファイルに記述します。
<ion-fab right top>
<button ion-fab color="light"><ion-icon name="arrow-dropleft"></ion-icon></button>
<ion-fab-list side="left">
<button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
<button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
<button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
<button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>
</ion-fab-list>
</ion-fab>
<ion-fab center middle>
<button ion-fab color="danger" (click)="clickMainFAB()"><ion-icon name="md-share"></ion-icon></button>
<ion-fab-list side="top">
<button ion-fab (click)="openSocial('vimeo', fab5)" color="primary"><ion-icon name="logo-vimeo"></ion-icon></button>
</ion-fab-list>
<ion-fab-list side="bottom">
<button ion-fab (click)="openSocial('facebook', fab5)" color="secondary"><ion-icon name="logo-facebook"></ion-icon></button>
</ion-fab-list>
<ion-fab-list side="left">
<button ion-fab (click)="openSocial('googleplus', fab5)" color="light"><ion-icon name="logo-googleplus"></ion-icon></button>
</ion-fab-list>
<ion-fab-list side="right">
<button ion-fab (click)="openSocial('twitter', fab5)" color="dark"><ion-icon name="logo-twitter"></ion-icon></button>
</ion-fab-list>
</ion-fab>ion-fabに、縦方向のtop middle bottom、横方向にleft center rightを設定することで、fab-buttonの表示位置を変更することができます。
また、ion-fab-listを合わせて使うと、開閉式のfab-buttonを作ることが出来ます。
