Button with NavigationButton inside it


#1

Hello!
I am trying to build this:


I managed to build everything except this:

This component is supposed to be a big button with 3 label inside it and that “>” to navigate. I want all this component to be a big button so the user doenst really need to click on the “>” he can just press anywhere in the componenet and he just gets redirected to another Page.
I also have troubles in putting the “>” inside a button.

The “view Details” button is just a temporary button to allow me to redirect me to anothre Page while i don’t build the button with the labels inside it and the “>”.

What i have so far:

My code so far:
Transactions.html

<StackLayout marginTop="-53" orientation="vertical" width="385" height="530" backgroundColor="lightgray">
  <ActionBar marginLeft="80" fontSize="30" title="Account Transactions" backgroundColor="transparent" color="white">
  </ActionBar>
  <StackLayout marginTop="20" marginLeft="20" marginRight="20" backgroundColor="white">
    <Label class="labelTransactionType" text="Payment"></Label>
    <Label class="labelTransactionValue" text="-€19.00"></Label>
    <Label class="labelTransactionData" text="Date: 2 of April of 2017"></Label>
    <Button class="transactionsButtons" text="View Details" (tap)="paymentDetails()"></Button>
  </StackLayout>
  <StackLayout marginTop="20" marginLeft="20" marginRight="20" backgroundColor="white">
    <Label class="labelTransactionType" text="Refund"></Label>
    <Label class="labelTransactionValue" text="+€3.50"></Label>
    <Label class="labelTransactionData" text="Date: 2 of April of 2017"></Label>
    <Button class="transactionsButtons" text="View Details" (tap)="refundDetails()"></Button>
  </StackLayout>
  <StackLayout marginTop="20" marginLeft="20" marginRight="20" backgroundColor="white">
    <Label class="labelTransactionType" text="Bank Transaction"></Label>
    <Label class="labelTransactionValue" text="+€10.00"></Label>
    <Label class="labelTransactionData" text="Date: 1 of April of 2017"></Label>
    <Button class="transactionsButtons" text="View Details" (tap)="bankTransactionDetails()"></Button>
  </StackLayout>
</StackLayout>
<FlexboxLayout marginTop="530">
  <BottomBar row="1" [items]="items" [hide]="hidden" [titleState]="titleState" (loaded)="tabLoaded($event)" (tabSelected)="tabSelected($event)"
    [inactiveColor]="inactiveColor" [accentColor]="accentColor" colored="true"></BottomBar>
</FlexboxLayout>
<AbsoluteLayout>
  <image class="imageRhombus" src="res://rhombus"></image>
</AbsoluteLayout>

transactions-common.css

AbsoluteLayout{
  margin-top:-660;
  margin-Left:-320;
  width:70;
  height:70;
}

.imageRhombus{
  width:70;
  height:70;
}
TextField {
  color: white;
}
.transactionsButtons {
    display:inline-block;
    text-align:left;
    text-transform: capitalize;
}
.labelTransactionType{
  margin-Left:10;
   height:25;
}

.labelTransactionValue{
 margin-Left:30; 
 height:40;
 font-Size:24;
 color:black;
}

.labelTransactionData{
  margin-Left:10;
  height:20;
}

Does anyone have an idea on how to do this? I have been trying a lot and can’t seem to figure it out.
@NathanaelA
@jen.looper


#2

You should be able to put a (tap)=“doFunction()” inside a StackLayout:

In your case:

<StackLayout (tap)="doFunction()" marginTop="20" marginLeft="20" marginRight="20" backgroundColor="white">
    <Label class="labelTransactionType" text="Payment"></Label>
    <Label class="labelTransactionValue" text="-€19.00"></Label>
    <Label class="labelTransactionData" text="Date: 2 of April of 2017"></Label>
    <Button class="transactionsButtons" text="View Details" (tap)="paymentDetails()"></Button>
</StackLayout>

#3

@KalongLaw
Can i put associate a tap function to a stackLayout? I didnt knew that! Thank you

But i still have trouble figuring out this part how do transform this:

<StackLayout (tap)="doFunction()" marginTop="20" marginLeft="20" marginRight="20" backgroundColor="white">
    <Label class="labelTransactionType" text="Payment"></Label>
    <Label class="labelTransactionValue" text="-€19.00"></Label>
    <Label class="labelTransactionData" text="Date: 2 of April of 2017"></Label>
    <Button class="transactionsButtons" text="View Details" (tap)="paymentDetails()"></Button>
</StackLayout>

into a button that contains the 3labels + navigation button, all in one button.

<StackLayout (tap)="doFunction()" marginTop="20" marginLeft="20" marginRight="20" backgroundColor="white">
    <Button> this button contains the 3 labels + the navigation Button</Button>
</StackLayout>

But the tap is associated to the stack Layout i agree with that.


#4

Take a look at https://docs.nativescript.org/ui/layout-containers.

You should be able to achieve the desired layout (and almost 99% of all layouts) by combining StackLayouts and GridLayouts.

Something like this, but with some more styling perhaps.

<GridLayout columns="* auto" (tap)="paymentDetails()" marginTop="20" marginLeft="20" marginRight="20" backgroundColor="white">
            <StackLayout col="0">
                <Label class="labelTransactionType" text="Payment"></Label>
                <Label class="labelTransactionValue" text="-€19.00"></Label>
                <Label class="labelTransactionData" text="Date: 2 of April of 2017"></Label>
            </StackLayout>
            <StackLayout col="1" verticalAlignment="center">
                <Label class="transactionsButtons" text=">"></Label>
            </StackLayout>
</GridLayout>

Since the whole StackLayout becomes your “button”, you can replace the “>” with a Label tag instead of a Button tag.

For a prettier “>” you could check out FontAwesome and how to implement it :slight_smile:


#5

I’ve been busy with the design of the application and only now i could grab the code again.
I dont really understand the GridLayout, i already checked the docs of nativescript.
I know its collumns by rows, but the syntax for me seems kinda hard to understand.
this line of code:

<GridLayout columns="* auto" (tap)="paymentDetails()" marginTop="20" marginLeft="20" marginRight="20" backgroundColor="white">

i don’t quite get it.
One more thing, i tried seraching the fontAwesome thing, and that’s basically implement a icon instead of a label on the “>” righT?

instead of having, for example this:

                <Label  text=">"></Label>

I would have instead this:
<Label icon="...."></Label>
Right?

@KalongLaw