Angular/Material2 Mat-Spinner 调整大小

Question

有没有可能改变 mat-spinner 或 mat-progress-circle 的尺寸呢？

我阅读了 mat-spinner 和 mat-progress-circle 的文档，但是它们说 mat-diameter 已被停用，spinner 将采用父元素的大小。

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

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

我也尝试使用内联CSS来更改高度，例如：

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

但是看起来不太美观。

- Vijay R

---

你试过使用 transform: scale(num) 吗？ - Gaston K

transform: scale(num) 对你有效吗？ - Vijay R

Answer 1

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

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

直径表示旋转器的宽度和高度的像素数量。 在本例中，它具有70x70像素的尺寸。

请参阅以下StackBlitz示例：

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

- Philipp Kief

---

你的链接中有很好的例子。 - ceebreenk

太好了，我有很好的加载器可以适应移动设备，现在这个。哈哈，Web开发真是不容易啊。 - Relm

有没有关于移动设备合适尺寸的官方指南？默认值 100 对于移动设备来说太大了。而 70 看起来非常完美 :-) - Simon_Weaver

将其设置为静态大小是不错的。但是如果我需要使其具有响应性呢？ - Arda Oğul Üçpınar

如果您遇到旋转器抖动问题，请查看 https://github.com/angular/components/issues/11756 - corolla

Answer 2

这里是答案：

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

- Tuba Salçi

Answer 3

您可以将以下内容添加到您的 CSS 文件中：

mat-spinner {
  zoom: 0.2
}

- Karthik

---

"zoom" 是非标准属性，Firefox 不支持。 - barbsan

Answer 4

我不确定为什么您的样式没有达到预期的效果。正如您所提到的，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>

Plunk

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

您希望实现这个吗？

- András Szepesházi

---

直到我在所有样式中添加了 !important，它才对我起作用。 - dan