Fab labels in Ionic 4?

how to add Fab labels in Ionic 4?

3 Likes

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

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

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

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

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:

37 Likes

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

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:

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

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

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.

2 Likes

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

1 Like

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

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

Great solution here!

In case you’re using i18n or something like this, I recommend to use the title attribute, since it’s a know property of <ion-fab-button> and can hold f. e. a translated and piped value like this:

<ion-fab-button title="{{ 'PAGE_HOME.FAB.MY_SUB_FAB' | translate }}">
	<ion-icon name="home"></ion-icon>
</ion-fab-button>

And replace all occurences of data-desc with title:

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

ion-fab-button[title]::after {
  position: absolute;
  content: attr(title);
  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);
}

Cheers
Unkn0wn0x

15 Likes

you WERE DIVINE!!!
T-H-A-N-K -Y-O-U

1 Like

Hi, do you know a way to make it always centered below ion-fab? If the size of the label differs, you need to change the margins to make it center… I’m trying to make it more responsive, but with no sucess.

Thanks @MrFloppy this is a very good solution

You can even use angular binding like this:

<ion-fab-button
        [attr.data-desc]="model"
      >

Thanks for your help

Melhor solução encontrada! Obrigado.

I only used simply [att.data-desc]=“item.name” (of *ngFor), it works perfectly. Thank you