How to not close Fab on click?

Ionic Framework
1

Anyone knows how to not close a fab group when a button is clicked? I would like to keep the fab open when I select the action buttons but only close it when I click on the close one

<ion-fab vertical="bottom" horizontal="start" slot="fixed">
       <ion-fab-button>
           <ion-icon name="apps"></ion-icon>
        </ion-fab-button>
        <ion-fab-list side="end">
             <ion-fab-button color="medium" onClick={() => this.actionNotClose()}>
                    <ion-icon name="arrow-forward"></ion-icon>
             </ion-fab-button>
             <ion-fab-button color="medium" onClick={() => this.actionNotClose()}>
                    <ion-icon name="arrow-back"></ion-icon>
             </ion-fab-button>
       </ion-fab-list>
</ion-fab>

36
Capture d’écran 2018-11-23 à 09.51.36.jpg674×542 37 KB

2

Hi @reedrichards!

I accomplished this in Ionic/Angular by passing the event to the function as a parameter, and then stopping the event from bubbling up with event.stopPropagation(), so the ion-fab component doesn’t close the FAB.

Hope it helps!

3 Likes
3

@FdezRomero perfect :+1:

stupidly I only tried e.preventDefault, didn’t thought about stopPropagation :yum:

4

Haha no problem! :smile: I did this last week so I just remembered.

1 Like