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

我不确定为什么您的样式没有带来预期的结果。正如您所提到的，md-spinner 中的 svg 内容将缩放到容器的大小，因此将 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 2

对于最新的更新，您应该使用 diameter 属性：

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

直径表示微调器的宽度和高度的像素数量。在本例中，它的大小为 70x70 像素。

请参阅以下 stackblitz 示例：

Answer 3

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

mat-spinner {
  zoom: 0.2
}

Answer 4

这里是答案：

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

angular/material2 mat-spinner resize