我有一个fxFlex="row"
,其中有一个button
和一个mat-spinner
。我希望mat-spinner
的大小与button
相同(即,使其恰好适合该行)。
当前行为是进度微调器太大。代码:
<div fxLayout="row">
<button fxFlexAlign="start" mat-stroked-button>Do something</button>
<mat-spinner *ngIf="loading"></mat-spinner>
</div>
我知道有一个diameter
属性,但是我不确定应该使用哪个值设置(如果这是唯一的解决方案)。我希望使解决方案尽可能动态。
答案 0 :(得分:2)
如果您不希望div的高度变化太频繁(或者您知道并且可以陷入影响它的任何事件),则可以根据容器高度来动态设置微调器直径,例如这个:
.html
<div #spinnerDiv class="spinner-container">
<button mat-raised-button color="primary">Do something</button>
<mat-spinner [diameter]="spinnerDiameter"></mat-spinner>
</div>
.css
.spinner-container {
display: flex;
flex-direction: row;
height: 40px;
}
.ts
spinnerDiameter: number = 1; // Set to a low number to avoid affecting the container height
@ViewChild('spinnerDiv') spinnerDiv: ElementRef;
ngAfterViewInit() {
// Wrap in a timeout to avoid ExpressionChangedAfterItHasBeenCheckedError
setTimeout(this.adjustSpinnerSize.bind(this), 100);
}
// Something happens that would cause the div height to change
someEvent() {
this.adjustSpinnerSize();
}
adjustSpinnerSize() {
this.spinnerDiameter = this.spinnerDiv.nativeElement.offsetHeight;
}
这只是一个粗略的解决方案,因为我不知道它如何与fxLayout一起使用-您将不得不摆弄CSS-但您知道了。