如何解决Angular Material 嵌套步进器的标签位置被覆盖
查看嵌套的 Angular Material Stepper,子步进器 (labelPosition="end"
) 中的标签位置被父步进器 (labelPosition="bottom"
) 中的标签位置覆盖 <mat-horizontal-stepper labelPosition="bottom" linear #stepper>
<mat-step [stepControl]="firstFormGroup" [editable]="isEditable">
<ng-template matStepLabel>ParentLabel</ng-template>
<mat-horizontal-stepper labelPosition="end" linear #stepperChild>
<mat-step [stepControl]="firstFormGroup" [editable]="isEditable">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>ChildLabel</ng-template>
<mat-form-field>
<mat-label>Name</mat-label>
<input matInput
formControlName="firstCtrl"
placeholder="Last name,First name"
required
/>
</mat-form-field>
</form>
</mat-step>
</mat-horizontal-stepper>
</mat-step>
</mat-horizontal-stepper>
),如下例所示:
{
"value": [
{
"id": "439AD01B4BE67DB1","name": "Primary","value": "000000000000000000000000000000000000000000000000000000","connectionString": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx","lastModified": "2018-04-24T16:30:54+00:00","readOnly": false
},{
"id": "CB45E100456857B9","name": "Secondary",{
"id": "B3AC55B7E71431A9","name": "Primary Read Only","readOnly": true
},{
"id": "E2AF6A9A89DCC177","name": "Secondary Read Only","readOnly": true
}
]
}
Here's a Stackblitz 展示问题。有没有办法解决这个问题?
解决方法
如果您稍微深入研究 Angular Material 源代码(当前为 11.2
),您可以了解如何根据 labelPosition
在内部应用这些类。
material/stepper/stepper.ts
'[class.mat-stepper-label-position-end]': 'labelPosition == "end"','[class.mat-stepper-label-position-bottom]': 'labelPosition == "bottom"',
仔细阅读样式表 (material/stepper/stepper.scss
),您可以看到 label-position-end
实际上并未应用任何样式。 label-position-bottom
但是有一些样式属性,它们应用于其所有子项。
这可能是 Angular Material 本身的一个错误,因为样式的范围不适合嵌套步进器。也可能是无意中嵌套了步进器。
在 angular/components
中打开一个问题以与开发人员取得联系。或者创建一个 PR。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。