wake-up-neo.net

So erstellen Sie ein Login in ionic 2 mit dem Kennwort ein-/ausblenden

Ich wollte ein solches Design mit ionischen 2 erstellen -> https://codepen.io/Floky87/pen/bVopyZ

Dies ist eine Anmeldefunktionalität, die ein Kennwort zum Anzeigen/Verbergen enthält.

Hier ist mein HTML-Code

<ion-header>

  <ion-navbar>
    <ion-title>Login</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
<ion-item>
      <ion-label floating primary>Username</ion-label>
      <ion-input type="text"></ion-input>
</ion-item> 
<ion-item>
      <ion-label floating primary>Password</ion-label>
      <ion-input type="password"></ion-input>
      <ion-icon name="eye" item-right (click)="showHide()"></ion-icon>
</ion-item> 
</ion-content>

Und hier ist das Ergebnis -> http://prntscr.com/gz12xg

Hier ist mein .ts-Code

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }
  showHide() {
    console.log('hi');
  }

}

Das Problem ist, dass das Augensymbol nicht anklickbar ist. Kein Protokoll von der Konsole.

Wenn ich auf das Augensymbol klicke, kann ich nur noch das Passwortfeld eingeben.

Kann mir jemand helfen? Ich möchte nur, dass das Augensymbol anklickbar ist.

3
JSmith

Sie können wie unten in der .ts-Datei Diesen Code schreiben

 passwordType: string = 'password';
 passwordIcon: string = 'eye-off';

 hideShowPassword() {
     this.passwordType = this.passwordType === 'text' ? 'password' : 'text';
     this.passwordIcon = this.passwordIcon === 'eye-off' ? 'eye' : 'eye-off';
 }

schreibe dies in deinen .html

<ion-item>
    <ion-label floating>Password</ion-label>
    <ion-input formControlName="password" [type]="passwordType" clearOnEdit="false"></ion-input>
    <ion-icon item-end [name]="passwordIcon" class="passwordIcon" (click)='hideShowPassword()'></ion-icon>
</ion-item>

und dies wird Ihr .scss-Code sein. Ändern Sie entsprechend Ihrem Bedarf

.passwordIcon{
   font-size:2rem !important;
   position: relative !important;
   top: 22px !important;
   margin: 0 auto !important;
}
19
Azam Alvi

Sie können es einfach in eine Schaltfläche einwickeln, um es anklickbar zu machen:

<ion-item>
  <ion-label floating primary>Password</ion-label>
  <ion-input type="password"></ion-input>
  <button ion-button clear item-end (click)='showHide()' style="height:32px;">
    <ion-icon name="eye" style="font-size:32px;"></ion-icon>
  </button>
</ion-item>

Verwenden Sie die Stilattribute, um die Größe des Symbols zu steuern.

7
David
  public type = 'password';
  public showPass = false;
    showPassword() {
    this.showPass = !this.showPass;
    if(this.showPass){
      this.type = 'text';
    } else {
      this.type = 'password';
    }
  }
      <ion-item class="i2"no-lines>
          <ion-input type="{{type}}" name="password" [(ngModel)]="password" placeholder="Password" style="width: 40px;" no-lines>
        </ion-input>
        <button *ngIf="!showPass" ion-button clear color="dark" type="button" item-right (click)="showPassword()"> 
          <ion-icon name="eye" style="font-size:25px;"></ion-icon>
        </button>
        <button *ngIf="showPass" ion-button clear color="dark" type="button" item-right (click)="showPassword()"> 
          <ion-icon name="eye-off" style="font-size:25px;"></ion-icon>
        </button>
      </ion-item>
1
Pavan Raju