Я хочу реализовать плавающее меню в Ionic 2 Project

Question

До сих пор я реализовал кнопки ie (ion-fab), но метки кнопок можно размещать только сверху или снизу кнопок. Я хочу разместить их на левой стороне кнопки. Изображение прикреплено для большей ясности.

Answer 1

HTML-код

<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 файл

   .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

 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

Добавление больше к вышеуказанным исправлениям. Вы можете сделать ярлыки кликабельными по

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

Answer 3

Ответ Ану сработал для меня, но ярлыки не давали мне нажимать на кнопки. Я сделал следующее редактирование, чтобы исправить это. Перекрываются кнопки сверху, так как позиции меток фиксированы.

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