Icône non affichée à l'intérieur de la ligne d'entrée dans Ionic 3

Question

J'ai le code suivant dans mon projet Ionic 3.

<ion-item> 
    <ion-icon name="person" item-start></ion-icon> 
    <ion-label floating>Email</ion-label> 
    <ion-input type="email" name="email" [(ngModel)]="registerCredentials.email" required></ion-input> 
</ion-item> 

Cela me donne le résultat suivant.

L'icône est située à l'extérieur de la ligne d'entrée. Qui peut l'obtenir en gardant mon label flottant.

Answer 1

Vous pouvez résoudre ce problème en plaçant l'icône à l'intérieur de l'étiquette, comme ceci:

<ion-item>  
    <ion-label floating> 
    <ion-icon name="person" item-start></ion-icon> // <--- Here! 
    Email 
    </ion-label> 
    <ion-input type="email" name="email" [(ngModel)]="registerCredentials.email" required></ion-input> 
</ion-item> 

Working plunker

EDIT

Si je fais que l'icône et Les deux étiquettes flottent lorsque le champ est sélectionné. Seule l'étiquette devrait flotter.

Afin d'éviter cela, vous pouvez ajouter la règle de style suivante:

ion-item.input-has-focus ion-label[floating] ion-icon, 
ion-item.input-has-value ion-label[floating] ion-icon { 
    display: none; 
} 

De cette façon, l'icône sera affichée uniquement lorsque l'étiquette ne flotte pas.

EDIT II

Il est qu'ils travaillent comme vous le voulez travailler, mais ma solution sera l'icône doit rester visible dans la boîte et l'étiquette flotte. Est-ce possible?

Vous pouvez ajouter quelques règles de style pour le faire. La clé serait de placer l'icône en dehors du ion-label, et de définir sa position à absolute. S'il vous plaît jeter un oeil à ce new updated plunker

Le résultat serait comme ceci:

html

<ion-item>  
    <ion-icon name="person" item-start></ion-icon> 
    <ion-label floating> 
     Email 
    </ion-label> 
    <ion-input type="email" name="email" required></ion-input> 
    </ion-item> 

SCSS

ion-item { 
    position: relative; 
} 

ion-item.item-label-floating .text-input { 
    margin-left: 32px; 
    width: calc(100% - 32px); 
} 

ion-item.item-input ion-icon { 
    display: flex; 
    align-items: flex-end; 
    position: absolute; 
    bottom: 0; 
    left: 44px; 
    color: #7f7f7f; 
    font-size: 24px; 
    min-width: 0 !important; 
    text-align: left !important; 
} 


ion-item.item-input ion-label[floating] { 
     padding-left: 32px; 
} 

ion-item.input-has-focus ion-label[floating], 
ion-item.input-has-value ion-label[floating] { 
    pading-left: 0; 
    transform: translate3d(-25.6px, 0, 0) scale(0.8); /* 25.6 is equal to 32 * 0.8 (the scale factor) */ 
}