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;
でも見た目はきれいではありません。
あなたのスタイリングが望ましい結果をもたらさなかった理由がわかりません。既に述べたように、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>
Plunk
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
}