i want to insert a label so that matches every FAB icon on the Fab list whats the correct way of doing it. the way i did it it doesn't work
<ion-fab left middle>
<button ion-fab color="dark">
<ion-icon name="arrow-dropup"></ion-icon>
<ion-label>here</ion-label>
</button>
<ion-fab-list side="top">
<button ion-fab>
<ion-icon name="logo-facebook"></ion-icon>
<ion-label>here</ion-label>
</button>
<button ion-fab>
<ion-icon name="logo-twitter"></ion-icon>
</button>
<button ion-fab>
<ion-icon name="logo-vimeo"></ion-icon>
</button>
<button ion-fab>
<ion-icon name="logo-googleplus"></ion-icon>
</button>
</ion-fab-list>
</ion-fab>
ross solution is great,but in order for it to work on Ionic v2 I had to change the .fab
class that comes with Ionic from contain: strict
to contain: layout
.
This is how the class is originally:
.fab {
-moz-appearance: none;
-ms-appearance: none;
-webkit-appearance: none;
appearance: none;
position: relative;
z-index: 0;
display: block;
overflow: hidden;
width: 56px;
height: 56px;
border-radius: 50%;
font-size: 14px;
line-height: 56px;
text-align: center;
text-overflow: ellipsis;
text-transform: none;
white-space: nowrap;
cursor: pointer;
transition: background-color, opacity 100ms linear;
background-clip: padding-box;
-webkit-font-kerning: none;
font-kerning: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
contain: strict;
}
So, add the following on your page .scss file:
.fab {
contain: layout;
}
It will overwrite the default .fab
class for the page and it will work.
For what it's worth, I was able to accomplish what you ask with the following SCSS.
It'd be nice if this was supported directly by Ionic, but I can't find anything indicating this is built-in.
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;
}
contain: layout;
}
The chosen answer seemed to work most of the time, but in some iOS devices it was not picking up the contain: layout;
setting, making the label not align. I didn't need my label as part of the clickable button, so my FAB label addition is below which works on iOS. Fairly simple.
HTML
<ion-fab top right edge>
<button ion-fab color="primary">
<ion-icon name="add"></ion-icon>
</button>
<ion-label>Scan</ion-label>
</ion-fab>
CSS
ion-fab ion-label {
font-weight: bold;
color: color($colors, primary, base);
text-align: center;
margin: 0px !important;
}