Angular 16 : Comment modifier la taille d'une case à cocher Angular Material (MDC) ?
P粉254077747
P粉254077747 2023-08-18 11:42:41
0
1
437
<p>Dans Material, qui est désormais considéré comme hérité, je peux définir la taille de la case à cocher comme suit : </p> <pre class="brush:php;toolbar:false;">.mat-checkbox-frame { largeur : 1,5 rem ; }</pré> <p>Comment puis-je obtenir le même effet dans MDC ? </p>
P粉254077747
P粉254077747

répondre à tous(1)
P粉092778585

Pour modifier la taille de la case à cocher, ajoutez le code CSS suivant dans styles.scss :

.mdc-checkbox__background {
  width: 1.5rem !important;
  height: 1.5rem !important;
}

Mais si vous souhaitez utiliser l'effet d'entraînement par défaut, ce n'est que la moitié de la solution. Maintenant, vous devez également aligner la case à cocher pour qu'elle s'insère parfaitement dans le cercle de l'effet d'entraînement. Veuillez ajouter le code CSS suivant dans styles.scss : 

.mdc-checkbox__background {
  width: 1.5rem !important;
  height: 1.5rem !important;
  top: 50% !important; /* 添加 */
  left: 50% !important; /* 添加 */
  transform: translate(-50%, -50%) !important; /* 添加 */
}

Veuillez vous référer à la démo en direct.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal