带角度的FAB菜单Nativescript

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

有人有关于angular的例子或片段吗

---

我不太擅长css，我不知道如何在angular上使用类似的东西。

注意：我对Nativescript/angular也很陌生。我可能会错过一些细节，请随意编辑此答案以更正我

我用了这个，这样我就不用自己制作晶圆厂了。您可以通过运行

tns plugin add nativescript floatingactionbutton

将其添加到项目中

我觉得文件不是很清楚。。我通过这些链接找到了一些东西：

• （基本上是你的问题）
• （链接在上一链接的最后一个答案中..过时..从文档中删除）

首先，我的页面布局是一个网格布局。我觉得要不然就不行了。我先用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>

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

//必要的导入
从“@angular/core”导入{…，ViewChild，ElementRef}；
从“@nativescript/angular/element registry”导入{registerement}”；
从“nativescript floatingactionbutton”导入{Fab}；
从“tns核心模块”导入{View}；
注册表项（“Fab”，（）=>Fab）；
@组件（…）
导出类组件{
...
//参考那些晶圆厂
公共开放：布尔；
@ViewChild（“btna”）btna:ElementRef；
@ViewChild（“btnb”）btnb:ElementRef；
@ViewChild（“fab”）fab:ElementRef；
...
显示选项（）{
如果（这个是开放的）{
//旋转主晶圆厂
const fab=this.fab.nativeElement；
制作动画（{旋转：0，持续时间：280，延迟：0}）；
//显示选项1
const btna=this.btna.nativeElement；
设置动画（{translate:{x:0，y:0}，不透明度：0，持续时间：280，延迟：0}）；
//显示选项2
const btnb=this.btnb.nativeElement；
设置动画（{translate:{x:0，y:0}，不透明度：0，持续时间：280，延迟：0}）；
这是。_isFabOpen=false；
}否则{
//旋转主晶圆厂
const view=this.fab.nativeElement；
设置动画（{旋转：45，持续时间：280，延迟：0}）；
//显示选项1
const btna=this.btna.nativeElement；
设置动画（{translate:{x:0，y:-80}，不透明度：1，持续时间：280，延迟：0}）；
//显示选项2
const btnb=this.btnb.nativeElement；
设置动画（{translate:{x:0，y:-145}，不透明度：1，持续时间：280，延迟：0}）；
这是。_isFabOpen=true；
}
}
}

塔达

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