Ionic 3中输入行内未显示图标 [英] Icon not displayed inside input line in Ionic 3

问题描述

我的Ionic 3项目中有以下代码。

 < ion-item> 
< ion-icon name =personitem-start>< / ion-icon> 
< ion-label floating>电子邮件< / ion-label> 
< ion-input type =emailname =email[（ngModel）] =registerCredentials.emailrequired>< / ion-input> 
< / ion-item> 
  

这给了我以下结果。

输入行外部的图标。谁可以通过保持我的标签浮动来获取它。

解决方案

你可以通过在标签内放置图标来修复它，就像这个：

 < ion-item> 
< ion-label floating> 
< ion-icon name =personitem-start>< / ion-icon> //< ---在这里！ 
电子邮件
< / ion-label> 
< ion-input type =emailname =email[（ngModel）] =registerCredentials.emailrequired>< / ion-input> 
< / ion-item> 
  

html

 < ion-item> 
< ion-icon name =personitem-start>< / ion-icon> 
< ion-label floating> 
电子邮件
< / ion-label> 
< ion-input type =emailname =emailrequired>< / ion-input> 
< / ion-item> 
  

scss

  ion-item {
 position：relative; 
} 
 
 ion-item.item-label-floating .text-input {
 margin-left：32px; 
宽度：计算（100％ -  32px）; 
} 
 
 ion-item.item-input ion-icon {
 display：flex; 
 align-items：flex-end; 
仓位：绝对; 
底部：0;剩余
：44px; 
颜色：＃7f7f7f; 
字体大小：24px; 
 min-width：0！important; 
 text-align：left！important; 
} 
 
 
 ion-item.item-input ion-label [浮动] {
 padding-left：32px; 
} 
 
 ion-item.input-has-focus ion-label [浮动]，
 ion-item.input-has-value ion-label [浮动] {
 pading-left：0; 
 transform：translate3d（-25.6px，0,0）scale（0.8）; / * 25.6等于32 * 0.8（比例因子）* / 
} 
  

I have the following code in my Ionic 3 project.

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

This gives me the following result.

The icon in outside of the input line. Who to get it inside by keeping my Label floating.

解决方案

You can fix that by placing the icon inside of the label, like this:

<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

If I do that the Icon and Label both are floating when the field is selected. Only the label should float up.

In order to prevent that, you can add the following style rule:

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

That way the icon will be shown only when the label is not floating.

EDIT II

It's working they way you want it to work but my solution will be the Icon should remain visible in the box and the label will float. Is that possible?

You could add a few style rules to do that. The key would be to place the icon outside the ion-label, and set its position to be an absolute value. Please take a look at this new updated plunker

The result would be like this:

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

这篇关于Ionic 3中输入行内未显示图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！