Fab labels in Ionic 4?

Ionic Framework
15

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

14 Likes