带有 Angular 的 FAB 菜单 Nativescript

Question

我正在使用 angular 和 nativescript 构建一个应用程序，我想要一个像这样的 fab 按钮 fab menu vuejs

有人有角度的例子或sn-p吗？

我对 css 不是很好，我不知道如何使用 angular。

Answer 1

注意：我对 Nativescript/Angular 也很陌生。我可能会遗漏一些细节，请随时编辑此答案以纠正我。

我使用了这个，所以我不必自己制作 FAB：https://market.nativescript.org/plugins/nativescript-floatingactionbutton。您可以通过运行 tns plugin add nativescript-floatingactionbutton 将其添加到您的项目中。

我觉得文档不是很清楚。我通过这些链接想出了一些东西：

• https://github.com/nstudio/nativescript-floatingactionbutton/issues/95（基本上是你的问题）
• https://github.com/jlooper/nativescript-snacks/blob/master/_posts/2016-06-05-fab-nav-angular.markdown（在上一个链接的最后一个答案中链接.. 已过时.. 从文档中删除）
• https://docs.nativescript.org/angular/ui/animation

首先，我的页面布局是一个GridLayout。感觉不然不行我首先使用 StackLayout 进行测试.. 不走运。

在这个 GridLayout 中，我还有其他东西（在我的例子中是 ListView），我在最后添加了 另一个 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>

在 github 的示例中，“孩子”使用按钮而不是 fab。我在这里用 fab 替换它的唯一原因是因为我从 https://material.io/resources/icons 下载我的图标并且按钮不接受图标（从 material.io 下载图标时，您可以在下载中选择“android”（或 iOS）选项，它给出了不同大小的图标）。

使用 fab 代替按钮，css 也变得更容易一些（除非你想让它们更小）。

.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;
}

然后剩下的就是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;
    }
  }
}

多田！