Ionic-framework: FAB list feature: labels and backdrop options

[Manduro]

Feature request

It would be cool if the FAB list could support labels and an optional backdrop as mentioned here: https://github.com/driftyco/ionic/issues/5069#issuecomment-172681668

Example

[captaincole]

+1

[captaincole]

I created a workaround for this, but the implementation is custom (you have to change the css for each individual label).

I have a fab button with two options, like so

<ion-fab right class="floating-action" (click)="addMenu()">
    <button ion-fab>
  <ion-icon name="add"></ion-icon>
</button>
<ion-fab-list side="top">
  <button ion-fab class="option" (click)="createMovement()">
    <span class="flaticon-gym-1"></span>
    <div class="fab-label fab-label-mov">Create Movement</div>
  </button>
  <button ion-fab class="option" (click)="createWorkout()">
    <span class="flaticon-people"></span>
    <div class="fab-label fab-label-work">Create Workout</div>
  </button>
  <button *ngIf="dev" ion-fab class="option" (click)="createProgram()"><ion-icon name="calendar"></ion-icon></button>
</ion-fab-list>
</ion-fab>

And then I have an attached css properties like below

.floating-action {
bottom: 65px;
z-index: 1;

.option {
    background-color: blue;
    text-align: center;
    overflow: visible;
}
.fab-label {
    position: absolute;
    background: lightslategrey;
    height: 24px;
    line-height: 16px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 5px;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.14), 0 4px 5px rgba(0, 0, 0, 0.1);
}
.fab-label-mov {
    margin-left: -90px; /* Custom for each label */
}
.fab-label-work {
    margin-left: -83px; /* Custom for each label */
}
.button-inner {
    overflow: visible; /* This makes the labels shown, overrides default ionic properties */
}
}

This should get you by for now.

[Bouzmine]

Here's what I did improving upon the work of @thielCole, making it a (kinda) drop-in replacement.

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

        div {
          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;
          margin-top: 8px;
          border-radius: 5px;
          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;
    }
}

And the markup (text must be in a div) :

  <ion-fab bottom right>
    <button ion-fab>
      <ion-icon name="add"></ion-icon>
    </button>
    <ion-fab-list side="top">
      <button ion-fab (click)="123()">
        <ion-icon name="book"></ion-icon>
        <div>LABEL TEXT HERE</div>
      </button>
      ...
    </ion-fab-list>
  </ion-fab>

[speedfl]

Quick question @Bouzmine.
Did you notice that there are little transparent shapes on each button ?
I cannot remove them when I am using your solution.

[speedfl]

Here is what I can observe

[Bouzmine]

@speedfi I don't see that, but I use the FAB list with position="top" could you tell me if it works with that setting?

[speedfl]

Hey! Thanks for your answer I have

It seems to be visible because of the overflow visible. I saw that you have a class .innerButton but not used in the html. Maybe it is linlked to this?

<ion-fab bottom right *ngIf="me==false">
    <button ion-fab ><ion-icon name="add"></ion-icon></button>
    <ion-fab-list side="top">
      <!-- display -->
      <button ion-fab color="primary" *ngIf="requestDisplay" (click)="display()">
        <ion-icon name="log-in"></ion-icon>
        <div>Demander de voir</div>
      </button>
    ...

What is strange is that if I put my padding left and right to 0 (on the div) it disapear. in fact it follow the size of the div. If I grow the size the padding etc it grows. Same thing if I reduce it. It is not a profile of display iin chrome because even on my app I have the same

[Bouzmine]

Here's the new version that's (I hope) fixing the issue @speedfl had :
The div containing the text now has a class (label) for the CSS to be able to style it and not to style Ionic's elements (namely div.button-effect which was causing the problem). To be noted that the problem didn't appear in Safari for me (don't know why). Also added shadow which was not present in earlier version and ajusted margin-top to be more in-line with new size of ionic2.0.0-rc.3.

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;
          margin-top: 8px;
          border-radius: 5px;
          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;
    }
}

And the markup (text must be in a div.label) :

  <ion-fab bottom right>
    <button ion-fab>
      <ion-icon name="add"></ion-icon>
    </button>
    <ion-fab-list side="top">
      <button ion-fab (click)="CLICK HANDLER HERE">
        <ion-icon name="ICON NAME HERE"></ion-icon>
        <div class="label">LABEL TEXT HERE</div>
      </button>
      ...
    </ion-fab-list>
  </ion-fab>

[speedfl]

Man it is perfect !!! 👍

[idiosyncraticee]

Thank you so much @Bouzmine and @thielCole ! 👍

[ericmorentin]

Perfect! Thank you!

[gerhardx]

It works great in browser and IOS devices, but in Android the labels doesn't show, anyone else having this issue?

[speedfl]

Hello @Bouzmine

Did you try to migrate to rc4?
my label disappeared and I am trying to figure out what happened but not able :)

[Bouzmine]

@speedfl Does work for me, I don't know what is happening, are you on WKWebView, or just testing on your computer?

[speedfl]

Hello.

On my computer using ionic serve :(

[Bouzmine]

@speedfl I see the bug you're talking about, it seems to be the same as the one preventing this solution from working in Android because I can only reproduce in Chrome. Safari (macOS) and webviews in iOS are OK. I don't know what is causing this bug. Just hoping for an official solution to be release sooner than later.

[speedfl]

So after hours I was finally able to make this work in rc4. In fact I am using default variable of ionic for fab. This has the advantage of having (approximatively) same look on all the devices whatever the screen resolution + the container give a not opaque white screen behind the FABS.

Thanks a lot @Bouzmine for your solution. I would like to share mine if you want to migrate. Peace!

so in your html:

`

    <button ion-fab color="primary" (click)="action1()">
    <ion-icon name="log-in"></ion-icon>
    </button>

    <button ion-fab color="primary" (click)="action2()">
    <ion-icon name="log-out"></ion-icon>
    </button>
    </ion-fab-list>
    </ion-fab>

    <div class="labelContainer" *ngIf="showMenuItem">
    <div class="container">
    <a (click)="action2"><div class="label">Label 2</div></a>
    <a (click)="action1"><div class="label">Label 1</div></a>
    </div>
    </div>`

In your css:

`
.labelContainer {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
z-index:99;

        .container{
          position: absolute;
          bottom: $fab-content-margin * 3.4 + $fab-size;
          right: 20%;

          .label{
            font-family: Corbel;
            text-align: left;
            color:white;
            background: #9991ff;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
            padding: 7px;
            width:220px;
            margin-top: ($fab-list-margin * 2.5);
            margin-right: 0px;
            box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.14), 0 4px 5px rgba(0, 0, 0, 0.1);
          }
        }
      }

`

And finally in your script:

  `showMenuItems(){
      this.showMenuItem = !this.showMenuItem;
  }`

[Manduro]

@speedfl @gerhardx
Add this to the styles noted by @Bouzmine above when your labels are invisible on Chrome:

.fab {
  contain: initial;
}

[ozexpert]

Anyone implemented backdrop?

[speedfl]

@ozexpert yep look at my answer

[ozexpert]

@speedfl sorry. When fab list is showing is it showing backdrop? I don't see code anywhere for backdrop. Sorry if I'm missing something...

[speedfl]

My label container has
background-color: rgba(255, 255, 255, 0.5);
So it is the backdrop. You have to implement exactly what i put (the ts file, the scss and the html)

[jgw96]

Hello all! While this is an awesome feature request it is not something that we plan on doing anytime soon. Because of this I am going to move this to our internal feature tracking repo for now as it is just "collecting dust" here. Once we decide to implement this I will move it back. Thanks everyone for using Ionic!

[jgw96]

This issue was moved to driftyco/ionic-feature-requests#70

[captaincole]

@speedfl I just upgraded my own implementation to yours and I really like it! Thanks for making the upgrades.

[speedfl]

@thielCole you are welcome :)

[shyamal890]

+1

[speedfl]

If needed: @thielCole and other
https://github.com/speedfl/ionic-fab-label-backdrop

I made some updates. Extract in a component with event + same effect as ionic fab

[itrethan]

@jgw96 Hey Justin, why this issue is close without driftyco/ionic-feature-requests#70 accessible?

This is an important feature that significant improve the usability of the Fab button, just want to make sure it's not getting lost somewhere.

[LeQuyetTien]

Thanks @Bouzmine. Awesome!!!

[aleksander351]

My 2 cents:

Adding a local variable to the ion-fab-list

<ion-fab right bottom #fab1>
    <button ion-fab><ion-icon name="add"></ion-icon></button>
    <ion-fab-list side="top" #fabList>
    <div *ngIf="fabList.classList.contains('fab-list-active')" class="backdrop" (click)="fab1.close();">
    </div>

The CSS:
.backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.7); }
Had to add z-index to button to be able to close it:
button.fab.fab-md.fab-close-active { z-index: 1; }

[kschultz1986]

@speedfl I'm sorry, I'm pretty unclear on how to use your code. All of the bracketed and parenthetical identifiers have me pretty confused. Can you give an example of it being used in practice? I get errors that say "an-input" isn't a property of my-menu, etc. Also, Ionic complains that anInput in mymenu.ts should be this.anInput.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.