使用Nativescript Angular的浮动操作按钮

Question

我在我的项目中使用Nativescript Angular。

我想在this插件中创建一个浮动操作按钮，但我不知道如何在Nativescript Angular中使用它。我没有为我的项目找到任何示例。我是Nativescript的初学者。有什么好主意吗？

Answer 1

Here是Angular版本的快速副本。

<AbsoluteLayout #rootLayout (loaded)="onLoaded()">
  <ListView [items]="items" (itemTap)="onItemTap($event)" class="list-group"
    left="0" top="0" height="100%" width="100%">
    <ng-template let-item="item">
        <Label [text]="item" class="list-group-item h3"></Label>
    </ng-template>
  </ListView>

<StackLayout left="0" top="0" height="100%" width="100%" class="backdrop"
    [class.backdrop-visible]="isActive" [class.backdrop-invisible]="!isActive"></StackLayout>

<AbsoluteLayout #fabItemPosition marginTop="87%" marginLeft="80%">
    <GridLayout #fabItemContainer left="8" top="8">
        <FabItem [className]="isActive ? 'raiseItem1' : 'downItem1'"
            color="#E94E77" title="E"></FabItem>
        <FabItem [className]="isActive ? 'raiseItem2' : 'downItem2'"
            color="#3FB8AF" title="U"></FabItem>
        <FabItem [className]="isActive ? 'raiseItem3' : 'downItem3'"
            color="#FCB653" title="V"></FabItem>
    </GridLayout>
    <FabButton (buttonTap)="onButtonTap($event)" [isActive]="isActive"> . 
    </FabButton>
</AbsoluteLayout>

注意：原始Vue版本本身在FabItem上检测点击事件时出现问题，这是布局的问题，您可能想要修复它。