FAB 菜单 Nativescript Angular

Question

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

有人有 angular 的示例或片段吗？

我不太擅长 css，我不知道如何在 angular.

Answer 1

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

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

将其添加到您的项目中

我觉得文档不是很清楚。我浏览了那些 link 想出了一些东西：

https://github.com/nstudio/nativescript-floatingactionbutton/issues/95（基本上是你的问题）
https://github.com/jlooper/nativescript-snacks/blob/master/_posts/2016-06-05-fab-nav-angular.markdown（link 编辑在上一个 link 的最后一个答案中。已过时。从文档中删除）
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 的示例中，使用按钮代替“children”的 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;
    }
  }
}

多田！

FAB 菜单 Nativescript Angular

FAB Menu Nativescript with Angular

nativescript

nativescript-angular