我想在 Ionic 2 项目中实现浮动菜单

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

Answer 2

Anu 的回答对我有用，但标签阻止我点击我的按钮。我做了以下编辑来解决这个问题。由于标签位置固定，因此与顶部的按钮重叠。

 <ion-fab-list side="top">
   <ion-label class="fablabelfriend">Friend</ion-label>
  <ion-label class="fablabelfamily">Family</ion-label>      
  <button ion-fab>
     <img src="assets/friend_add.png"> 
  </button>
  <button ion-fab>
      <img src="assets/family_add.png">
  </button>

   </ion-fab-list>
 </ion-fab>

Answer 3

为上述修复添加更多内容。您可以通过

使标签可点击

button[ion-fab] {
  ion-label {
    pointer-events: auto;
  }
}

我想在 Ionic 2 项目中实现浮动菜单

I want to implement floating-menu in Ionic 2 Project

floating-action-button

ionic2