MubBlazor 사용하기

MudBlazor 를 사용하기 위해 초기 셋팅하는 방법을 알아봅니다.

1. 'MudBlazor' Nuget 설치

2. Programs.cs 코드 추가

builder.Services.AddMudServices();

3. App.razor 에 css, js 추가

css 추가

    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />

js 추가

    <script src="_content/MudBlazor/MudBlazor.min.js"></script>

전체 App.razor 코드

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]" />
    <link rel="stylesheet" href="@Assets["app.css"]" />
    <link rel="stylesheet" href="@Assets["MudBlazorSample.styles.css"]" />
    <ImportMap />
    <link rel="icon" type="image/png" href="favicon.png" />

    @* 추가 *@
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />

    @* @rendermode="InteractiveServer" 로 설정 *@
    <HeadOutlet @rendermode="InteractiveServer" />
</head>

<body>
    @* @rendermode="InteractiveServer" 로 설정 *@
    <Routes @rendermode="InteractiveServer" />
    <script src="_framework/blazor.web.js"></script>

    @* 추가 *@
    <script src="_content/MudBlazor/MudBlazor.min.js"></script>
</body>

</html>

* HeadOutlet, Routes 는 가상화를 이용할 경우 InteractiveServer 로 설정해야합니다.

4. _Imports.razor 에 Global using 추가

@using MudBlazor

5. Home.razor 코딩

@page "/"

<PageTitle>Home</PageTitle>

<MudText Typo="Typo.h3" GutterBottom="true">Hello, world!</MudText>
<MudText Class="mb-8">Welcome to your new app</MudText>

<MudAlert Severity="Severity.Normal">
    You can find documentation and examples on our website here:
    <MudLink Href="https://mudblazor.com" Target="_blank" Typo="Typo.body2" Color="Color.Primary">
        <b>www.mudblazor.com</b>
    </MudLink>
</MudAlert>

6. Layout 수정

MainLayout.razor

@inherits LayoutComponentBase

@* 추가 *@
<MudThemeProvider IsDarkMode="_isDarkMode" />
<MudPopoverProvider />
<MudDialogProvider />
<MudSnackbarProvider />

<MudLayout>
    <MudAppBar Elevation="1">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
        <MudText Typo="Typo.h5" Class="ml-3">MudBlazor Application</MudText>
        <MudSpacer />
        <MudIconButton Icon="@(DarkLightModeButtonIcon)" Color="Color.Inherit" OnClick="@DarkModeToggle" />
        <MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End" />
    </MudAppBar>
    <MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Always" Elevation="2">
        <NavMenu />
    </MudDrawer>
    <MudMainContent Class="mt-16 pa-4">
        @Body
    </MudMainContent>
</MudLayout>

<div id="blazor-error-ui" data-nosnippet>
    An unhandled error has occurred.
    <a href="." class="reload">Reload</a>
    <span class="dismiss">🗙</span>
</div>

@code {
    private bool _drawerOpen = true;
    private bool _isDarkMode = false;

    public string DarkLightModeButtonIcon => _isDarkMode switch
    {
        true => Icons.Material.Rounded.AutoMode,
        false => Icons.Material.Outlined.DarkMode,
    };

    private void DarkModeToggle()
    {
        _isDarkMode = !_isDarkMode;
    }

    private void DrawerToggle()
    {
        _drawerOpen = !_drawerOpen;
    }
}

NavMenu.razor

@* MudNavMenu 사용 *@
<MudNavMenu>
    <MudNavLink Href="" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Home">Home</MudNavLink>
    <MudNavLink Href="counter" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Add">Counter</MudNavLink>
    <MudNavLink Href="weather" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.List">Weather</MudNavLink>
</MudNavMenu>

7. 결과

소스

https://github.com/kei-soft/FluentMudBlazorTest/tree/master/MudBlazorSample

FluentMudBlazorTest/MudBlazorSample at master · kei-soft/FluentMudBlazorTest

Contribute to kei-soft/FluentMudBlazorTest development by creating an account on GitHub.

github.com

저작자표시 비영리 변경금지

'코딩 > Blazor' 카테고리의 다른 글

MudBlazor 가상화 처리 (0)	2025.01.12
Blazor .NET9 에서 CSP 설정 (0)	2025.01.04
Blazor에서 MonacoEitor 사용하기 (0)	2024.11.16
Blazor Serilog 에서 HTTP 로깅 제외하기 (0)	2024.10.30
쿠버네티스 환경의 Blazor 애플리케이션에서 Client 실제 IP 남기는 방법 (0)	2024.10.29