Fabs button open by default

Ionic Framework ionic-v3
1

i am using this button, and I would like to keep it opened by default

<ion-fab left bottom>  <button ion-fab color="light"><ion-icon name="arrow-dropup"></ion-icon></button>  <ion-fab-list side="top">    <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>  </ion-fab-list></ion-fab>

How to make this possible ? there is nothing in the documentation regarding this

thanks

1 Like
2

you can fire click event manually of your fab button to achieve it.
note : put calling section of click event function in ionviewdidenter event

3

please share your code I have same issue and try with ionViewDidLoad(){$("#fab").trigger(“click”); } but it not working

4 
 <ion-fab>
   <button ion-fab (click)="YourClickFunction()">Button</button>
 </ion-fab>

in .ts file

ionviewdidenter(){
this.YourClickFunction()
}
5

Component side :

import { FabContainer } from 'ionic-angular';

@ViewChild('fab')fab : FabContainer;

ionViewDidEnter(){
    this.fab.toggleList();
}

Template side :

<ion-fab top right edge #fab>
    <button ion-fab mini ><ion-icon name="add"></ion-icon></button>
    <ion-fab-list>
        <button ion-fab><ion-icon name="logo-facebook"></ion-icon></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>

WORKING DEMO

1 Like