Question

如何使用NativeScript向TextField添加图标，如图所示：here

我的xhtml代码：

<StackLayout>
<Image src="res://logo_login" stretch="none" horizontalAlignment="center"></Image>

<TextField #username class="input" hint="GEBRUIKERSNAAM" [(ngModel)]="user.username" autocorrect="false" 
autocapitalizationType="none"></TextField>
<TextField #password class="input" hint="PASWOORD" secure="true" [(ngModel)]="user.password"></TextField>

<Button class="btn btn-primary btn-login icon" text="\e912 INLOGGEN" (tap)="login()"></Button>

<button  class="btn btn-forgot-pass" text="PASWOORD VERGETEN?" (tap)="forgotpass()"></button>

Answer 1

查看NativeScript的图标字体：

https://docs.nativescript.org/ui/icon-fonts

” ... 按照图标字体网页上的说明确定每个字体字形的十六进制代码，即图标。将Label组件添加到NativeScript应用程序，并将Label的text属性绑定到从要显示的图标的字符代码生成的单字母字符串，即String.fromCharCode（0xe903）。

...“

我相信这是你要做的。

Answer 2

您可以将TextFields像水平方向一样包裹在StackLayout中

<StackLayout orientation="horizontal">
  <!--Your password TextField-->
  <TextField
    #password
    class="input"
    hint="PASWOORD"
    secure="true"
    [(ngModel)]="user.password"
  ></TextField>
  <!--You can then place the icon-->
  <Label class="fa" text="&#xf06e;" (tap)="toggleShow()"></Label>
</StackLayout>

将图标添加到TextField NativeScript

2 个答案: