Fab inside fab does not disable properly

Ionic Framework ionic-v3
1

Hello, when using a fab inside another fab (ion-fab buttons inside an ion-fab-list) the buttons inside do not properly act on getting disabled. The buttons are disabled when I use [disabled]=“true” but they don’t look disabled (greyed out).

This is the code when I try to disable one of my fabs:

    <ion-fab right bottom>
        <button ion-fab color="primary" class="button-ov"><ion-icon name="arrow-dropup"></ion-icon></button>
        <ion-fab-list side="top">
            <button ion-fab color="primary" style="color:white;" (click)="uploadReceipt()"><ion-icon name="camera"></ion-icon></button> 
            <button ion-fab type="submit"  color="primary" style="color:white; font-size: 10px;" [disabled]="true">Opslaan</button>
        </ion-fab-list>
    </ion-fab>

It doesn’t really matter if I try to disable either the fab with the text or the fab with the icon in it, they both are disabled but are not greyed out. They look like this:

doesntWork

When I try to disable the button outside the ion-fab-list it does work and it looks like this:

    <ion-fab right bottom>
        <button ion-fab color="primary" [disabled]="true" class="button-ov"><ion-icon name="arrow-dropup"></ion-icon></button>
        <ion-fab-list side="top">
            <button ion-fab color="primary" style="color:white;" (click)="uploadReceipt()"><ion-icon name="camera"></ion-icon></button> 
            <button ion-fab type="submit"  color="primary" style="color:white; font-size: 10px;">Opslaan</button>
        </ion-fab-list>
    </ion-fab>

doesWork

As you can see, the outter fab does get disabled AND greyed out. How can I make sure my disabled inner fabs get both disabled and greyed out?

Thanks in advance.

2

Hi, I got a usefull FAB button for you with labels.

home.html (as example)

<ion-fab bottom right>
        <button ion-fab [style.background-color]="color">
          <ion-icon name="settings"></ion-icon>
      </button>
      <ion-fab-list side="top">

        <button ion-fab (click)="startSynchroniseren($event)" [style.background-color]="color">
            <ion-icon name="refresh"></ion-icon>
            <div class="label">Synchroniseren</div>
        </button>

        <button ion-fab (click)="showDebugInformation()" [style.background-color]="color">
            <ion-icon name="help"></ion-icon>
            <div class="label">Informatie</div>
        </button>

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

home.scss (as example)

.fab {
      contain: initial;
    }

    ion-fab {
        button {
            box-shadow: 0 4px 10px #6b6b6b;
        }

        ion-fab-list button[ion-fab] {
            text-align: center;
            overflow: visible;

            div.label {
              position: absolute;
              right: 48px;
              background: rgba(248, 248, 248, 1);
              height: 24px;
              line-height: 16px;
              padding-left: 8px;
              padding-right: 8px;
              padding-top: 5px;
              padding-bottom: 5px;
              border-radius: 3px;
              color: #000;
              box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.14), 0 4px 5px rgba(0, 0, 0, 0.1);
            }
        }

        .button-inner {
            overflow: visible;
        }
    }