Fab labels in Ionic 4?


#1

how to add Fab labels in Ionic 4?


#2

Check the docs: https://beta.ionicframework.com/docs/api/fab

<ion-button class="button button-ios button-solid button-solid-ios hydrated" tappable="" fill="solid">
   Test
</ion-button>

#3

Thank you for the reply.
But i need like this

Its work for V3 bt not work for V4

Reffed link - https://stackoverflow.com/questions/39842324/whats-the-correct-way-of-inserting-label-in-an-ionic-fab-list


#4

any news? figured out that the problem is the shadow-root of the ion-fab-button.
you have to add

contain: layout;
overflow: visible;

to the shadow-root button element. however this is not possible by adding it to the css


#5

Why is it not possible to add a label to the fab button?

I have tried in all ways, and I can not show a text or even as it comes in the example since the ion-fab-button
“< ion-fab-button >Facebook</ ion-fab-button >”
but the button is locked to an icon size.

Please, I need help with this.
Regards


#6

It might be a little late but I just stumbled upon this issue as well and solved it with a css pseudo element which might be a solution for you as well:

HTML:

<ion-fab vertical="bottom" horizontal="end">
    <ion-fab-button>
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
    <ion-fab-list side="top">
      <ion-fab-button (click)="do1()" data-desc="Description 1">
        <ion-icon name="contact"></ion-icon>
      </ion-fab-button>
      <ion-fab-button (click)="do2()" data-desc="Description 2">
        <ion-icon name="person-add"></ion-icon>
      </ion-fab-button>
    </ion-fab-list>
  </ion-fab>

SCSS:

ion-fab-button[data-desc] {
  position: relative;
}

ion-fab-button[data-desc]::after {
  position: absolute;
  content: attr(data-desc);
  z-index: 1;
  right: 55px;
  bottom: 4px;
  background-color: var(--ion-color-primary);
  padding: 9px;
  border-radius: 15px;
  color: white;
  box-shadow: 0 3px 5px -1px rgba(0,0,0,0.2), 0 6px 10px 0 rgba(0,0,0,0.14), 0 1px 18px 0 rgba(0,0,0,0.12);
}

Hope you or someone else can use it. Good luck :slight_smile:


#7

@MrFloppy, A lot of thanks, that working perfectly, but it’s not general. I mean when data-desc should be from ngFor , that will give an error “data-desc” in not angular attribute for ion-fab-button, so regarding that, I fix that issue, by generating directive “data-desc” and use it in fab-button component and in the style I add prefix of angular “ng-reflect” to “data-desc” to be “ng-reflect-ng-reflect”.
and that working good.


#8

Great idea! I’m looking for a solution where i can use ngFor for a dynamic fab-list with labels. Can you send a code example - it sounds a little bit complicated for me and I would appreciate a little help :slight_smile:


#9

You only need to declare directive has the same name “data-desc” or any name you need and change content in css to be “ng-reflect-data-desc”


#10

Thank you Bassam - that sounds quite simple. Have a nice weekend!