web-dev-qa-db-ja.com

角/マテリアル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;

でも見た目はきれいではありません。

htmlcssangular-material2
28
Vijay R

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

これはあなたが達成したいことですか？

7
András Szepesházi

最新の更新では、diameterプロパティを使用する必要があります。

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

直径は、スピナーの幅と高さの両方のピクセル量を表します。この場合、サイズは70x70ピクセルです。

次のstackblitzの例を参照してください。

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

101
Philipp Kief

これをcssファイルに追加できます。

mat-spinner {
  zoom: 0.2
}
3
Karthik