练习 - 使用参数进行自定义

5 分钟

游戏可以正常运行，但是你可能不喜欢默认的颜色。在 Blazor 中，我们可以在组件上定义参数，以便传入类似于 HTML 标记上的属性的值。

在本练习中，我们将重点介绍如何通过使用参数来进行自定义以及优化游戏的外观。

使用参数自定义棋盘

我们来添加一些有关棋盘颜色的参数，并从 Home 页面传入一些 Groovy 颜色。

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 类型来确保传递给 Board 组件的值真的代表颜色。

将 @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.

练习 - 使用参数进行自定义

使用参数自定义棋盘

反馈