Fabs With Labels In Ionic 3

Question

I am using the Ionic 3 Framework and want to insert the following type of fab menu in my Ionic 3 App.

Special Fab Menu:

Answer 1

In your SCSS file:

button[ion-fab] {
    overflow: visible;
    position: relative;

    ion-label {
        position: absolute;
        top: -8px;
        right: 40px;

        color: white;
        background-color: rgba(0,0,0,0.7);
        line-height: 24px;
        padding: 4px 8px;
        border-radius: 4px;
    }
}

.fab{
    contain: layout;
}

Your HTML file:

<ion-fab bottom right >
  <button ion-fab>Share</button>
  <ion-fab-list side="top">
     <button ion-fab>
        <ion-icon name="logo-facebook"></ion-icon>
        <ion-label>Facebook</ion-label>
     </button>
  </ion-fab-list>
</ion-fab>

Please refer to this link...

whats the correct way of inserting label in an Ionic FAB list

This one is fairly easy to impelement. I've tested this on Ionic 3 and it works

Answer 2

Thanks to @mark. for right to left languages (rtl) you should alter the scss file according to this: (add left: 45px; instead of right: 40px;)

button[ion-fab] {
    overflow: visible;
    position: relative;

    ion-label {
        position: absolute;
        top: -8px;

        // this is the difference: 
        left: 45px;

        color: white;
        background-color: rgba(70, 70, 70, 0.7);
        line-height: 24px;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px
    }
}

.fab{
    contain: layout;
}

I also changed the background color of ion-label and its font size to appear more beautiful.

And your html file should be like the @mark:

   <ion-fab bottom right >
      <button ion-fab>Share</button>
      <ion-fab-list side="top">
         <button ion-fab>
            <ion-icon name="logo-facebook"></ion-icon>
            <ion-label>Facebook</ion-label>
         </button>
      </ion-fab-list>
    </ion-fab>