Search code examples
nativescriptnativescript-angular

FAB Menu Nativescript with Angular

I'm building an app with angular and nativescript , and i want a fab button like this one fab menu vuejs

Does anyone have example or snippet for angular ?

I am not very good with css and i don't know how to something like on angular.

Solution

  • Note: I'm also very new to Nativescript/Angular. I might miss some details, feel free to edit this answer to correct me.

    I used this so I would not have to make the FAB myself: https://market.nativescript.org/plugins/nativescript-floatingactionbutton. You can add it to your project by running tns plugin add nativescript-floatingactionbutton.

    I don't feel like the documentation is very clear.. I went through those links to come up with something:

    First, the layout of my page is a GridLayout. I feel like it won't work otherwise. I was testing with a StackLayout first.. no luck.

    Inside this GridLayout, I have other stuff (in my case a ListView) and I added at the end another GridLayout.

    <GridLayout rows="auto, *">
  ...
  <GridLayout row="1", rows="auto, *">
    <Fab row="1" #btna icon="res://first_option_icon" rippleColor="#f1f1f1" class="fab-button btna"></Fab>
    <Fab row="1" #btnb icon="res://second_option_icon" rippleColor="#f1f1f1" class="fab-button btnb"></Fab>

    <Fab row="1" #fab (tap)="displayOptions()" icon="res://add_icon" rippleColor="#f1f1f1" class="fab-button"></Fab>
  </GridLayout>
</GridLayout>

    In the exemple from github, buttons are used instead of fab for the "children". The only reason I replaced it with a fab here is because I download my icons from https://material.io/resources/icons and buttons don't accept icons (when downloading an icon from material.io, you can choose "android" (or iOS) in the download options, it gives different sizes of the icon).

    Using fab instead of buttons, the css becomes a little easier as well (unless you want to make them smaller).

    .fab-button {
  height: 70;
  /*width: 70; -- Needed for iOS only*/
  margin: 15;
  background-color: orangered;
  horizontal-align: right;
  vertical-align: bottom;
}

.btna {
  background-color: #493DF8;
}
.btnb {
  background-color: #1598F6;
}

    And then all that's left is the javascript.

    // Necessary imports
import { ..., ViewChild, ElementRef } from "@angular/core";
import { registerElement } from "@nativescript/angular/element-registry";
import { Fab } from "nativescript-floatingactionbutton";
import { View } from "tns-core-modules";
registerElement("Fab", () => Fab);

@Component(...)
export class YourComponent {
  ...
  // Reference those fabs
  public _isFabOpen: Boolean;
  @ViewChild("btna") btna: ElementRef;
  @ViewChild("btnb") btnb: ElementRef;
  @ViewChild("fab") 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: -145 }, opacity: 1, duration: 280, delay: 0});

      this._isFabOpen = true;
    }
  }
}

    Tada!