如何在离子文本区域内放置浮动离子标签？

Question

在我的 Ionic 5 应用程序中，我显示了一个带有浮动标签的文本区域，如下所示：

然后当用户点击<ion-text-area>时，显示如下：

谁能告诉我最初如何才能在文本区域内很好地显示浮动标签？

当页面加载时，标签应该在文本区域的半径范围内。

这是我目前的 HTML & CSS:

<ion-item lines="none">
    <ion-label position="floating">
      Please describe your issue to {{  mechanicToContact.name  }} here
    </ion-label>
    <ion-textarea 
        style="border-radius:30px;
        background: #6E73AA;
        padding: 5px";
        color="primary"
        rows="6"
        cols="20"
        required
        minlength="15">
    </ion-textarea>
  </ion-item>

Answer 1

只需使用 z-index css 属性将 ion-label 放在 ion-textarea 的 "front" 中。

我建议你做这样的事情来相对地实现你正在寻找的东西。

component.html

  <ion-item lines="none">
    <ion-label position="floating" class="position-label-inside">
      Please describe your issue to {{  mechanicToContact.name  }} here
    </ion-label>
    <ion-textarea 
        style="border-radius:30px;
        background: #6E73AA;
        padding: 5px;"
        color="primary"
        rows="6"
        cols="20"
        required
        minlength="15">
    </ion-textarea>
  </ion-item>

component.scss

@keyframes slide-out {
  from {padding-left: 15px}
  to {padding-left: 0}
}

.position-label-inside {
  padding-left: 15px;
  z-index: 1;
}

ion-item.item-has-focus {
  .position-label-inside {
    animation-name: slide-out;
    animation-duration: 1s;
    padding-left: 0!important;
  }
}

ion-textarea {
  z-index: 0;
}

如何在离子文本区域内放置浮动离子标签？

How to position floating ion-label inside ion-text-area?

css

ionic-framework

ionic4