Blazor: MudBlazor를 사용한 메인 게임 메뉴

다음은 새 게임을 만들고 기존 게임을 로드하기 위한 기본 게임 메뉴를 만들기 위해 MudBlazor 구성 요소 라이브러리를 사용하는 Blazor 개발에 대한 작은 팁입니다.

UI 메인 메뉴의 스크린샷입니다.



그리고 그 뒤의 코드는 다음과 같습니다.

<MudGrid Class="d-flex flex-wrap flex-grow-1 pa-4 gap-4 align-content-start">
    <MudCard Elevation="8" Style="width: 300px">
        <MudCardHeader>
            <CardHeaderContent>
                <MudText Typo="Typo.h6">New Game</MudText>
            </CardHeaderContent>
        </MudCardHeader>
        <MudCardContent>
            <MudPaper Style="height: 100px" Class="d-flex pa-4 justify-center" Elevation="0">
                <MudIcon Icon="@Icons.Filled.Add" Size="Size.Large" ></MudIcon>
            </MudPaper>
        </MudCardContent>
        <MudCardActions>
            <MudButton Variant="Variant.Filled" Color="Color.Primary" FullWidth="true" OnClick="HandleValidSubmit">NEW GAME</MudButton>
        </MudCardActions>
    </MudCard>
    @if (GameService.Games != null)
    {
        @foreach (var game in GameService.Games)
        {
            <MudCard Elevation="8" Style="width: 300px">
                <MudCardHeader>
                    <CardHeaderContent>
                        <MudText Typo="Typo.h6">@game.PlayerName</MudText>
                    </CardHeaderContent>
                    <CardHeaderActions>
                        <MudIconButton 
                            Icon="@Icons.Outlined.DeleteForever" 
                            Style="width: 40px; height: 40px"
                            Color="Color.Default" 
                            OnClick="() => DeleteGameAsync(game)" />
                    </CardHeaderActions>
                </MudCardHeader>
                <MudCardContent>
                    <MudPaper Style="height: 100px;" Class="d-flex align-content-space-between flex-wrap flex-grow-1 justify-end" Elevation="0">
                        <MudText Typo="Typo.body2">Play existing game in the procedurally generated world.</MudText>
                        <MudText Typo="Typo.caption">@game.CreatedAt</MudText>
                    </MudPaper>
                </MudCardContent>
                <MudCardActions>
                    <MudButton Variant="Variant.Filled" Color="Color.Primary" FullWidth="true" OnClick="() => PlayGame(game)">LOAD GAME</MudButton>
                </MudCardActions>
            </MudCard>
        }
    }
</MudGrid>

도움이 되길 바랍니다.
Blazor에 대해 자세히 알아보려면 this page을 방문하십시오.
MudBlazor 구성 요소 라이브러리에 대해 자세히 알아보려면 this page을 방문하십시오.
무언가를 묻거나 피드백을 남기고 싶다면 환상적일 것입니다. 아래에 의견을 작성하고 좋은 하루 되십시오.