Exercice - Personnalisation à l’aide de paramètres

Le jeu fonctionne, mais peut-être que vous n’aimez pas nos couleurs par défaut. Dans Blazor, nous pouvons définir des paramètres sur nos composants qui nous permettent de transmettre des valeurs qui ressemblent à des attributs sur une balise HTML.

Dans cet exercice, nous nous concentrons sur la personnalisation et nous allons améliorer l’apparence du jeu à l’aide de paramètres.

Personnalisation du tableau avec des paramètres

Ajoutons quelques paramètres pour les couleurs de la carte et transmettons certaines couleurs groovy à partir de la page Home.

Les paramètres dans Blazor sont des propriétés sur un composant qui ont été décorés avec l’attribut Parameter .

1. Dans Board.razor, nous allons définir trois propriétés pour la couleur du tableau et la couleur de chaque joueur. Avant la OnInitialized méthode, ajoutez ces lignes de code :

   [Parameter]
   public Color BoardColor { get; set; } = ColorTranslator.FromHtml("yellow");
   
   [Parameter]
   public Color Player1Color { get; set; } = ColorTranslator.FromHtml("red");
   
   [Parameter]
   public Color Player2Color { get; set; } = ColorTranslator.FromHtml("blue");
   

   Nous utilisons le type Color pour nous assurer que les valeurs passées à notre composant Board sont bien des couleurs.

2. Ajoutez une @using directive en haut du fichier Board.razor pour indiquer que nous faisons usage de contenu depuis l’espace de noms System.Drawing.

   @using System.Drawing
   

3. Utilisez les paramètres du bloc CSS en haut de Board.razor pour définir les valeurs des variables CSS.

   <HeadContent>
       <style>
           :root {
               --board-bg: @ColorTranslator.ToHtml(BoardColor);
               --player1: @ColorTranslator.ToHtml(Player1Color);
               --player2: @ColorTranslator.ToHtml(Player2Color);
           }
       </style>
   </HeadContent>
   

   Ce changement ne devrait pas avoir changé dans l’apparence de notre tableau de jeu.

4. Revenons à Home.razor et ajoutons des paramètres à notre Board balise et voyons comment ils changent le jeu

   <Board @rendermode="InteractiveServer"
        BoardColor="System.Drawing.Color.Black"
        Player1Color="System.Drawing.Color.Green"
        Player2Color="System.Drawing.Color.Purple" />
   

   Le plateau a l’air cool, non ?