Übung: Anpassungen mithilfe von Parametern

5 Minuten

Das Spiel funktioniert zwar, aber möglicherweise gefallen Ihnen die Standardfarben nicht. In Blazor können Sie Parameter für Komponenten definieren, die es ermöglichen, Werte zu übergeben, die wie Attribute in einem HTML-Tag aussehen.

In dieser Übung konzentrieren Sie sich auf Anpassungen und darauf, wie Sie die Darstellung des Spiels mithilfe von Parametern verbessern können.

Anpassen des Spielbretts mit Parametern

Fügen Sie einige Parameter für die Farben auf dem Spielbrett hinzu, und übergeben Sie einige Farben von der Home-Seite.

Parameter in Blazor sind Eigenschaften in der Komponente, die mit dem Parameter-Attribut versehen wurden.

In Board.razor definieren Sie drei Eigenschaften für die Farbe des Spielbretts und der einzelnen Spieler. Fügen Sie vor der OnInitialized-Methode die folgenden Codezeilen hinzu:
```
[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");
```
Verwenden Sie den Color-Typ, um sicherzustellen, dass die an die Board-Komponente übergebenen Werte tatsächlich Farben sind.
Fügen Sie oben in der Board.razor-Datei eine @using-Direktive hinzu, um anzugeben, dass wir Inhalte aus dem System.Drawing-Namespace verwenden.
```
@using System.Drawing
```

Verwenden Sie die Parameter im CSS-Block oben in Board.razor, um die Werte der CSS-Variablen festzulegen.

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

Diese Änderung sollte nichts an der Darstellung des Spielbretts geändert haben.

Wechseln Sie zurück zu Home.razor und fügen Sie dem Board-Tag einige Parameter hinzu, um herauszufinden, wie diese die Darstellung des Spiels beeinflussen
```
<Board @rendermode="InteractiveServer"
     BoardColor="System.Drawing.Color.Black"
     Player1Color="System.Drawing.Color.Green"
     Player2Color="System.Drawing.Color.Purple" />
```
Sieht das Spielbrett nicht cool aus?

Übung: Anpassungen mithilfe von Parametern

Anpassen des Spielbretts mit Parametern

Feedback