Ćwiczenie — dostosowywanie przy użyciu parametrów

Gra działa, ale może nie lubisz naszych domyślnych kolorów. W środowisku Blazor możemy zdefiniować parametry dla naszych składników, które umożliwiają nam przekazywanie wartości, które wyglądają jak atrybuty w tagu HTML.

W tym ćwiczeniu koncentrujemy się na dostosowywaniu i ulepszaniu gry przy użyciu parametrów.

Dostosowywanie tablicy przy użyciu parametrów

Dodajmy kilka parametrów dla kolorów na planszy i przekażmy kolory w stylu groovy ze strony Home.

Parametry w Blazor są właściwościami składnika, które zostały opatrzone atrybutem Parameter.

1. W pliku Board.razor zdefiniujmy trzy właściwości koloru tablicy i kolor każdego zawodnika. Przed metodą OnInitialized dodaj następujące wiersze kodu:

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

   Używamy typu Color, aby upewnić się, że wartości przekazane do naszego składnika Tablica są w rzeczywistości kolorami.

2. Dodaj dyrektywę @using na początku pliku Board.razor , aby wskazać, że używamy zawartości z System.Drawing przestrzeni nazw.

   @using System.Drawing
   

3. Użyj parametrów w bloku CSS w górnej części pliku Board.razor , aby ustawić wartości zmiennych CSS.

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

   Ta zmiana nie powinna nic zmienić w wyglądzie naszej planszy gry.

4. Wróćmy do Home.razor i dodajmy kilka parametrów do naszego Board tagu, a potem zobaczmy, jak to zmienia sytuację.

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

   Czy to nie jest fajna tablica?