演習 - パラメーターを使用したカスタマイズ - Training

5 分

ゲームは動きますが、既定の色があなたの好みでない場合があります。 Blazor では、HTML タグの属性のように見える値を渡すことができるパラメーターをコンポーネントに定義できます。

この演習では、カスタマイズに焦点を当て、パラメーターを使用してゲームの外観を改善します。

パラメーターを使用したボードのカスタマイズ

ボードの色用にパラメータをいくつか追加し、Home ページからグルーヴィな色をいくつか渡してみましょう。

Blazor のパラメータは、Parameter 属性で修飾されたコンポーネントのプロパティです。

Board.razor で、ボード用の色と各プレーヤー用の色の 3 つのプロパティを定義してみましょう。 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 型を使用して、Board コンポーネントに渡される値が実際に色であるようにします。
Board.razor ファイルの先頭に@using ディレクティブを追加し、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" />
```
クールなボードではないですか?

続行

演習 - パラメーターを使用したカスタマイズ

パラメーターを使用したボードのカスタマイズ

フィードバック