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>
1 Like
#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:

6 Likes
#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”

1 Like
#10

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

#11

With ionic 4 i did this:

  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-badge color="danger">0</ion-badge>
    <ion-fab-button>
      <ion-icon name="cog"></ion-icon>
    </ion-fab-button>

    <ion-fab-list side="top">
      <ion-fab-button>
        <ion-icon name="cart"></ion-icon>
      </ion-fab-button>
      <ion-label>lavel 1</ion-label>

      <ion-fab-button>
        <ion-icon name="clipboard"></ion-icon>
      </ion-fab-button>
      <ion-label>lavel 2</ion-label>

      <ion-fab-button>
        <ion-icon name="archive"></ion-icon>
      </ion-fab-button>
      <ion-label>lavel 3</ion-label>

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

I also include a badge that could be removed.

  ion-fab-button {
    margin-left: 140px;
    overflow: visible;
    position: relative;
  }
  ion-fab-list {
    ion-label {
      position: relative;
      top: 40px;
      right: 25px;
      color: white;
      background-color: rgba(0,0,0,0.7);
      line-height: 24px;
      padding: 4px 8px;
      border-radius: 4px;
    }
  }
  ion-fab {
    ion-badge {
      position: relative;
      top: 10px;
      left: 140px;
    }
  }

With this way you can bind the labels text or add a different events.

1 Like
#12

Thanks a lot, this works great :grinning::grinning:

1 Like
#13

How to add ion-label when the ion-fab-button is created from ngFor?

#14

Use *ngFor inside ng-container to prevent affect the css.

  <ion-fab vertical="bottom" horizontal="end" slot="fixed">

    <ion-badge color="danger">0</ion-badge>
    <ion-fab-button>
      <ion-icon name="cog"></ion-icon>
    </ion-fab-button>

    <ion-fab-list side="top">

      <ng-container *ngFor="let item of items">
        <ion-fab-button (click)="someFunction(item)">
          <ion-icon [name]="item.icon"></ion-icon>
        </ion-fab-button>
        <ion-label (click)="someFunction(item)">
          {{ item.title }}
        </ion-label>
      </ng-container>

    </ion-fab-list>
  </ion-fab>
  items = [
    {
      title: 'foo',
      icon: 'card'
    },
    {
      title: 'bar',
      icon: 'trash'
    }
  ];

  someFunction(item) {
    ...
  }
  ion-fab-button {
    margin-left: 140px;
    overflow: visible;
    position: relative;
  }
  ion-fab-list {
    ion-label {
      position: relative;
      top: 40px;
      right: 25px;
      color: white;
      background-color: rgba(0,0,0,0.7);
      line-height: 24px;
      padding: 4px 8px;
      border-radius: 4px;
    }
  }
  ion-fab {
    ion-badge {
      position: relative;
      top: 10px;
      left: 50px;
    }
  }