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

Pojďme přidat některé parametry pro barvy na panelu a předat některé groovy 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");
   

   Tento typ používáme Color k zajištění, že hodnoty předané komponentě Panel jsou barvy faktů.

2. Na začátek souboru Board.razor přidejte direktivu@using, 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 v našem herním panelu nic měnit.

4. Pojďme se vrátit na Home.razor a přidat nějaké parametry do naší Board značky a podívat se, jak mění hru.

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

   Není to skvělý pohled na desku?