Image button Nativescript and Angular

Question

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

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

Elene

are you wanting to display an image, icon or glyph on the button? – Moon

I need an image button. Not a glyph @Moon – Elene

I have an image which I have to use as a button @Moon – Elene

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? – Amylaceous

@BradMartin I have updated the code in the question. The label is still not being displayed below the image. – Elene

For a test could you just hardcode 2 columns on the parent Grid and then see what happens. Let me know. If that doesn't work, later I'll create something in a test app and let you know how it works on my end. – Amylaceous

@BradMartin I used <image> and <label> in the parent Gridview and it temporarily fixed my issue. Although, It would look better if It can be used in a stacklayout like you suggested before. Thanks for the help. – Elene

@BradMartin Will I be able to get the ripple effect if I use a layout container as a button? – Hoick

Answer 1

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

Cardialgia

how to create ripple effect on it? – Tactual

No touch feedback? – Mowery

Answer 2

This is also an option, though <span> isn't like a <label> where it's acting like a <div> in HTML...

Therefor I use a \n

<Button backgroundColor="black" width="70" height="100">
  <FormattedString>
    <Span class="far" text="&#xf073;" color="white" fontSize="50"></Span>
    <Span text="&#xA;&#xA;TEXT" color="white"></Span>
  </FormattedString>
</Button>          

Note: text="" is the FontAwesome icon from this link: here

Will result something like this:

Chisel

Answer 3

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>

Neille

This doesn't load the image. Instead the color selected is the only background – Suellensuelo

Answer 4

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>

Thesaurus

Answer 5

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

Moon

The question was about nativescript components, you provided a solution using HTML – Cardialgia

That solution works? I just didnt capitalize the tags correctly – Moon

No not really, nativescript has a different way of rendering components and it doesn't understand regular HTML. – Cardialgia

@BishoAdam there, i replaced one tag which will now work – Moon

Yeah, i was doing then but had to change to a formatted string just because i needed escaped html characters – Moon