Angular Material 弹性布局中的进度微调器大小

Question

我有一个 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 属性但我不确定我应该为它设置哪个值（如果这是唯一的解决方案）。我更愿意使解决方案尽可能动态。

Answer 1

如果您预计 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 一起工作 - 你将不得不 fiddle 使用 CSS - 但你明白了。

Angular Material 弹性布局中的进度微调器大小

Angular Material progress spinner size in flex layout

css

angular

angular-material

angular-flex-layout