Как разместить плавающую ионную метку внутри ионной текстовой области?

Question

В моем приложении Ioni c 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

Просто поместите ваш ion-label впереди вашего ion-textarea, используя атрибут z-index css.

Я предлагаю вам сделать что-то подобное, чтобы добиться относительно того, что вы ищете.

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