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

Concluído

O jogo funciona, mas talvez você não goste das 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, focamo-nos na personalização e em melhorar o aspeto do jogo utilizando parâmetros.

Personalização do quadro com parâmetros

Vamos adicionar alguns parâmetros para as cores no tabuleiro e incluir algumas cores estilosas da página Home.

Parâmetros em 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 nosso componente Board sejam realmente cores.

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

   @using System.Drawing
   

3. Utilize os parâmetros no bloco CSS na parte superior de 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>
   

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

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

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

   Não é uma prancha que parece fixe?