web-dev-qa-db-fra.com

Styling mat-radio-button in Angular Material

Je viens de commencer à utiliser le thème Angular Material dans mon application Angular.

J'utilise certains boutons radio mais je veux les styliser pour qu'ils soient plus petits que d'habitude. Je peux styliser les étiquettes de texte mais j'ai du mal à styliser les boutons eux-mêmes (les cercles).

Donc pour l'instant, j'ai

<mat-radio-group class="smallRadio">
    <mat-radio-button value="1">Option 1</mat-radio-button>
    <mat-radio-button value="2">Option 2</mat-radio-button>
</mat-radio-group>

Comment dois-je procéder?

angular-materialangular7
4
BENBUN Coder

Essaye ça,

Le rayon par défaut est 20px nous le définissons sur 10px ici

    :Host ::ng-deep .mat-radio-container{
      height: 10px;
      width: 10px;
    }
    :Host ::ng-deep .mat-radio-outer-circle{
      height: 10px;
      width: 10px;
    }
    :Host ::ng-deep .mat-radio-inner-circle{
      height: 10px;
      width: 10px;
    }
    :Host ::ng-deep .mat-radio-button .mat-radio-ripple{
      height: 20px; /*double of your required circle radius*/
      width: 20px;  /*double of your required circle radius*/
      left: calc(50% - 10px); /*'10px'-same as your required circle radius*/
      top: calc(50% - 10px); /*'10px'-same as your required circle radius*/
    }

Sans utiliser ::ng-deep

Désactivez l'encapsulation de votre composant à l'intérieur duquel vous utilisez la radio personnalisée.

Vous pouvez le faire en

import {Component,ViewEncapsulation} from '@angular/core';
@Component({
  selector: 'example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  encapsulation : ViewEncapsulation.None,
})
export class ExampleComponent {}

Enveloppez le composant que vous souhaitez styliser dans une classe personnalisée. Cela n'affectera donc aucun autre composant radio. Dans la question ci-dessus, c'est déjà enveloppé avec la classe smallRadio

.smallRadio .mat-radio-container{
    height: 10px;
    width: 10px;
}
.smallRadio .mat-radio-outer-circle{
    height: 10px;
    width: 10px;
}
.smallRadio .mat-radio-inner-circle{
    height: 10px;
    width: 10px;
}
.smallRadio .mat-radio-button .mat-radio-ripple{
    height: 20px; 
    width: 20px; 
    left: calc(50% - 10px); 
    top: calc(50% - 10px); 
}

Vous pouvez ajouter ces CSS dans la feuille de style globale sans désactiver l'encapsulation de la vue. Mais la méthode la plus élégante est celle ci-dessus

8
Akhi Akl

Veuillez ne pas utiliser ViewEncapsulation.None dans votre projet. À l'avenir, cela conduira à un comportement imprévisible. Lorsque vous modifiez des styles à l'intérieur d'un composant, certains autres composants peuvent également être modifiés et il sera difficile de trouver lesquels.

Si vous souhaitez remplacer les styles de angular angulaire, je suggère de créer un * .scss distinct dans votre projet avec le nom comme "material-overrides.scss" où vous placerez toutes les modifications de style pour différents composants. Par exemple, votre fichier peut ressembler à ceci

example-component {
    .smallRadio .mat-radio-container{
      height: 10px !important;
      width: 10px !important;
    }
    .smallRadio .mat-radio-outer-circle{
        height: 10px !important;
        width: 10px !important;
    }
    .smallRadio .mat-radio-inner-circle{
        height: 10px !important;
        width: 10px !important;
    }
    .smallRadio .mat-radio-button .mat-radio-ripple{
        height: 20px !important; 
        width: 20px !important; 
        left: calc(50% - 10px) !important; 
        top: calc(50% - 10px) !important; 
    }
}

Veuillez faire attention à !important dans mon exemple. Ce n'est pas non plus une bonne pratique. Vous devez le remplacer par une spécificité plus précise MDN web docs .

N'oubliez pas non plus d'ajouter votre _ material-overrides.scss fichier vers styles.scss comme ça:

@import './material-overrides.scss';

Vous pouvez également lire les recommandations pour les remplacements de angular équipe matérielle - lien .

1
Sergey_T