Like a "Dropdow Menu?"

[carlosdelfino]

can you make clicking on a button new buttons on the left or right side, above or below? Clicking again disappearing?

[adityamadchetti]

I tied creating a FABITEM/'speeddial' just like this one https://www.youtube.com/watch?v=3n8cuJZmOvw&feature=youtu.be

.css

/* fab */

.fab-button {
    height: 70;
    width: 70;
    margin: 15;
    color: #FFFFFF;
    background-color: #256EEB;
    horizontal-align: right;
    vertical-align: bottom;
  }
  
  .btna {
    color: #256EEB;
    background-color: white;
  }
  .btnb {
    color: #256EEB;
    background-color: white;
  }

.html

<AbsoluteLayout>
                  <Fab #btnb text="&#xf07b;" left="300" top="500" rippleColor="#f1f1f1" class="fab-button btnb far">
                  </Fab>
                  <Fab #btna text="&#xf030;" left="300" top="500" rippleColor="#f1f1f1" class="fab-button btna far">
                  </Fab>
                  <FAB (tap)="displayOptions()" #fab text="&#xf067;" left="300" top="500" rippleColor="#f1f1f1"
                      class="fab-button far">
                  </FAB>
              </AbsoluteLayout>

.ts

public _isFabOpen: boolean;
    @ViewChild("btna", { static: false }) btna: ElementRef;
    @ViewChild("btnb", { static: false }) btnb: ElementRef;
    @ViewChild("fab", { static: false }) fab: ElementRef;
    
displayOptions() {
        if (this._isFabOpen) {
            // Rotate main fab
            const fab = <View>this.fab.nativeElement;
            fab.animate({ rotate: 0, duration: 280, delay: 0 });

            // Show option 1
            const btna = <View>this.btna.nativeElement;
            btna.animate({ translate: { x: 0, y: 0 }, opacity: 0, duration: 280, delay: 0 });

            // Show option 2
            const btnb = <View>this.btnb.nativeElement;
            btnb.animate({ translate: { x: 0, y: 0 }, opacity: 0, duration: 280, delay: 0 });


            this._isFabOpen = false;
        } else {
            // Rotate main fab
            const view = <View>this.fab.nativeElement;
            view.animate({ rotate: 45, duration: 280, delay: 0 });

            // Show option 1
            const btna = <View>this.btna.nativeElement;
            btna.animate({ translate: { x: 0, y: -80 }, opacity: 1, duration: 280, delay: 0 });

            // Show option 2
            const btnb = <View>this.btnb.nativeElement;
            btnb.animate({ translate: { x: 0, y: -160 }, opacity: 1, duration: 280, delay: 0 });


            this._isFabOpen = true;
        }
    }