图片按钮 Nativescript 和 Angular

Posted 2023-04-13

【中文标题】图片按钮 Nativescript 和 Angular

【英文标题】：Image button Nativescript and Angular

【发布时间】：2017-08-06 12:05:42

【问题描述】：

我需要在 N + Angular 中创建一个包含自定义图像和标签的图像按钮。 像这样的：

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

<GridLayout columns="*,*" rows="*,*,*,*,*,*"   >
    <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

你需要使用原生按钮吗？如果不是，您可以使用布局容器，使用 backgroundColor 设置样式并将图像放入其中并使用 css 设置/定位它。这将为您提供带有图像的按钮外观，然后您可以在布局（堆栈、网格等）上使用 tap 事件处理程序。这是可以接受的还是您真的需要使用本机按钮小部件？

@BradMartin 我已经更新了问题中的代码。标签仍未显示在图像下方。

【参考方案1】：

到目前为止，我还没有找到一种直接的方法来做到这一点，但我有一个解决方法

你可以试试下面的

some.component.html

<StackLayout class="btn-img"  orientation="horizontal" padding="5" (tap)="onTappedFun()" >
   <Image src="res://facebook"    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");

结果

【讨论】：

如何在上面创建涟漪效果？

没有触摸反馈？

【参考方案2】：

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

【讨论】：

这不会加载图像。相反，选择的颜色是唯一的背景

【参考方案3】：

你可以试试这个：

<GridLayout columns="*,*" rows="*,*"   >
<StackLayout row="0" col="0" orientation="vertical">
    <Image src="~/images/star-empty.png" ></Image>
    <Label class="label" textWrap="true" text="Button Name1" ></Label>
</StackLayout>
 <StackLayout row="0" col="1" orientation="vertical">
    <Image src="~/images/star-empty.png" ></Image>
    <Label class="label" textWrap="true" text="Button Name2" ></Label>
</StackLayout>
 <StackLayout row="1" col="0" orientation="vertical">
    <Image src="~/images/star-empty.png" ></Image>
    <Label class="label" textWrap="true" text="Button Name3" ></Label>
</StackLayout>
 <StackLayout row="1" col="1" orientation="vertical">
    <Image src="~/images/star-empty.png" ></Image>
    <Label class="label" textWrap="true" text="Button Name4" ></Label>
</StackLayout>
</GridLayout>

【参考方案4】：

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

--编辑--

为什么我因此而被否决？它回答了所提出的问题？

【讨论】：

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

该解决方案有效吗？我只是没有正确地大写标签

不，不是，nativescript 有不同的渲染组件的方式，它不理解常规的 HTML。

@BishoAdam 那里，我替换了一个现在可以使用的标签

是的，我当时正在这样做，但不得不更改为格式化字符串，因为我需要转义的 html 字符