角度/材料2垫子-纺纱机调整尺寸

有没有可能的方法来改变 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;

但看起来并不好看。

69366 次浏览
小开
最佳答案

我不知道为什么你的造型没有带来理想的效果。正如您所提到的，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

这就是你想要的吗？

小开

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

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

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

参见下面的 stackblitz 示例:

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

小开

你可以把它添加到你的 css 文件:

mat-spinner {
zoom: 0.2
}
小开

答案是:

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

提交答案