我尝试了StackBlitz,但它不能正确显示
<mat-form-field>
和<mat-label>
标签,我已经导入了需要的组件,但还是无法正常工作。
如果我在这里发布代码,也许你能帮我解决问题。我的问题在于CSS方面,因为我不知道如何定位<mat-label>
标签,当使用一个<mat-form-field>
并设置appearance="outline"
时,当标签在中心、覆盖着输入框时,我无法将其移动到中心位置,而只能放置在下方。
如果我调整position:absolute
的值,当发生单击事件时,浮动标签会出现在错误的位置。
以下是代码:
<div
id="test"
fxLayout="row"
fxLayoutGap="12px"
fxLayoutAlign="start center"
[class.hasFocus]="numberMatInput.value">
<mat-form-field appearance="outline">
<mat-label>KM</mat-label>
<input matInput #numberMatInput [formControl]="numberInput">
</mat-form-field>
</div>
还有CSS:
#test ::ng-deep .mat-form-field-appearance-outline {
width: 65px;
height: 45px;
line-height: 1.725;
}
#test ::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex {
padding: 0px 10px 0px 10px;
}
#test ::ng-deep .mat-form-field-infix {
padding: 3px 0 3px 0;
}
这是期望的结果:
基本上当输入框没有被操作时,我需要移动标签,并在输入框获得焦点时让其停留在同一位置浮动在上方。
对我来说,看起来这两个状态只需要一个规则,所以如果我移动未被操作的标签,则浮动的标签也会移动。
有人能帮忙吗?谢谢。
.mat-form-field-appearance-outline
这个类似乎不存在? - user184994