Fab Button Navigation

Jen builds on Brad's fab button plugin to create an expanding menu for Angular 2 apps

  •         
    .speed-button {
        height: 50;
        width: 50;
        font-size: 20;
        text-align: center;
        color: #fff;
        opacity: 0;
        border-radius: 25;
        horizontal-align: center;
        vertical-align: bottom;
    }
    .btna {
      background-color: #493DF8; 
    }
    .btnb {
      background-color: #1598F6; 
    }
    .btnc {
      background-color: #6DE9C0; 
    }
    .btnd {
      background-color: #F2B208; 
    }
    .btne {
      background-color: #F13030; 
    }
    .fab-button {
        height: 70;
        width: 70;
        margin: 10;
        background-color: #088FFC;
        horizontal-align: center;
        vertical-align: bottom;
    }
    		
          
  •         
    <StackLayout>
     
       <GridLayout rows="80,*,auto">
         
         <CardView margin="5" class="cardStyle">
            <Label text="Welcome, Practice Buddy and Teachers!"></Label>
         </CardView>
          
          <Button row="1" #btna (tap)="toggleNav('Settings')" [text]="'fa-cog' | fonticon" class="speed-button btna fa fa-cog"></Button>
          <Button row="1" #btnb (tap)="toggleNav('Practice')" [text]="'fa-music' | fonticon" class="speed-button btnb fa"></Button>
          <Button row="1" #btnc (tap)="toggleNav('Calendar')" [text]="'fa-calendar' | fonticon" text="three" class="speed-button btnc fa"></Button>
          <Button row="1" #btnd (tap)="toggleNav('Feedback')" [text]="'fa-comments' | fonticon" text="four" class="speed-button btnd fa"></Button>
          <Button row="1" #btne (tap)="toggleNav('Teachers')" [text]="'fa-dashboard' | fonticon" text="five" class="speed-button btne fa"></Button>
         
          <Fab row="1" #fab (tap)="toggleNav('Home')" icon="./images/icAddWhite.png" rippleColor="#f1f1f1" class="fab-button"></Fab>
        
        </GridLayout> 
     
     </StackLayout>
          
    		
          
  •         
    public _isFabOpen: boolean;
        
        @ViewChild("btna") btna: ElementRef;
        @ViewChild("btnb") btnb: ElementRef;
        @ViewChild("btnc") btnc: ElementRef;
        @ViewChild("btnd") btnd: ElementRef;
        @ViewChild("btne") btne: ElementRef;
        @ViewChild("fab") fab: ElementRef;
      
       toggleNav(id){
            
          if (this._isFabOpen === true) {
                let animations = [
                      { target: this.fab.nativeElement, rotate: 0, duration: 280, delay: 0 },
                      { target: this.btna.nativeElement, translate: { x: 0, y: 0 }, opacity: 0, duration: 280, curve: AnimationCurve.easeOut, delay: 0 },
                      { target: this.btnb.nativeElement, translate: { x: 0, y: 0 }, opacity: 0, duration: 280, curve: AnimationCurve.easeOut, delay: 0 },
                      { target: this.btnc.nativeElement, translate: { x: 0, y: 0 }, opacity: 0, duration: 280, curve: AnimationCurve.easeOut, delay: 0 },
                      { target: this.btnd.nativeElement, translate: { x: 0, y: 0 }, opacity: 0, duration: 280, curve: AnimationCurve.easeOut, delay: 0 },
                      { target: this.btne.nativeElement, translate: { x: 0, y: 0 }, opacity: 0, duration: 280, curve: AnimationCurve.easeOut, delay: 0 }
            ];
    
                  var a = new Animation(animations);
    
                  a.play()
                      .then(() => {
                          if(id !== "Home"){
                            this._router.navigate([id])
                          }
                          this._isFabOpen = false;
                      })
                      .catch(function (e) {
                          console.log(e.message);
                      });
            }
            else {
              let animations = [
                      { target: this.fab.nativeElement, rotate: 45, duration: 280, delay: 0 },
                      { target: this.btna.nativeElement, translate: { x: -90, y: -15 }, opacity: 1, duration: 280, curve: AnimationCurve.easeOut, delay: 0 },
                      { target: this.btnb.nativeElement, translate: { x: -75, y: -80 }, opacity: 1, duration: 280, curve: AnimationCurve.easeOut, delay: 0 },
                      { target: this.btnc.nativeElement, translate: { x: 0, y: -105 }, opacity: 1, duration: 280, curve: AnimationCurve.easeOut, delay: 0 },
                      { target: this.btnd.nativeElement, translate: { x: 75, y: -80 }, opacity: 1, duration: 280, curve: AnimationCurve.easeOut, delay: 0 },
                      { target: this.btne.nativeElement, translate: { x: 90, y: -15 }, opacity: 1, duration: 280, curve: AnimationCurve.easeOut, delay: 0 }
                  ];
    
                  let a = new Animation(animations);
    
                  a.play()
                      .then(() => {
                          this._isFabOpen = true;
                      })
                      .catch(function (e) {
                          console.log(e.message);
                      });
            }
        }      
    		</code>
          </pre>
        </div>
      </li>
        
    </ul>