Html angular/material2 mat-spinner 调整大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40654262/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
angular/material2 mat-spinner resize
提问by Vijay R
Is there any possible way to change size of mat-spinneror mat-progress-circle?
有什么可能的方法来改变mat-spinner或 的大小mat-progress-circle吗？
I read the documentation of mat-spinnerand mat-progress-circlebut they said that mat-diameteris discontinued and the spinner will take the parent element's size.
我阅读了mat-spinner和的文档，mat-progress-circle但他们说mat-diameter已停止使用，并且微调器将采用父元素的大小。
How can I put mat-spinnerin a mat-buttonto the left corner without changing the height of the button?
如何mat-spinner在mat-button不改变按钮高度的情况下将a放在左角？
<button mat-button>
<mat-spinner style="float:left;"></mat-spinner>
processing....
</button>
I also tried to change the height using in-line css like
我还尝试使用内嵌 css 更改高度，例如
style="float:left;height:10px;width:10px;
but is not pretty to see.
但不好看。
采纳答案by András Szepesházi
I'm not sure why your styling did not bring the desired results. As you mentioned, the svgcontent inside md-spinnerwill scale to the container's size, so applying widthand heightto the md-spinnershould work.
我不知道为什么你的造型没有带来预期的结果。正如你提到的，svg里面的内容md-spinner将扩展到容器的大小，因此应用width和height对md-spinner应该工作。
CSS
CSS
md-spinner {
float:left;
width: 24px;
height: 24px;
margin: 5px 10px 0px 0px;
}
Template
模板
<button md-raised-button>
<md-spinner></md-spinner>Raised Button with spinner
</button>
Plunk
普朗克
http://plnkr.co/edit/RMvCtOCV9f4TxgB4G0Yz?p=preview
http://plnkr.co/edit/RMvCtOCV9f4TxgB4G0Yz?p=preview
Is this what you'd like to achieve?
这是你想要达到的目标吗？
回答by Philipp Kief
With the latest update you should use the diameterproperty:
使用最新更新，您应该使用该diameter属性：
<mat-spinner [diameter]="70"></mat-spinner>
The diameter represents the amount of pixels for both the width and the height of the spinner. In this case it has a size of 70x70 pixels.
直径表示微调器宽度和高度的像素数量。在这种情况下，它的大小为 70x70 像素。
See the following stackblitz example:
请参阅以下 stackblitz 示例：
https://stackblitz.com/edit/angular-material2-progress-spinner
https://stackblitz.com/edit/angular-material2-progress-spinner
回答by Karthik
you can add this to your css file:
您可以将其添加到您的 css 文件中：
mat-spinner {
zoom: 0.2
}
