ionic2 - 我想在 Ionic 2 项目中实现 float 菜单

Question

到目前为止，我已经实现了按钮，即 (ion-fab) 但按钮标签只能放在按钮的顶部或底部。我想将它们放在按钮的左侧。附上图片以进行更多说明。

Answer 1

HTML CODE

<ion-content>
    <div id="ListBackdrop" *ngIf="fabButtonOpened==true" ></div> 
</ion-content> 
<ion-fab right bottom #fab>
   <button ion-fab (click)="openFabButton()">
       <ion-icon name="add"></ion-icon>
    </button>
   <ion-fab-list side="top">
     <button ion-fab>
         <img src="assets/friend_add.png"> 
     </button>
     <ion-label class="fablabelfriend">Friend</ion-label>
     <button ion-fab>
             <img src="assets/family_add.png">
     </button>
     <ion-label class="fablabelfamily">Family</ion-label>
   </ion-fab-list>
 </ion-fab>

Css File

   .fablabelfamily
            {
              position: absolute;
              width: 100%;
              padding-right: 220px;
              padding-bottom: 75px;
              margin-top: 0px;
              margin-bottom: 0px;
              font-weight: bold;
            }
.fablabelfriend{
             position: absolute;
             width: 100%;
             padding-right: 220px;
             padding-bottom: 30px;
             margin-top: 10px;
             margin-bottom: 0px;
             font-weight: bold;
          }
#ListBackdrop{
         background-color: white !important;
         position: fixed !important;
         height: 100%;
         width: 100%;
         z-index: 1;
         opacity: 0.8
      }

TypeScript File

 export class myClass{
     fabButtonOpened: Boolean;
      constructor(public navCtrl: NavController, private global: globalVariable, private http: Http, public platform: Platform) {
         this.fabButtonOpened=false;

//All other functions inside constructor 
    }

        openFabButton(){
          if(this.fabButtonOpened==false){
              this.fabButtonOpened=true;
          }else{
              this.fabButtonOpened=false;
          }
        }
    }