Exercício – Personalização usando parâmetros

Concluído

O jogo funciona, mas talvez você não goste de nossas cores padrão. No Blazor, podemos definir parâmetros em nossos componentes que nos permitem passar valores que se parecem com atributos em uma tag HTML.

Neste exercício, nos concentramos na personalização e na melhor aparência do jogo usando parâmetros.

Personalizar o tabuleiro com parâmetros

Vamos adicionar alguns parâmetros para as cores no quadro e passar algumas cores interessantes da página Home.

Parâmetros no Blazor são propriedades em um componente que foram decoradas com o atributo Parameter.

1. Em Board.razor, vamos definir três propriedades para a cor do tabuleiro e a cor de cada jogador. Antes do método OnInitialized, adicione estas linhas de código:

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

   Usamos o tipo Color para garantir que os valores passados para o componente Tabuleiro sejam cores de fato.

2. Adicione uma diretiva @using à parte superior do arquivo Board.razor para indicar que estamos usando o conteúdo do namespace System.Drawing.

   @using System.Drawing
   

3. Use os parâmetros no bloco CSS na parte superior do Board.razor para definir os valores das variáveis CSS.

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

   Essa mudança não deveria ter mudado nada na aparência do nosso tabuleiro de jogos.

4. Vamos voltar para Home.razor e adicionar alguns parâmetros à nossa tag Board e ver como eles alteram o jogo

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

   Não é um tabuleiro legal?