标签: ionic7

我使用的是 Ionic 7 和 Angular（材质）14。

我想在适用的字段标签中显示必填字段指示符 (*)。

在 Ionic 6 中，我通过在 ion-label 中添加 span 标签以及用于样式化的类来实现这一点，例如：

<ion-item>
  <ion-label position="fixed">Title<span class="required-field-indicator">*</span></ion-label>
  <ion-select formControlName="title">
    <ion-select-option *ngFor="let title of titles" value="{{title}}">{{title}}</ion-select-option>
  </ion-select>
</ion-item>

然后我可以使用 CSS 更改指标的样式：

.required-field-indicator {
  color: var(--ion-color-tertiary);
  font-weight: bolder;
  padding: 2px;
}

我的字段将显示如下：

我现在已升级到 Ionic 7，根据文档 ( https://ionicframework.com/docs/api/select)，ion-label不再适用于 ion-input 和 ion-select。相反，应该使用离子选择组件上的标签和标签放置属性，如下所示：

我相应地更新了我的代码：

<ion-item>
  <ion-select label="Title" labelPlacement="fixed" formControlName="title" [required]="true">
    <ion-select-option *ngFor="let title of titles" value="{{title}}">{{title}}</ion-select-option>
  </ion-select>
</ion-item>

但是，通过此更改，我无法再添加（除非我将其作为标签属性中的字符添加）或自定义所需的字段指示符符号。

如何在 Ionic 7 中添加我的指示器并设置其样式？

我已经设法在 ion-input 组件上使用 CSS 来做到这一点：

.required-indicator {
  .label-text::after { …

我一直在将代码迁移到 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'不再起作用。

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

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