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

问题描述

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

<ion-icon name="person" item-start></ion-icon><离子标签浮动>电子邮件</离子标签><ion-input type="email" name="email" [(ngModel)]="registerCredentials.email" required></ion-input></离子项目>

这给了我以下结果.

输入行外的图标.通过保持我的标签浮动来将其放入其中.

解决方案

您可以通过将图标放置在标签内来解决此问题，如下所示:

<离子标记浮动><ion-icon name="person" item-start></ion-icon>//<--- 这里！电子邮件</离子标记><ion-input type="email" name="email" [(ngModel)]="registerCredentials.email" required></ion-input></离子项目>

html

 <ion-item><ion-icon name="person" item-start></ion-icon><离子标记浮动>电子邮件</离子标记><ion-input type="email" name="email" required></ion-input></离子项目>

scss

离子项目{位置:相对；}ion-item.item-label-floating .text-input {左边距:32px；宽度:计算(100% - 32px)；}ion-item.item-input 离子图标 {显示:弯曲；对齐项目:flex-end；位置:绝对；底部:0；左:44px；颜色:#7f7f7f；字体大小:24px；最小宽度:0！重要；文本对齐:左！重要；}ion-item.item-input 离子标签[浮动] {填充左:32px；}ion-item.input-has-focus 离子标签[浮动]，ion-item.input-has-value 离子标签[浮动] {向左填充:0；变换: translate3d(-25.6px, 0, 0) 缩放(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屋！