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

【问题标题】：I want to implement floating-menu in Ionic 2 Project我想在 Ionic 2 项目中实现浮动菜单
【发布时间】：2017-03-29 06:30:24
【问题描述】：

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

【问题讨论】：

"按钮标签只能放在按钮的顶部或底部"你试过的sn-p可以加吗？
这可能会帮助你stackoverflow.com/a/39966292/838203
@suraj 这是代码 sn-p。
你检查那个链接了吗？
是的...不适合我

标签： ionic2 floating-action-button

【解决方案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
      }

打字稿文件

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

使标签可点击

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

【讨论】：