Liaison de styles CSS à des événements dans des applications angulaires

Angular vous permet de définir de manière conditionnelle à la fois les classes et les styles via les directives ngClass et ngStyle respectivement. Dans l’ensemble, ceux-ci fonctionnent très bien. Cependant, il existe des cas où ils ne peuvent pas être utilisés, par exemple pour :

le style dynamique des éléments à l’aide de variables TypeScript qui ne sont pas connues avant l’exécution, ou
l’attribution de styles à des pseudo-classes telles que focus et hover.

Les techniques seront démontrées en utilisant une application qui transmet les couleurs du thème à un composant via @Saisir paramètres. Ceux-ci seront utilisés pour définir le Contexte, flotter, et se concentrer couleurs de bordure.

L’application de démonstration

Voici une capture d’écran de l’application de démonstration qui montre les trois couleurs qui peuvent être définies dynamiquement via les champs de saisie :

Chaque couleur est indiquée dans un carré au-dessus du formulaire pour référence. Sous le formulaire, vous trouverez un SVG du célèbre logo Twitter. Nous pouvons voir la couleur de survol sélectionnée lorsque le curseur est placé sur l’image :

La tabulation sur l’image change la bordure à la couleur de la couleur de bordure de mise au point sélectionnée :

Des trois couleurs, seul l’arrière-plan peut être défini à l’aide d’une directive Angular ; les deux autres nécessitent une solution différente, comme celles ci-dessous.

Technique #1 : Variables CSS

Peut-être connaissez-vous les variables Less et Sass qui sont compilées en CSS pur avant utilisation. Maintenant, il existe des variables CSS « pures ». Celles-ci sont définies en préfixant un double tiret (–) avant le nom de la variable. Ensuite, pour accéder à la valeur d’une variable CSS, nous la passerions au var() fonction. Notre application déclare trois de ces variables – une pour chaque définition de couleur :

Ceux-ci sont utilisés pour définir les trois carrés de prévisualisation dans le AppComponent.

$backgroundColor: var(--background-color);
$hoverColor: var(--hover-color);
$focusBorderColor: var(--focus-border-color);

Ces variables sont appliquées aux règles CSS comme suit :

.background {
  background-color: $backgroundColor;
}

.hover-background {
  background-color: $hoverColor;
}

.focus-border-background {
  background-color: $focusBorderColor;
}

Si la var() la fonction semble familière, c’est par conception. Il est nommé d’après le mot-clé de déclaration de variable JavaScript (JS). C’est parce que nous pouvons référencer (et modifier !) des variables CSS à partir de notre code JS, ou, dans le cas des applications Angular, dans le TypeScript .ts fichiers de composants. Voici la fonction qui affecte trois variables JS aux variables CSS ci-dessus que nous avons déclarées précédemment :

public setColors(background: string, hover: string, focus: string) {
  const docStyle = document.documentElement.style;
  docStyle.setProperty('--background-color', background);
  docStyle.setProperty('--hover-color', hover);
  docStyle.setProperty('--focus-border-color', focus);
}

Les setCouleurs() fonction est liée à l’événement click du APPLIQUER bouton. Chaque champ de saisie ngModèle variable est transmise en tant que paramètre de fonction :

<div class="content">
  <input type="text" [(ngModel)]="backgroundColor"> 
</div>
<div class="content">
  <input type="text" [(ngModel)]="hoverColor">
</div>
<div class="content">
  <input type="text" [(ngModel)]="focusBorderColor"> 
</div>

<button class="apply-button" (click)="setColors(backgroundColor, hoverColor, focusBorderColor)">
    APPLY  
</button>

Bien que ne faisant pas partie de la démo, il convient de noter que les variables CSS sont également applicables aux pseudo-classes puisque la feuille de style a accès aux variables :

.news-image: hover {
  background-color: $hoverColor;
}

Technique n°2 : définir des styles par programmation

Tous les éléments HTML exposent une propriété de style, ce qui nous permet de définir à peu près n’importe quel style directement, sans aucune référence à la feuille de style. Dans le composant de flux, il existe deux méthodes similaires pour définir les styles d’éléments SVG : une pour la couleur d’arrière-plan et une autre pour la bordure de focus :

public setHoverColor(event: MouseEvent) {
  const newsImage: HTMLDivElement = <HTMLDivElement>event.target;

  if (event.type === 'mouseenter') {
    newsImage.style.backgroundColor = this.hoverBackgroundColor;
  } else if (event.type === 'mouseleave') {
    newsImage.style.backgroundColor = this.backgroundColor;
  }
}

public setFocusStyle(event: FocusEvent) {
  const newsImage: HTMLDivElement = <HTMLDivElement>event.target;

  if (event.type === 'focus') {
    newsImage.style.outline = "2px solid " + this.focusBorderColor;
  } else if (event.type === 'blur') {
    newsImage.style.outline = "none";
  }
}

Les variables membres de la classe ci-dessus peuvent être définies via @Saisir paramètres; sinon, ils conservent leurs valeurs par défaut :

export class FeedComponent {
  @Input('background-color') 
  backgroundColor: string = 'rgb(82, 172, 240)';
  @Input('hover-background-color') 
  hoverBackgroundColor="cyan";
  @Input('focus-border-color') 
  focusBorderColor="#CCCCCC";
  
}

Chaque type d’événement vérifie dans les deux fonctions correspond à un événement lié sur l’élément news-image. Dans tous les cas, le $event est passé à la fonction afin d’obtenir le type et la cible de l’événement :

<div 
  tabindex="0"
  class="news-image"
  style="background-position: center; background-size: cover"
  [style.backgroundColor]="backgroundColor"
  (mouseenter)="setHoverColor($event)"
  (mouseleave)="setHoverColor($event)"
  (focus)="setFocusStyle($event)"
  (blur)="setFocusStyle($event)"
>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 720.18 585.15"
    style="padding: 0.5rem"
  >
  // ...
  </svg>

Passer des couleurs au composant de flux

Afin de déclencher des mises à jour de couleur sur l’événement de clic du bouton APPLY (par opposition à immédiatement), trois variables supplémentaires sont utilisées. Celles-ci sont définies en même temps que les variables CSS dans setCouleurs():

backgroundColorInput: string = 'rgb(82, 172, 240)';
hoverColorInput: string = 'blue';
focusBorderColorInput: string = 'darkgray';
  
public setColors(background: string, hover: string, focus: string) {
  const docStyle = document.documentElement.style;
  docStyle.setProperty('--background-color', background);
  this.backgroundColorInput = background;
  docStyle.setProperty('--hover-color', hover);
  this.hoverColorInput = hover;
  docStyle.setProperty('--focus-border-color', focus);
  this.focusBorderColorInput = focus;
}

De cette façon, les variables d’entrée du composant de flux sont liées aux nouvelles variables et non à celles des champs de texte’ ngModèles:

<feed-component 
  [background-color]="backgroundColorInput"
  [hover-background-color]="hoverColorInput"
  [focus-border-color]="focusBorderColorInput"
>
</feed-component>

N’oubliez pas de consulter la démo sur stackblitz.

Lisez plus de tutoriels CSS et de conception Web.

Conclusion

Dans ce didacticiel, nous avons appris deux techniques pour styliser dynamiquement des éléments où le ngClass et ngStyle les directives ne fonctionneront pas. Dans le prochain article, nous apprendrons comment appliquer des variables CSS à des éléments spécifiques.

— to www.htmlgoodies.com