Image button Nativescript and Angular

7
votes

I need to create an Image button which includes a custom image and a label in {N} + Angular. Something like this:

enter image description here

Here's my code. I'm using the stack layout inside the grid layout. I can't see the label below the image.

<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  class= "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>

css file:

.btn-sq-lg {
 background-color: white;
}
.label {
  text-align: center;
  color:#00caab;
}
4
nativescriptangular2-nativescriptnativescript-telerik-ui
are you wanting to display an image, icon or glyph on the button? - mast3rd3mon
I need an image button. Not a glyph @mast3rd3mon - Valkyrie
I have an image which I have to use as a button @mast3rd3mon - Valkyrie
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? - Brad Martin
@BradMartin I have updated the code in the question. The label is still not being displayed below the image. - Valkyrie

4 Answers

11
votes

So far i haven't found a straight-forward way to do it but i have a work around

You can try the following

some.component.html

<StackLayout class="btn-img"  orientation="horizontal" padding="5" (tap)="onTappedFun()" >
   <Image src="res://facebook"  width="10%" height="100%" marginRight="10"></Image>
   <Label text="Login via Facebook" verticalAlignment="center"></Label>
</StackLayout>

some.component.css

.btn-img{
    border-radius: 5;
    border-width: 1;
    color: white;
    margin: 10;
    font-size: 22;
    border-color: #2b3c6a;
    background-color: #3B5997;
}

some.component.ts

onTappedFun(){
    console.log("Hey i was tapped");
}

Result

button-facebook

-1
votes

Using only CSS you can reach the desired style:

.my-button {
  color: #395469;
  background-color: #FFFFFF;
  background-image: url("https://play.nativescript.org/dist/assets/img/NativeScript_logo.png");
  background-repeat: no-repeat;
  background-position: 35 28;
  background-size: 60 60;
  border-width: 2;
  border-color: #395469;
  border-radius: 28;
  height: 56;
  font-size: 16;
}

In the XML apply the style class:

<Button text="I like NativeScript" class="my-button"></Button>
-1
votes

You can try this : 

<GridLayout columns="*,*" rows="*,*"  width="400" height="400">
<StackLayout row="0" col="0" orientation="vertical">
    <Image src="~/images/star-empty.png" height="80%"></Image>
    <Label class="label" textWrap="true" text="Button Name1" height="20%"></Label>
</StackLayout>
 <StackLayout row="0" col="1" orientation="vertical">
    <Image src="~/images/star-empty.png" height="80%"></Image>
    <Label class="label" textWrap="true" text="Button Name2" height="20%"></Label>
</StackLayout>
 <StackLayout row="1" col="0" orientation="vertical">
    <Image src="~/images/star-empty.png" height="80%"></Image>
    <Label class="label" textWrap="true" text="Button Name3" height="20%"></Label>
</StackLayout>
 <StackLayout row="1" col="1" orientation="vertical">
    <Image src="~/images/star-empty.png" height="80%"></Image>
    <Label class="label" textWrap="true" text="Button Name4" height="20%"></Label>
</StackLayout>
</GridLayout>
-3
votes
<Button>
    <Image res="<path>"></Image>
    <Label text="{{text}}"></Label>
</Button>

--EDIT--

Why have I been downvoted for this? It answers the question that was asked?