CODEWITHSUNDEEP
angulartypescriptnativescriptfloating-action-button
ona bin
ona bin

Reputation: 5

Floating Action Button using Nativescript Angular

I use Nativescript Angular in my project.

I want to make a floating action button like in this plugin, but I don't know how to use it in Nativescript Angular. I don't find any example for my project. I'm beginner in Nativescript. Any idea please?

Upvotes: 0

Views: 923

Answers (1)

Manoj
Manoj

Reputation: 21908

Here is a quick copy of Angular version.

<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>

Note: The original Vue version itself has issues while detecting tap event on the FabItem, it is the problem with the layout, you might want to fix that.

Upvotes: 2

Related Questions