如何在 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

使用选择组件的

CSS Shadow Parts。

<ion-select class="required-field-indicator" ...

ion-select.required-field-indicator::part(label) {
    /* your style here */
}

Answer 2

我试图完成同样的事情，最后找到了解决方案。

由于标签位于

IonSelect 的 shadow-root 中，并且没有 part 属性来公开它，因此无法在 SCSS 文件中对其进行样式化 但是 它可以在打字稿中完成，如下所示:

// For referencing all of the ion-select inside the form
@ViewChildren(IonSelect) ionSelects; 

ngAfterViewInit() {
   // This was for being sure of having all the ion-select loaded
   this.ionSelects.changes.subscribe(data => {
      // Creating the CSS rules we're gonna apply inside the shadow-root
      const sheet = new CSSStyleSheet();
      sheet.replaceSync(`.label-text::after {
         content: ' *';
         transform: translate(-100%, 0);
         color: var(--ion-color-secondary) !important;
         display: var(--ion-label-display); // This is necessary to show 
         // and hide the asterisk
         font-weight: bolder;
         padding: 2px;
      }`)
           
      const arrIonSelect = data.toArray(); // From Queryselector 
      // to Array of IonSelect
      arrIonSelect.forEach((isel) => {
         // Storing the current CSS rules used by the shadow-root
         const elemStyleSheets = 
            isel.el.shadowRoot.adoptedStyleSheets;
         // Merging the rules
         isel.el.shadowRoot.adoptedStyleSheets = 
            [...elemStyleSheets, sheet];
      });
   });
}

最后在

html 中，我们将样式属性绑定到所需的“条件”：

<ion-select  
[style.--ion-label-display]="form.get('title')?.errors?.required ? 'initial' : 'none'"
label="Title" labelPlacement="stacked" formControlName="title">
   <ion-select-option *ngFor="let title of titles" value="{{title}}">{{title}}</ion-select-option>
</ion-select>

我希望他们将来能改变一些事情，但现在我希望它有帮助，它对我来说确实如此。

Answer 3

目前还没有办法做到这一点（Ionic 7.0.10），但它

已在 Ionic 的 Github 存储库中作为功能请求进行了讨论。看起来他们会将标签添加为 Shadow DOM 部件，允许您以与占位符和文本相同的方式设置其样式，如 @Maxime 的答案所示。