Ćwiczenie — dostosowywanie przy użyciu parametrów

Ukończone

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 kolorów na tablicy i przekażemy niektóre kolory groovy ze Home strony.

Parametry w blazor są właściwościami składnika, który został ozdobiony atrybutem Parameter .

1. W pliku Board.razor zdefiniujmy trzy właściwości koloru tablicy i kolor każdego zawodnika. OnInitialized Przed metodą 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 Color typu , aby upewnić się, że wartości przekazane do naszego składnika Tablica są kolorami faktów.

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 strony Home.razor i dodajmy kilka parametrów do naszego Board tagu i zobaczmy, jak zmieniają grę

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

   Czy to nie jest fajna tablica?