web-dev-qa-db-fra.com

redimensionnement angulaire / matériel2

Est-il possible 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 interrompu et le cinéaste 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 ce n'est pas joli à voir.

htmlcssangular-material2
28
Vijay R

Je ne sais pas pourquoi votre style n'a pas apporté les résultats souhaités. Comme vous l'avez mentionné, le contenu de svg à l'intérieur de md-spinner sera redimensionné à la taille du conteneur, donc appliquer width et height à la commande md-spinner devrait marcher.

[~ # ~] css [~ # ~] 

md-spinner {
  float:left; 
  width: 24px; 
  height: 24px; 
  margin: 5px 10px 0px 0px;
}

Modèle 

<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 réaliser?

7
András Szepesházi

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

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

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

Voir l'exemple de stackblitz suivant:

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

101
Philipp Kief

vous pouvez ajouter ceci à votre fichier css:

mat-spinner {
  zoom: 0.2
}
3
Karthik