Размер счетчика прогресса Angular Material в гибкой компоновке

У меня есть 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, но не уверен, какое значение мне следует установить (если это единственное решение). Я бы предпочел сделать решение максимально динамичным.


angular css angular-material angular-flex-layout
person Hossam El-Deen    schedule 15.12.2018    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Если вы не ожидаете, что высота 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, но вы поняли идею.

person codequiet    schedule 15.12.2018
comment
Замечательное решение! .. Всего 2 балла: (1) я бы посоветовал сделать начальное значение небольшим, чтобы не влиять на высоту div, и (2) setTimeout должен быть setTimeout(() => this.adjustSpinnerSize(), 100). Не уверен, почему, но это не сработало, вероятно, из-за this привязки или чего-то еще. Будете ли вы вносить эти правки или предпочитаете, чтобы это сделал я? - person Hossam El-Deen; 16.12.2018
comment
О, хороший улов, я пропустил привязку, когда очистил код для публикации. Отредактирую ответ. - person codequiet; 17.12.2018