Angular/material2 матовый размер

Есть ли какой-либо возможный способ изменить размер mat-spinner или mat-progress-circle?

Я прочитал документацию mat-spinner и mat-progress-circle, но они сказали, что mat-diameter прекращено, а счетчик примет размер родительского элемента.

Как я могу поместить mat-spinner в mat-button в левый угол, не изменяя высоту кнопки?

<button mat-button>
   <mat-spinner style="float:left;"></mat-spinner> 
   processing....
</button>

Я также попытался изменить высоту с помощью встроенного css, например

style="float:left;height:10px;width:10px;

но не очень приятно видеть.

Ответы

Ответ 1

Я не уверен, почему ваш стиль не принес желаемых результатов. Как вы упомянули, содержимое svg внутри md-spinner будет масштабироваться до размера контейнера, поэтому применение width и height к md-spinner должно работать.

CSS

md-spinner {
  float:left; 
  width: 24px; 
  height: 24px; 
  margin: 5px 10px 0px 0px;
}

Шаблон

<button md-raised-button>
  <md-spinner></md-spinner>Raised Button with spinner
</button>

Plunk

http://plnkr.co/edit/RMvCtOCV9f4TxgB4G0Yz?p=preview

Это то, что вы хотели бы достичь?

Ответ 2

С последним обновлением вы должны использовать свойство diameter:

<mat-spinner [diameter]="70"></mat-spinner>

Диаметр представляет собой количество пикселей как для ширины, так и для высоты счетчика. В этом случае он имеет размер 70x70 пикселей.

См. следующий пример stackblitz:

https://stackblitz.com/edit/angular-material2-progress-spinner

Ответ 3

Вы можете добавить это в свой файл CSS:

mat-spinner {
  zoom: 0.2
}