html - angular/material2 マットスピナーのサイズ変更

Question

またはのサイズを変更する方法はありますmat-spinnerかmat-progress-circle?

mat-spinnerandのドキュメントを読みましたmat-progress-circleが、それmat-diameterは廃止され、スピナーは親要素のサイズを取るとのことでした。

ボタンの高さを変えずに左隅mat-spinnerに aを配置するにはどうすればよいですか?mat-button

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

また、インラインcssのようなものを使用して高さを変更しようとしました

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

しかし、見た目はきれいではありません。

score 243 · Accepted Answer

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

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

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

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

score 10 · Accepted Answer

ここに答えがあります：

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

score 9 · Accepted Answer

9

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

mat-spinner {
  zoom: 0.2
}

于 2019-01-17T05:42:21.650 に答える

score 7 · Accepted Answer

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

プランク

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

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

4 に答える 4