我使用的是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-select组件上使用label和label-placement属性,如示例所示:
我相应地更新了代码:
<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>
但是,有了这个更改,我就不能再添加(除非我在label属性中将其作为字符添加)或自定义我所需的字段指示符符号。
如何在Ionic 7中添加我的指示器并设置样式?
我已经成功地在离子输入组件上使用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中,但是我无论如何都无法访问标签。请帮助!
1条答案
按热度按时间tcbh2hod1#
查看Ionic文档的CSS Shadow部分。
将您的类添加到离子组件
然后在你的CSS中添加