Добавьте этот компонент отображения / скрытия пароля в свое приложение Ionic Angular за 3 простых шага.
Шаг 1 - Создайте компонент Angular
- Создайте компонент Angular с ContentChild IonInput.
- Добавьте метод переключения, который будет срабатывать при нажатии значка глаза.
- Этот метод будет переключаться между отображением текста пароля и точек.
- Определите логическую переменную showPassword.
import { Component, ContentChild } from '@angular/core'; import { IonInput } from '@ionic/angular'; @Component({ selector: 'app-show-hide-password', templateUrl: './show-hide-password.component.html', styleUrls: ['./show-hide-password.component.scss'] }) export class ShowHidePasswordComponent { showPassword = false; @ContentChild(IonInput) input: IonInput; constructor() {} toggleShow() { this.showPassword = !this.showPassword; this.input.type = this.showPassword ? 'text' : 'password'; } }
Шаг 2. Добавьте html-разметку для компонента.
- Создайте простую привязку с нашим методом переключения, привязанным к событию щелчка.
- Измените значок между открытыми и закрытыми глазами в зависимости от переменной showPassword.
<ng-content></ng-content> <a class="type-toggle" (click)="toggleShow()"> <ion-icon class="show-option" [hidden]="showPassword" name="eye-off-outline"></ion-icon> <ion-icon class="hide-option" [hidden]="!showPassword" name="eye-outline"></ion-icon> </a>
Это мой show-hide-password.component.scss, чтобы добавить несколько стилей.
:host { display: flex; width: 100%; align-items: center; .type-toggle { padding-inline-start: 0.5rem; .show-option, .hide-option { font-size: 1.2rem; display: block; // In case you want to use text instead of icons &:not(ion-icon) { text-transform: uppercase; font-size: 1rem; } } } }
Шаг 3. Используйте компонент "Показать / скрыть пароль"
Просто используйте компонент с ‹ion-input› в качестве дочернего содержимого.
<ion-item> <app-show-hide-password> <ion-input type="password" placeholder="Password" formControlName="password"></ion-input> </app-show-hide-password> </ion-item>
Это все.
Это было легко, правда?
Давай, добавь его в свое приложение Ionic Framework и покажи мне результат.
Узнайте больше об Ionic Framework!
Нужна помощь с укладкой? Дай мне знать в комментариях.