web-dev-qa-db-fra.com

Comment définir la couleur des boutons à bascule

J'ai un groupe de boutons à bascule. Ils sont très légers et disparaissent à l’arrière-plan sur des moniteurs de mauvaise qualité avec un niveau de luminosité élevé.

 enter image description here

Comment puis-je les coiffer correctement? Je préférerais leur attribuer les couleurs accent ou primaire, comme vous pouvez le faire pour les boutons normaux.

Dans certains cas, les couleurs primaires et d'accent sont sombres. Donc, le texte doit devenir blanc (avec une certaine transparence). Pour les boutons normaux, cela fonctionne automatiquement.

<div class="output-size">
  <mat-button-toggle-group>
    <mat-button-toggle value="letter">Letter</mat-button-toggle>
    <mat-button-toggle value="legal">Legal</mat-button-toggle>
    <mat-button-toggle value="a4">A4</mat-button-toggle>
    <mat-button-toggle value="a5">A5</mat-button-toggle>
  </mat-button-toggle-group>
</div>
angularangular-materialangular5
14
Codo

matButtonToggle ne supporte pas la propriété color comme matButton.

Vous pouvez utiliser les classes css .mat-button-toggle et .mat-button-toggle-checked pour styliser les différents états.

Avec la thématique des matériaux, vous pouvez extraire du thème la palette dont vous avez besoin et appliquer la couleur de contraste par défaut de l'arrière-plan à la couleur du texte pour obtenir un contraste optimal avec des couleurs claires ou sombres.

Voici un Stackblitz avec votre exemple mat-button-toggle-group: Stackblitz angular-t1k1x6

Theming utilisé:

@import '~@angular/material/theming';

@include mat-core();

$app-primary: mat-palette($mat-Indigo);
$app-accent:  mat-palette($mat-pink, A200, A100, A400);

$app-theme: mat-light-theme($app-primary, $app-accent);

@mixin mix-app-theme($app-theme) {
  $primary: map-get($app-theme, primary);
  $accent: map-get($app-theme, accent);

  .mat-button-toggle {
    background-color: mat-color($primary);
    color: mat-color($primary, default-contrast);
  }

  .mat-button-toggle-checked {
    background-color: mat-color($accent);
    color: mat-color($accent, default-contrast);
  }
}

// Include the mixin
@include mix-app-theme($app-theme);

Documents: Theming votre application de matériau angulaire

29
Sashel Niles Gruber

Personnaliser la présentation en utilisant votre propre thème SASS, comme l’indique l’autre réponse, est une excellente solution à court terme et vous donne beaucoup de pouvoir sur la présentation. Idéalement, cela ferait partie des déclarations de thème principales, de sorte que <mat-button-toggle-group color="primary"> (peut-être aussi aussi <mat-button-toggle color="primary">) fonctionne sans étapes supplémentaires.

Si vous voulez simplifier cela à l’avenir, félicitez ce problème .

3
Coderer

Une solution de contournement peut être quelque chose comme:

<mat-button-toggle-group>
  <mat-button-toggle value="letter">
    <button mat-button color="primary" style="pointer-events:none;">
      Letter
    </button>
  </mat-button-toggle>
  <mat-button-toggle value="legal">
    <button mat-button color="accent" style="pointer-events:none;">
      Legal
    </button>
  </mat-button-toggle>
</mat-button-toggle-group>
0
Sergiu Starciuc