연습 - 매개 변수를 사용하여 사용자 지정

완료됨

이 게임은 작동하지만, 어쩌면 당신은 우리의 기본 색상을 좋아하지 않는다. Blazor에서는 HTML 태그의 특성과 같은 값을 전달할 수 있는 구성 요소의 매개 변수를 정의할 수 있습니다.

이 연습에서는 매개 변수를 사용하여 사용자 지정하고 게임을 보기 좋게 만드는 데 집중합니다.

매개 변수를 사용하여 보드 사용자 지정

보드의 색에 대한 몇 가지 매개 변수를 추가하고 페이지에서 일부 그루비 색을 Home 전달해 보겠습니다.

Blazor의 매개 변수는 특성으로 데코레이팅된 구성 요소의 Parameter 속성입니다.

1. Board.razor에서 보드 색과 각 플레이어의 색에 대한 세 가지 속성을 정의해 보겠습니다. 메서드 앞에 OnInitialized 다음 코드 줄을 추가합니다.

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

   Color 형식을 사용하여 보드 구성 요소에 전달된 값이 실제 색인지 확인합니다.

2. @using Board.razor 파일의 맨 위에 지시문을 추가하여 네임스페이스의 콘텐츠를 System.Drawing 사용하고 있음을 나타냅니다.

   @using System.Drawing
   

3. Board.razor 맨 위에 있는 CSS 블록의 매개 변수를 사용하여 CSS 변수의 값을 설정합니다.

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

   이 변경 사항으로 게임 보드의 모양이 아무것도 바뀌지 않았어야합니다.

4. Home.razor로 돌아가서 태그에 몇 가지 매개 변수를 Board 추가하고 게임을 변경하는 방법을 알아보겠습니다.

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

   보드가 멋지지 않나요?

   

계속