@dimohy 님께서 소개해주신 바 있는 MudBlazor의 Manual 설치 팁입니다.
사실 Template을 통해 프로젝트를 생성하면 간단하게 사용할 수 있지만 템플릿은 Individual 모드를 제공하지 않기 때문에 이를 사용하기 위해서는 직접 프로젝트를 생성한 다음 Manual 설치가 필요합니다.
공식 홈페이지에서 Manual 설치 방법에 대해 자세하게 설명되어 있지만 요약하면 다음과 같습니다.
1. Nuget 설치
터미널에서 dotnet add package MudBlazor 명령어 실행 또는 누겟 패키지 관리자 GUI에서 MudBlazor 항목을 설치합니다.
2. Using 추가
_Import.razor 파일에서 아래 using을 추가합니다. 이 구문을 통해 모든 MudBlazor 컨트롤을 글로벌 전역에서 사용할 수 있게 됩니다.
@using MudBlazor
3. Style 연결
MudBlazor 관련 CSS 스타일 연결정보를 메인 HTML에 추가합니다. 파일 위치는 일반적으로 index.html header 안에 포함하면 됩니다.
<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" />
4. Script 추가
MudBlazor 스크립트는 index.html에서 마지막 스크립트 뒤에 위치하도록 합니다.
23번째 줄 스크립트 아래에 위치합니다.
<script src="_content/MudBlazor/MudBlazor.min.js"></script>
5. 기존 CSS 제거
기존 Blazor에 적용되어 있는 Bootstrap을 포함한 기본 css 스타일을 제거하여 MudBlazor 스타일이 제대로 동작할 수 있도록 해야 합니다. 그래서 wwwroot 안에 있는 css 폴더를 포함한 모든 디자인 요소를 삭제합니다.
6. Service 추가
서비스를 등록하여 MudBlazor를 활성화 합니다.
builder.Services.AddMudServices();
7. 필수 컴포넌트 추가
MudBlazor가 모든 페이지에서 잘 동작할 수 있도록 필수 컴포넌트들을 글로벌 영역에서 추가하도록 합니다. MainLayout.razor
<MudThemeProvider/>
<MudDialogProvider/>
<MudSnackbarProvider/>
8. MudBlazor 템플릿 디자인 추가
마지막으로 템플릿에서 제공하는 레이아웃 디자인을 추가합니다.
- MainLayout.razor 파일 내용 대체
@inherits LayoutComponentBase
<MudThemeProvider />
<MudDialogProvider />
<MudSnackbarProvider />
<MudLayout>
<MudAppBar Elevation="0">
<MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
<MudSpacer />
<LoginDisplay />
<MudIconButton Icon="@Icons.Custom.Brands.MudBlazor" Color="Color.Inherit" Link="https://mudblazor.com/" Target="_blank" />
<MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Link="https://github.com/MudBlazor/MudBlazor/" Target="_blank" />
</MudAppBar>
<MudDrawer @bind-Open="_drawerOpen" Elevation="1">
<MudDrawerHeader>
<MudText Typo="Typo.h6">Jamesweb</MudText>
</MudDrawerHeader>
<NavMenu />
</MudDrawer>
<MudMainContent>
<MudContainer MaxWidth="MaxWidth.Large" Class="my-16 pt-16">
@Body
</MudContainer>
</MudMainContent>
</MudLayout>
@code {
bool _drawerOpen = true;
void DrawerToggle()
{
_drawerOpen = !_drawerOpen;
}
}
- NavMenu.razor 파일 내용 대체
<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="fetchdata" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.List">Fetch data</MudNavLink>
</MudNavMenu>
이제 다 되었으니 실행 결과를 확인해보도록 하겠습니다.
데스크탑 사이즈 모드
모바일 사이즈 모드
이것으로 MudBlazor 기본 템플릿이 잘 적용된 것 까지 잘 확인했습니다.
그리고 오랜만에 MudBlazor 사이트가 필요해서 이것 저것 해보게 되었는데 뭔가 또 많이 좋아진 느낌이네요.
(로고가 바뀜ㅎ)
제가 준비한 내용은 여기까지 입니다.
읽어주셔서 감사합니다.
