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上的轻敲事件时有问题，这是布局问题，您可能要修复。

使用Nativescript Angular的浮动操作按钮

1 个答案: