Ejercicio: Personalización mediante parámetros

El juego funciona, pero quizás no te gusten nuestros colores predeterminados. En Blazor, podemos definir parámetros en nuestros componentes que nos permiten pasar valores que parecen atributos en una etiqueta HTML.

En este ejercicio, nos centramos en la personalización y hacemos que el juego se vea mejor mediante parámetros.

Personalización de la placa con parámetros

Ahora se agregarán algunos parámetros para los colores del tablero y se pasarán algunos colores llamativos desde la página Home.

Los parámetros de Blazor son propiedades de un componente que se ha decorado con el Parameter atributo .

1. En Board.razor, vamos a definir tres propiedades para el color del panel y el color de cada jugador. Antes del OnInitialized método , agregue estas líneas 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 el tipo Color para asegurarnos de que los valores pasados a nuestro componente de tablero sean colores de hecho.

2. Agregue una @using directiva a la parte superior del archivo Board.razor para indicar que estamos usando contenido del System.Drawing espacio de nombres.

   @using System.Drawing
   

3. Use los parámetros del bloque CSS en la parte superior de Board.razor para establecer los valores de las variables CSS.

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

   Este cambio no debería haber cambiado nada en la apariencia de nuestro tablero de juegos.

4. Volvamos a Home.razor y agreguemos algunos parámetros a nuestra Board etiqueta y veamos cómo cambian el juego

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

   ¿No es un tablero chulo?