Угловой размер материала прогрессирующего обтекателя в гибкой компоновке - PullRequest
Новая
       30

Угловой размер материала прогрессирующего обтекателя в гибкой компоновке

0 голосов
/ 15 декабря 2018

У меня есть 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 голосов
/ 15 декабря 2018

Если вы не ожидаете, что высота элемента будет изменяться слишком часто (или вы знаете, и можете подключиться к любым событиям, которые на него влияют), вы можете установить диаметр счетчика динамически в зависимости от высоты его контейнера, что-то вродеэто:

.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 - но вы поняли идею.

...