0
519
Vistasentrada de iones con icono al final
<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 
Actualmente se muestra el icono al principio, pero necesito mostrarlo al final.
probé ion-item con slot="end" funciona pero no quiero usar eso porque el cuadro de texto muestra ligeramente el lado derecho... Necesito alguna solución alternativa sin usar ion-item...
Estoy usando ionic 5. Por favor, alguien me ayuda a editar css:
.primary-input { background: aliceblue; color: #999999; border-radius: 5px; margin-bottom: 10px; }EDITAR: Esta es la salida de ion-item
2 Respuestas
Responde la pregunta0
Por lo general, usamos el ícono en un botón por separado del campo ion-input . Entonces puede usar un borde en el ion-item como ejemplo.
Archivo 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>archivo 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
Envuelva su código con un ion-item , coloque el ion-icon fuera ion-input , sería algo como esto:
<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>Así es como se vería ahora:
EDITAR:
Para corregir el comportamiento anterior para múltiples entradas, sugeriría usar componentes de diseño ion-grid , ion-row , ion-col .
aquí está el código
<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>Y así es como se vería ahora
Espero que esto haya ayudado.