whats the correct way of inserting label in an Ionic FAB list

dev-stack picture dev-stack · Oct 4, 2016 · Viewed 15.7k times · Source

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

Answer

ross picture ross · Oct 10, 2016

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

enter image description here