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;
}
So far i haven't found a straight-forward way to do it but i have a work around
You can try the following
<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>
.btn-img{
border-radius: 5;
border-width: 1;
color: white;
margin: 10;
font-size: 22;
border-color: #2b3c6a;
background-color: #3B5997;
}
onTappedFun(){
console.log("Hey i was tapped");
}