Cvičení – přizpůsobení pomocí parametrů

Dokončeno

Hra funguje, ale možná nemáte rádi naše výchozí barvy. V Blazoru můžeme definovat parametry pro naše komponenty, které nám umožňují předávat hodnoty, které vypadají jako atributy značky HTML.

V tomto cvičení se zaměříme na přizpůsobení a lepší vzhled hry pomocí parametrů.

Přizpůsobení panelu s parametry

Přidejme parametry pro barvy na desce a přiřaďme jim cool barvy ze Home stránky.

Parametry v Blazoru jsou vlastnosti komponenty, které byly zdobeny atributem Parameter.

1. V panelu Board.razor definujeme tři vlastnosti pro barvu desky a barvu každého hráče. Před metodu OnInitialized přidejte tyto řádky kódu:

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

   Typ Color používáme k zajištění, aby hodnoty předané komponentě Board byly skutečně barvami.

2. Na začátek souboru @using přidejte direktivu, která indikuje, že používáme obsah z System.Drawing oboru názvů.

   @using System.Drawing
   

3. Pomocí parametrů v bloku CSS v horní části panelu Board.razor nastavte hodnoty proměnných CSS.

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

   Tato změna by neměla změnit nic na vzhledu naší herní desky.

4. Vraťme se zpět na Home.razor a přidejte některé parametry do naší značky Board a podívejme se, jak mění hru.

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

   Nevypadá ta deska skvěle?