Esercizio - Personalizzazione mediante parametri

• 5 minuti

Il gioco funziona, ma forse non ti piace i nostri colori predefiniti. In Blazor è possibile definire nei componenti parametri che consentono di passare valori simili agli attributi in un tag HTML.

In questo esercizio ci si concentrerà sulla personalizzazione e sul miglioramento dell'aspetto del gioco usando i parametri.

Personalizzazione del tabellone mediante parametri

Aggiungere alcuni parametri per i colori sulla scheda e passare alcuni colori groovy dalla Home pagina.

I parametri in Blazor sono proprietà di un componente decorato con l'attributo Parameter .

1. In Board.razor definiamo tre proprietà per il colore della scheda e il colore di ogni giocatore. Prima del OnInitialized metodo, aggiungere queste righe di codice:

   [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");
   

   Viene usato il tipo Color per assicurarsi che i valori passati al componente Board siano di fatto colori.

2. Aggiungere una @using direttiva all'inizio del file Board.razor per indicare che si sta usando il contenuto dello spazio dei System.Drawing nomi .

   @using System.Drawing
   

3. Usare i parametri nel blocco CSS nella parte superiore di Board.razor per impostare i valori delle variabili CSS.

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

   Questa modifica non dovrebbe aver cambiato nulla nell'aspetto del tabellone del gioco.

4. Torniamo a Home.razor e aggiungiamo alcuni parametri al tag Board e vediamo come cambiano il gioco

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

   Non è forse un tabellone dall'aspetto piacevole?