• Accueil
  • Info
  • Publicité
  • Privacy & Policy
  • Nous Contacter
No Result
View All Result
Technique de pointe
  • Actualité
  • Technologies
  • Jeu vidéo
  • Mobile
  • Astuces
  • HTML5 / CSS
  • Java Script
  • PHP
  • Article Sponsorisé
  • Astuces
  • Jeu vidéo
  • Nous Contacter
MYCAMER
  • Actualité
  • Mobile
  • Jeu vidéo
    Chefs d’orchestre avec contrôleurs : la classe musicale unique d’OSU |  Divertissement

    Chefs d’orchestre avec contrôleurs : la classe musicale unique d’OSU | Divertissement

    Bande-annonce pour le nouveau jeu vidéo “The Walking Dead”

    Bande-annonce pour le nouveau jeu vidéo “The Walking Dead”

    La mort des consoles de jeux vidéo mettra à l’écart Sony et Nintendo

    La mort des consoles de jeux vidéo mettra à l’écart Sony et Nintendo

    Sony craint que Microsoft, propriétaire de Call of Duty, ne crée un monopole

    Sony craint que Microsoft, propriétaire de Call of Duty, ne crée un monopole

    10 batailles de boss de jeux vidéo les plus bizarres

    10 batailles de boss de jeux vidéo les plus bizarres

    Un jeu vidéo centré sur les chats aide les compagnons errants de la Nebraska Humane Society |

    Un jeu vidéo centré sur les chats aide les compagnons errants de la Nebraska Humane Society |

    10 meilleurs méchants du jeu vidéo Star Wars de tous les temps

    10 meilleurs méchants du jeu vidéo Star Wars de tous les temps

    Microsoft Xbox, Sony PlayStation, Nintendo : tour d’horizon des revenus des jeux vidéo

    Microsoft Xbox, Sony PlayStation, Nintendo : tour d’horizon des revenus des jeux vidéo

    10 meilleurs mondes de hub de jeux vidéo

    10 meilleurs mondes de hub de jeux vidéo

  • Developpement web
    • All
    • Language HTML5
    Conversion d’un objet JavaScript en chaîne

    Conversion d’un objet JavaScript en chaîne

    Emploi 29 août 2021

    EMPLOI (14-08-2022) – Jammu Cachemire Dernières Nouvelles | Tourisme

    Comment héberger un site Web gratuitement à partir de votre PC ou ordinateur portable

    Comment héberger un site Web gratuitement à partir de votre PC ou ordinateur portable

    Le football CSS se prépare pour la deuxième saison du MIAC

    Le football CSS se prépare pour la deuxième saison du MIAC

    Iron Tiger compromet l’application de chat Mimi et cible les utilisateurs Windows, Mac et Linux

    Iron Tiger compromet l’application de chat Mimi et cible les utilisateurs Windows, Mac et Linux

    Apple publie Safari Technology Preview 143 avec des corrections de bogues et des améliorations de performances

    Apple publie Safari Technology Preview 151 avec des corrections de bugs et des améliorations de performances

    Obtention d’une subvention pour l’entreprise de carburant à l’hydrogène de Deeside

    Obtention d’une subvention pour l’entreprise de carburant à l’hydrogène de Deeside

    Comment réparer vos widgets lorsqu’ils ne fonctionnent pas sous Windows 11

    Comment réparer vos widgets lorsqu’ils ne fonctionnent pas sous Windows 11

    Pondichéry CM Rangasamy fait appel au Premier ministre Modi et cherche un crore de Rs 2k pour présenter son budget – The New Indian Express

    Pondichéry CM Rangasamy fait appel au Premier ministre Modi et cherche un crore de Rs 2k pour présenter son budget – The New Indian Express

  • Astuces
    6 meilleurs plugins de révision WordPress pour 2022

    6 meilleurs plugins de révision WordPress pour 2022

    Session Replay amélioré pour les applications déployées en continu: capture de fichiers CSS

    This was H1 2022: Part 2 – Cyber War

    How to Add Schema Markup to Your WordPress Website?

    How to Add Schema Markup to Your WordPress Website?

    8 façons de mettre fin à la mentalité de silo et d’augmenter l’agilité de l’entreprise

    8 façons de mettre fin à la mentalité de silo et d’augmenter l’agilité de l’entreprise

    Pèlerinage artistique |  Avis du demandeur

    Pèlerinage artistique | Avis du demandeur

    Gutenberg 13.8 présente la prise en charge de la typographie fluide et le bloc de citation remanié – WP Tavern

    Gutenberg 13.8 présente la prise en charge de la typographie fluide et le bloc de citation remanié – WP Tavern

    Comment installer le serveur Web Apache sous Linux étape par étape

    Comment installer le serveur Web Apache sous Linux étape par étape

    Examen de la fureur du Forex 2022 • Benzinga

    Examen de la fureur du Forex 2022 • Benzinga

    Les contributeurs de l’équipe des thèmes WordPress obtiennent un retour sur la proposition d’amélioration de la visibilité des thèmes de blocs dans l’annuaire – WP Tavern

    Les contributeurs de l’équipe des thèmes WordPress obtiennent un retour sur la proposition d’amélioration de la visibilité des thèmes de blocs dans l’annuaire – WP Tavern

  • Nous contacter
No Result
View All Result
MYCAMER
No Result
View All Result
Home Developpement web Language HTML5

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

Caleb by Caleb
septembre 20, 2021
in Language HTML5
0 0
0
Liaison de styles CSS à des événements dans des applications angulaires
336
SHARES
2k
VIEWS
Share on FacebookShare on TwitterRedditLinkedin


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 :

CSS et tutoriel angulaire

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 :

Tutoriel de survol CSS

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

Couleur de bordure CSS

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

Get real time update about this post categories directly on your device, subscribe now.

Unsubscribe
Caleb

Caleb

Stay Connected

  • 86.7k Followers
  • 172k Subscribers

Articles populaires

  • 10 problèmes courants de l’iPhone 13 et comment les résoudre

    10 problèmes courants de l’iPhone 13 et comment les résoudre

    4490 shares
    Share 1796 Tweet 1123
  • Comment installer phpMyAdmin sur Debian 11 Bullseye (Apache)

    1181 shares
    Share 472 Tweet 295
  • Le procès dit que le jeu d’arcade Key Master de Sega est intentionnellement truqué

    423 shares
    Share 169 Tweet 106
  • Étapes pour installer MySQL sur Ubuntu 22.04 LTS Jammy Linux

    381 shares
    Share 152 Tweet 95
  • Comment réparer “Impossible de charger l’image. Appuyez pour réessayer “Erreur Instagram

    346 shares
    Share 138 Tweet 87

Follow Our Page

Follow Us

    Go to the Customizer > JNews : Social, Like & View > Instagram Feed Setting, to connect your Instagram account.
Facebook Twitter Youtube Vimeo Instagram

We bring you the best Premium WordPress Themes that perfect for news, magazine, personal blog, etc. Check our landing page for details.

Category

  • Actualité
  • Article Sponsorisé
  • Astuces
  • Featured
  • Jeu vidéo
  • Language HTML5
  • Mobile
  • portrait
  • Technologies
  • Uncategorized

Recent News

Twitter en panne pour des milliers d’utilisateurs : Downdetector

Twitter en panne pour des milliers d’utilisateurs : Downdetector

août 15, 2022
Conversion d’un objet JavaScript en chaîne

Conversion d’un objet JavaScript en chaîne

août 15, 2022

© 2022 JNews - Premium WordPress news & magazine theme by Jegtheme.

No Result
View All Result
  • Actualité
  • Mobile
  • Jeu vidéo
  • Developpement web
  • Astuces
  • Nous contacter

© 2022 JNews - Premium WordPress news & magazine theme by Jegtheme.

Welcome Back!

Sign In with Facebook
Sign In with Google
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
fr French
ar Arabiczh-CN Chinese (Simplified)en Englishfr Frenchde Germanit Italianru Russianes Spanish

Add New Playlist

This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.