问题描述：

我需要在{N} + Angular 2中创建一个包含自定义图片和标签的图片按钮。类似这样的 image 图片按钮Nativescript和Angular 2

这是我的代码。我在网格布局中使用堆栈布局。我看不到图片下方的标签。请帮我弄清楚代码中的错误。

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

你想在按钮上显示图像，图标或字形吗？ – mast3rd3mon

我需要一个图像按钮。不是字形@ mast3rd3mon –

我有一个图像，我必须用作按钮@ mast3rd3mon –

答

<Button> 
    <Image res="<path>"></Image> 
    <Label text="{{text}}"></Label> 
</Button>

- 编辑 -

为什么我被downvoted这个？它回答了被问到的问题？

问题是关于'nativescript'组件，您提供了一个解决方案，使用HTML –

该解决方案的工作原理？我只是没有正确地使用大写标记 – mast3rd3mon

不，不是真的，'nativescript'具有不同的渲染组件的方式，它不理解普通的HTML。 –

答

到目前为止，我还没有找到一个直接的方式做到这一点，但我有一个变通

你可以尝试以下

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

结果

答

仅使用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>

答

你可以试试这个：

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

图片按钮Nativescript和Angular 2

some.component.html

some.component.css

some.component.ts

结果

相关推荐