如何在 Ionic 7 中自定义离子选择的标签？

Question

我使用的是 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 {
    content: '*';
    transform: translate(-100%, 0);
    color: var(--ion-color-tertiary) !important;
    font-weight: bolder;
    padding: 2px;
  }
}

<ion-input label="First Name" labelPlacement="fixed" type="text" formControlName="firstName"
              class="required-indicator" [required]="true"></ion-input>

但这不适用于离子选择。我还尝试使用阴影部分并创建指令来将指示器附加到 DOM，但在任何情况下我都无法访问标签。请帮忙！

Answer 1

查看Ionic 文档的CSS Shadow Parts\xe2\x80\x8b 。

\n

将您的类添加到离子组件中

\n

<ion-select class="required-field-indicator" ...>\n

\n

然后在你的 CSS 中添加

\n

ion-select.required-field-indicator::part(label) {\n    ...\n}\n

\n