angulaire/material2 mat-spinner redimensionner

y a-t-il un moyen de changer la taille de mat-spinner ou mat-progress-circle?

j'ai lu la documentation de mat-spinner et mat-progress-circle mais ils ont dit que mat-diameter est discontinué et le spinner prendra la taille de l'élément parent.

Comment puis-je mettre mat-spinner dans un mat-button dans le coin gauche sans changer la hauteur du bouton?

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

j'ai aussi essayé de changer la hauteur en utilisant des css en ligne comme

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

mais n'est pas assez pour voir.

19
demandé sur Mel 2016-11-17 14:56:08

2 réponses

je ne suis pas sûr pourquoi, votre style n'a pas apporté les résultats escomptés. Comme vous l'avez mentionné, le svg contenu md-spinner va se dimensionner à la taille du conteneur, donc appliquer width et heightmd-spinner devrait fonctionner.

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

Est-ce ce que vous souhaitez comme pour les atteindre?

5
répondu András Szepesházi 2017-02-23 15:36:52

Avec la dernière mise à jour, vous devez utiliser le diameter propriété:

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

le diamètre représente la quantité de pixels pour la largeur et la hauteur du spinner. Dans ce cas, il a une taille de 70x70 pixels.

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

49
répondu Philipp Kief 2017-10-11 07:24:13