Nativescript: Unable to create an image button with {N} + Angular 2.

Created on 15 Mar 2017 · 7Comments · Source: NativeScript/NativeScript

I need to create an Image button which includes a custom image and a label.
Something like this

Can someone help me with this

question

Source

smithamalur

Most helpful comment

Found your SO post, my comment there I have copied below.

Do you need to use the native buttons? If not you could use a layout container, style it with a backgroundColor and put the image inside and style/position it with css also. This would give you a button appearance with an image, you can then use the tap event handler on the layout (stack, grid, etc). Would that be acceptable or do you really need to use the native button widgets?

Basically do the following:

<StackLayout tap="yourTapEvent" backgroundColor="#222" color="#fff">
    <Image src="yourImage"></Image>
    <Label text="JOURNAL"><Label>
</StackLayout>

I forget the binding syntax for angular but that layout should work - just fix the tap event for angular binding syntax.

bradmartin on 15 Mar 2017

👍2

All 7 comments

Found your SO post, my comment there I have copied below.

Basically do the following:

<StackLayout tap="yourTapEvent" backgroundColor="#222" color="#fff">
    <Image src="yourImage"></Image>
    <Label text="JOURNAL"><Label>
</StackLayout>

I forget the binding syntax for angular but that layout should work - just fix the tap event for angular binding syntax.

bradmartin on 15 Mar 2017

👍2

@bradmartin Thank you.
When I use this format, The label doesn't showup. Only the image is displayed. Can you please tell me what is it that I'm doing wrong here.

<StackLayout class="  btn-sq-lg  " col="0" row="0" (tap)="gotoSRTPage()">

        <Image  col="0" row ="1" src="res://ic_briefcase" > </Image>
        <Label col="0" row="2" text="SRT" horizontalAlignment="center" verticalAlignment="center"></Label>
        </StackLayout>

smithamalur on 20 Mar 2017

StackLayouts do not have row and col properties - that's for GridLayouts. Although in the StackLayout above the image should be on top of the label vertically (by default). If the label isn't visible, make sure your css class btn-sq-lg doesn't have a height specified that would limit the label from showing. I would remove your custom class and see if both view items (image & label) are visible and then start modifying the interface.

bradmartin on 20 Mar 2017

@bradmartin
Sorry for the ambiguity in my previous comment. I'm using the stack layout inside the grid layout.
I haven't included any height property in my css file. I still can't see the label below the image.
Here's my code.

<GridLayout columns="*,*" rows="*,*,*,*,*,*"  width="400" height="400">
    <StackLayout class="  btn-sq-lg  " col="0" row="0" (tap)="gotoSRTPage()">
        <Image  col="0" row ="1" src="res://ic_briefcase" > </Image>
        <Label class= "label" textWrap="true" col="0" row="2" text="SRT" horizontalAlignment="center" verticalAlignment="center"></Label>
    </StackLayout>  
    <StackLayout class="  btn-sq-lg  " col="1" row="0" (tap)="">
        <Image  col="1" row ="1" src="res://ic_blog" > </Image>
        <Label  col="1" row="2" text="SRT" horizontalAlignment="center" verticalAlignment="center"</Label>
        </StackLayout>    
         <StackLayout class="  btn-sq-lg  " col="0" row="3" (tap)="">
        <Image  col="0" row ="4" src="res://ic_reminder" > </Image>
        <Label class= "label" textWrap="true" col="0" row="5" text="SRT" horizontalAlignment="center" verticalAlignment="center"></Label>
        </StackLayout>    
         <StackLayout class="  btn-sq-lg  " col="1" row="3" (tap)="">
        <Image  col="1" row ="4" src="res://ic_announcement" > </Image>
        <Label class="label" textWrap="true" col="1" row="5" text="SRT" horizontalAlignment="center" verticalAlignment="center"></Label>
        </StackLayout>      
</GridLayout>

and the css file

.btn-sq-lg {
 background-color: white;
}
label{
  text-align: center;
  color:#00caab;
}

smithamalur on 20 Mar 2017

My fault too. I didn't look closely at the exact property on the stack
layout to determine it was inside a grid and not trying to use as a grid.
I'll try to create something later. It would be best if you asked this on
the forums though instead of the repo since it's not an issue itself with
the core of Nativescript :)

On Mon, Mar 20, 2017, 12:08 PM Smitha Malur Muralidhar <
[email protected]> wrote:

@bradmartin https://github.com/bradmartin
Sorry for the ambiguity in my previous comment. I'm using the stack layout
inside the grid layout.
I haven't included any height property in my css file. I still can't see
the label below the image.
Here's my code.

and the css file

.btn-sq-lg {
background-color: white;
}
Label{
text-align: center;
color:#00caab;
}

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/NativeScript/NativeScript/issues/3802#issuecomment-287828472,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFulhBK3h3kzon7PiLyIRuvjH9oJFmX3ks5rnrKMgaJpZM4MeJsa
.