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

5분

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

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

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

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

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

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 형식을 사용하여 보드 구성 요소에 전달된 값이 실제 색인지 확인합니다.
@using Board.razor 파일의 맨 위에 지시문을 추가하여 네임스페이스의 콘텐츠를 System.Drawing 사용하고 있음을 나타냅니다.
```
@using System.Drawing
```

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

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

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

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

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

보드가 멋지지 않나요?

Screenshot of showing end of game.

계속

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

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

피드백