angular/material2 mat-spinner调整大小

Question

有没有可能改变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;

但是看起来并不好看.

Answer 1

使用最新更新,您应该使用该diameter属性:

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

直径表示旋转器的宽度和高度的像素量.在这种情况下,它的大小为70x70像素.

请参阅以下stackblitz示例:

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

Answer 2

我不确定为什么你的造型没有带来预期的效果.正如你提到的,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>

普拉克

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

这是你想要实现的吗？

Answer 3

您可以将其添加到您的 css 文件中：

mat-spinner {
  zoom: 0.2
}

Answer 4

这是答案：

<mat-spinner mode="indeterminate" style="margin:0 auto;" [diameter]="30"></mat-spinner>