首页 文章

图像按钮Nativescript和Angular

提问于
浏览 次
1

我需要创建一个图像按钮，其中包含 Angular中的自定义图像和标签 . 像这样的东西：

enter image description here

这是我的代码 . 我在网格布局中使用堆栈布局 . 我看不到图像下方的标签 .

<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文件：

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

4 回答

  • 0

    到目前为止，我还没有找到一个直截了当的方法，但我有一个解决方法

    您可以尝试以下方法

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

    结果

    button-facebook

    回复于
  • -1

    只使用CSS，您可以达到所需的样式：

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

    在XML中应用样式类：

    <Button text="I like NativeScript" class="my-button"></Button>
    回复于
  • 5

    你可以试试这个：

    <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
    <Button>
    <Image res="<path>"></Image>
    <Label text="{{text}}"></Label>
</Button>
    • 编辑 -

    为什么我为此被投票？它回答了被问到的问题？

    回复于

相关问题