Ionic 离子-输入与图标在年底

o2rvlv0m 于 2023-08-01 发布在 Ionic

关注(0)|答案(3)|浏览(141)

<ion-input placeholder="Username" formControlName="userName" class="primary-input"></ion-input>
     
         <ion-input [type]="passwordType" placeholder="Password" formControlName="password" autocomplete="off"  class="primary-input"> 
        <ion-icon name="eye"  (click)="togglePasswordMode()"  ></ion-icon>
        </ion-input>
  <div class="ion-margin-top">
    <ion-button expand="block" (click)="!isSubmitted && login()" >LOGIN</ion-button>
  </div>
       
 The above is my code currenty showing like this

字符串
x1c 0d1x的数据
当前显示图标在开始，但我需要显示在结束。.

我尝试了ion-item与slot=“end”工程，但我不想使用，因为文本框显示稍微右侧..我需要一些替代解决方案，而不使用ion-item..

我正在使用ionic 5..请一些人帮助css编辑：

.primary-input {
    background: aliceblue;
    color: #999999;
    border-radius: 5px;
    margin-bottom: 10px;
}

型
编辑：这是ion-item的输出

的

ionic-framework

来源：https://stackoverflow.com/questions/69303847/ion-input-with-icon-at-the-end

3条答案

按热度按时间

bweufnob1#

通常我们在按钮中使用图标，而不是ion-input字段。因此，您可以使用ion-item上的边框作为示例。
HTM文件：

<form #loginForm="ngForm" class="access" (submit)="login(model)">
        <ion-list lines="none">
          <ion-item>
            <ion-label position="floating">EMAIL</ion-label>
            <ion-input type="text" name="email" [(ngModel)]="model.email"></ion-input>
          </ion-item>
          <ion-item>
            <ion-label position="floating">PASSWORD</ion-label>
            <ion-input type="password" name="psw" [(ngModel)]="model.psw"></ion-input>
            <ion-button slot="end" fill="clear" (click)="showPassword()" class="seeClient">
              <ion-icon *ngIf="showPsw==true" name="eye-outline" color="warning" class="iconEye"></ion-icon>
              <ion-icon *ngIf="showPsw==false" name="eye-off-outline" color="warning" class="iconEye"></ion-icon>
            </ion-button>
          </ion-item>
        </ion-list>
        <ion-button [disabled]="!mobile" expand="block" type="submit" color="warning">Entrar</ion-button>
      </form>

字符串
SCSS文件：

.iconEye {
    font-size: 24px;
    padding-left: 4px;
    padding-top: 12px;
    vertical-align: middle;
}

ion-item {
    margin-bottom: 10px;
    background: transparent;
    border: 1px solid #eac402;
    --highlight-height: 0px;
    --highlight-color-valid: #eac402;
    --highlight-color-focused: #eac402;
    --highlight-color-invalid: #eac402;
}

型

的数据

赞(0）回复(0）举报 2023-08-01

yqkkidmi2#

用ion-item Package 你的代码，把ion-icon放在ion-input外面，它会像这样：

<ion-item>
    <ion-input [type]="passwordType" placeholder="Password" formControlName="password" autocomplete="off" class="primary-input"></ion-input>
    <ion-icon name="eye" (click)="togglePasswordMode()"></ion-icon>
  </ion-item>

字符串
下面是它现在的样子：

的数据

编辑：

要修复以前的多输入行为，我建议使用ion-grid，ion-row，ion-col布局组件。
这是密码

<ion-grid class="m-0">
    <ion-row>
      <ion-col>
        <ion-input placeholder="Username" formControlName="userName" class="primary-input"></ion-input>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-input [type]="passwordType" placeholder="Password" formControlName="password" autocomplete="off" class="primary-input"></ion-input>
      </ion-col>
      <ion-icon name="eye" class="m-auto" (click)="togglePasswordMode()"></ion-icon>
    </ion-row>
  </ion-grid>

型
这就是现在的样子

希望对您有所帮助。

赞(0）回复(0）举报 2023-08-01

oogrdqng3#

添加挠曲方向：row-reverseto ion-input样式

<ion-input type="email" style="flex-direction:row-reverse;">
   <ion-icon name="logo-ionic"></ion-icon>
</ion-input>

字符串

赞(0）回复(0）举报 2023-08-01

我来回答

Ionic 离子-输入与图标在年底

3条答案

编辑：

相关问题

热门标签

最新问答