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

修改

  

如果我这样做，那么Icon和Label都是浮动的   选择。只有标签应该浮起来。

为了防止这种情况，您可以添加以下样式规则：

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

这样，只有当标签不浮动时才会显示图标。

编辑II

  

它正在按照您希望它工作的方式工作，但我的解决方案是Icon应该在框中保持可见，标签将浮动。这可能吗？

您可以添加一些样式规则来执行此操作。关键是将图标放在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) */
}