角材料嵌套步进器的标签位置被覆盖。
提问于 2021-02-25 06:13:53
查看嵌套的角材料步进，子步骤(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>这里有一个Stackblitz展示了这个问题。有办法绕道吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-02-26 03:01:34
如果您稍微研究一下棱角材质源代码(目前是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/components中打开一个问题，以便与开发人员联系。或者创造一个公关。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66370206
复制相关文章
腾讯云开发者
