Flex布局中的Angular Material Progress微调器大小

时间:2018-12-15 06:16:38

标签: css angular angular-material angular-flex-layout

我有一个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属性,但是我不确定应该使用哪个值设置(如果这是唯一的解决方案)。我希望使解决方案尽可能动态。

1 个答案:

答案 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-但您知道了。