离子输入现在需要提供标签

Question

我一直在将代码迁移到 Ionic 7，警告之一是以下消息：

`node_modules_ionic_core_dist_esm_ion-item_8_entry_js.js:2 [离子警告]：ion-input 现在需要提供带有“label”属性或“aria-label”属性的标签。要迁移，请删除“ion-label”的所有用法，并将标签文本传递给“label”属性或“aria-label”属性。

示例：带有 aria-label 的示例：`

现在它要我更改我的代码，从

<ion-item lines="full"> <ion-label position="floating">User Name</ion-label> <ion-input type="text" formControlName="user_name" [class.invalid]="!mainForm.controls['user_name'].valid && (mainForm.controls['user_name'].dirty || submitAttempt)"> </ion-input> </ion-item>

到

<ion-item lines="full"> <ion-input type="text" formControlName="user_name" label="User Name" position="floating" [class.invalid]="!mainForm.controls['user_name'].valid && (mainForm.controls['user_name'].dirty || submitAttempt)"> </ion-input> </ion-item>

对于那些没有意识到差异的人来说，变化是我们放弃了离子标签并将其合并到离子输入中。警告似乎消失了，但是position='floating'不再起作用。

有谁知道如何在保持浮动功能完整的同时进行迁移？

我尝试将该行从位置更改为填充，但仍然不允许。

Answer 1

IonInput 现在有一个用于设置标签位置的属性，称为 labelPlacement。您可以将标签设置为浮动，如下所示：

  <ion-item>
    <ion-input label="Floating label" labelPlacement="floating" placeholder="Enter text"></ion-input>
  </ion-item>

请参阅https://ionicframework.com/docs/api/input

这次升级确实有很多变化！