Ionic 3輸入行內不顯示的圖標

Question

我的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> 

這給了我以下結果。

輸入行外部的圖標。將我的標籤保持浮動狀態的人員。

Answer 1

您可以修復通過將圖標的標籤裏面，像這樣：

<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

編輯

如果我這樣做，圖標和當選擇字段 時，標籤都處於浮動狀態。只有標籤應該浮起來。

爲了防止這種情況，您可以添加以下樣式規則：

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

這樣的圖標會顯示只有當標籤不浮動。

編輯II

它的工作他們的方式，你想要的工作，但我的解決方案將是圖標應該在框中保持可見和標籤將漂浮。那可能嗎？

您可以添加一些樣式規則來做到這一點。關鍵是將圖標放置在ion-label之外，並將其位置設置爲absolute的值。請看看這個new updated plunker

結果會是這樣：

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) */ 
}