html - angular/material2 mat-spinner 调整大小

Question

有没有办法改变mat-spinneror的大小mat-progress-circle？

我阅读了文档，mat-spinner但mat-progress-circle他们说该文档mat-diameter已停产，并且微调器将采用父元素的大小。

如何mat-spinner在不改变按钮高度的情况下将 a放在mat-button左上角？

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

我还尝试使用内联 css 更改高度，例如

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

但不好看。

score 243 · Accepted Answer

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

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

直径表示微调器宽度和高度的像素数量。在这种情况下，它的大小为 70x70 像素。

请参阅以下 stackblitz 示例：

score 10 · Accepted Answer

这是答案：

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

score 9 · Accepted Answer

9

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

mat-spinner {
  zoom: 0.2
}

于 2019-01-17T05:42:21.650 回答

score 7 · Accepted Answer

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

这是你想要达到的吗？

4 回答 4