[Blazor] With MudBlazor

[CODE_REAPER]

MudBlazor를 활용한 UI 구성 지식을 정리합니다.

편의상 MudBlazor Template로 프로젝트를 생성해서 작업합니다.

[파란매]

궁금하네요 기대

[iamjinseok]

앗, 저도 관심있습니다. ㅋㅋㅋ

[CODE_REAPER]

MudDialog

MudBlazor 문서
https://mudblazor.com/components/dialog

Source code (GitHub)
https://github.com/ChoiHM/MB-MudDialogSample

---

기본적인 사항

Global 설정

Shared>MainLayout.razor 파일을 열어서 제일 윗 부분을 봅니다.

@inherits LayoutComponentBase

<MudThemeProvider />
<MudDialogProvider /> @* <-- MudDialogProvider 인스턴스 정의 및 Global setting *@
<MudSnackbarProvider />

설정은 아래와 같이 구체적으로 할 수 있으며, Dialog 호출시 별다른 옵션을 지정해주지 않으면 Global 설정을 상속받습니다.

<MudDialogProvider
    FullWidth="true"
    MaxWidth="MaxWidth.ExtraSmall"
    CloseButton="true"
    DisableBackdropClick="true"
    NoHeader="true"
    Position="DialogPosition.Center"
    CloseOnEscapeKey="true"
/>

---

Dialog 호출

1. Dialog 입력값 리턴

이제 간단하게 테스트를 위한 버튼 2개과 Dialog 컴포넌트도 2개 만들겠습니다.
페이지는 Index.razor를 대충 수정하겠습니다. 버튼을 2개 추가하고 onclick 이벤트를 연결합니다.

• Index.razor

@page "/"
@inject IDialogService _dialogService
@using MudDialogSample.Dialog;

<PageTitle>Index</PageTitle>

<MudText Typo="Typo.h3" GutterBottom="true">Dialog테스트</MudText>

<MudStack Row="true" Class="mb-5" Spacing="1">
    <MudButton Variant="Variant.Outlined" Size="Size.Small"
               @onclick="NewFolder">새 폴더</MudButton>

    <MudButton Variant="Variant.Outlined" Size="Size.Small"
               @onclick="NewFolderAsync">새 폴더 Async</MudButton>

    <MudButton Variant="Variant.Outlined" Size="Size.Small" Color="Color.Info" StartIcon="@Icons.Material.Filled.CloudUpload"
               @onclick="Upload">업로드</MudButton>
</MudStack>

<MudText>폴더명: @NewFolderName</MudText>

@code {
    private string NewFolderName = string.Empty;

    private void NewFolder()
    {
        // 리턴값이 필요하다면 Show함수로는 받아올 수 없어요!
        var dialog = _dialogService.Show<DlgNewFolder>("새 폴더 만들기",
        new DialogOptions() { CloseOnEscapeKey = true });
        //var result = dialog.Result.Result;
    }

    private async void NewFolderAsync()
    {
        var dialog = await _dialogService.ShowAsync<DlgNewFolder>("새 폴더 만들기",
        new DialogOptions() { CloseOnEscapeKey = true });
        var result = await dialog.Result;

        if (result == null || result.Canceled) { return; }
        if (result?.Data != null)
        {
            if (string.IsNullOrWhiteSpace(result.Data.ToString()))
            {
                return;
            }
            NewFolderName = result.Data.ToString();
            StateHasChanged();
        }
    }

    private async void Upload()
    {
    }
}

ShowAsync메서드 오류 표시 해결 방법

MudTemplate을 이용해서 프로젝트를 생성하면, 구버전이 설치된 경우가 많습니다.
따라서 ShowAsync함수가 제공되지 않는 버전을 사용하면 오류가 발생하므로, 아래와 같이 업데이트 해주는 것이 좋습니다.
(저의 경우 6.0.13이 설치되어 있으며, 6.2.2로 업데이트 진행했습니다.)

프로젝트에 Dialog 폴더도 하나 생성하여 Dialog용도로 컴포넌트를 생성합니다.
'새 폴더'를 위한 항목이므로 DlgNewFolder.razor로 생성했습니다.

• DlgNewFolder.razor 소스코드

<MudDialog DefaultFocus="DefaultFocus.FirstChild">
  <DialogContent>
      <MudForm ReadOnly="false">
          <MudTextField T="string" Label="폴더명" @bind-Value="FolderName" Immediate="true" 
OnKeyDown="keydown"></MudTextField>
      </MudForm>
  </DialogContent>
  <DialogActions>
      <MudButton Color="Color.Primary" ButtonType="ButtonType.Submit"
OnClick="Submit">생성</MudButton>
      <MudButton OnClick="Cancel">취소</MudButton>
  </DialogActions>
</MudDialog>

@code {
    [CascadingParameter] MudDialogInstance MudDialog { get; set; }
    [Parameter]
    public string FolderName { get; set; }

    void Submit() => MudDialog.Close(DialogResult.Ok(FolderName));
    void Cancel() => MudDialog.Cancel();

    private void keydown(KeyboardEventArgs e)
    {
        if (e.Key == "Enter")
        {
            MudDialog.Close(DialogResult.Ok(FolderName));
        }
    }
}

MudBlazor에는 FocusTrap이라는 객체가 있습니다. 이와 관련된 설명은 MudBlazor 문서를 참고해주세요.
간략하게 설명드리자면 MudDialog에는 기본적으로 FocusTrap이 들어가 있어서

<MudDialog DefaultFocus="DefaultFocus.FirstChild">

이렇게 DefaultFocus를 FirstChild로 세팅만 해주셔도 객체 내부의 첫번째 요소에 자동으로 포커스가 생기게 됩니다.
또한 아래와 같이 첫번째 요소인 TextField에 onkeydown 이벤트를 수신함으로써, 엔터키에 반응할 수 있도록 해놨습니다.

<MudTextField T="string" Label="폴더명" @bind-Value="FolderName" Immediate="true" 
OnKeyDown="keydown"></MudTextField>

자! 이제 실행해서 페이지를 띄우고 ‘새 폴더 Async’ 버튼을 눌러봅니다.


처음 포커스가 TextField로 가 있을겁니다.
DotNetDev 입력 후 엔터!

시간 관계상 “Dialog로 파라미터 넘겨주기” (업로드 버튼)는 다음 시간에 추가하도록 할게요!

[CODE_REAPER]

Dialog 컴포넌트는 구현을 완료했고, 이제 컴포넌트가 넘겨주는 DialogResult를 페이지에서 처리하도록 하겠습니다.

// Dialog 옵션을 설정 후 DlgNewFolder 서비스 인스턴스를 호출합니다.
DialogOptions closeOnEscapeKey = new() { CloseOnEscapeKey = true };
var dialog = await DialogService.ShowAsync<DlgNewFolder>("새폴더 만들기", closeOnEscapeKey);
// 받아온 결과값 저장
var result = await dialog.Result;

// cancel되거나 오류로 인해 null이 리턴되었는지 확인
if (!result.Canceled && result.Data != null)
{
    string NewFolderName = result.Data.ToString();
}

[CODE_REAPER]

MudChipSet

MudBlazor 문서
https://mudblazor.com/components/chipset#single-selection

---

기본적인 사용법은 위 링크를 참고해주세요.

순정 상태의 Chipset 구현

<MudChipSet MultiSelection="true" Filter="true">
    <MudChip Text="체크1" Class="rounded pa-2" Variant="Variant.Outlined"></MudChip>
    <MudChip Text="체크2" Class="rounded pa-2" Variant="Variant.Outlined" Color="Color.Info"></MudChip>
    <MudChip Text="체크3" Class="rounded pa-2" Variant="Variant.Outlined" Color="Color.Success"></MudChip>
    <MudChip Text="체크4" Class="rounded pa-2" Variant="Variant.Outlined" Color="Color.Warning"></MudChip>
    <MudChip Text="체크5" Class="rounded pa-2" Variant="Variant.Outlined" Color="Color.Secondary"></MudChip>
    <MudChip Text="체크6" Class="rounded pa-2" Variant="Variant.Outlined" Color="Color.Primary"></MudChip>
    <MudChip Text="체크7" Class="rounded pa-2" Variant="Variant.Outlined" Color="Color.Dark"></MudChip>
</MudChipSet>

결과는 아래와 같습니다.

보시다시피 Chipset의 폭이 변하면서 UI상에 변수가 생길 수가 있습니다.

그래서 저는 시인성도 좋으면서, 폭이 변하지 않도록 체크박스를 없애기로 했습니다.

---

변형된 스타일의 Chipset 구현

MudChipSet의 하위 요소에 AvatarContent 라는 것이 있습니다.
이 영역이 체크박스에 해당하는 아이콘이 표시되는 영역인데, 폭을 0으로 만들면 간단히 해결됩니다.
(더 좋은 방법은 언제든 댓글로 남겨주세요)

 <MudChipSet MultiSelection="true" Filter="true">
	 <MudChip Text="접수" Class="rounded mx-0 pa-2" Variant="Variant.Text" Color="Color.Transparent" SelectedColor="Color.Dark">
		 <AvatarContent>
			 <MudAvatar Style="width:0px;"></MudAvatar>
		 </AvatarContent>
	 </MudChip>
	 <MudChip Text="처리중" Class="rounded mx-0 pa-2" Variant="Variant.Text" Color="Color.Transparent" SelectedColor="Color.Primary">
		 <AvatarContent>
			 <MudAvatar Style="width:0px;"></MudAvatar>
		 </AvatarContent>
	 </MudChip>
	 <MudChip Text="방문예정" Class="rounded mx-0 pa-2" Variant="Variant.Text" Color="Color.Transparent" SelectedColor="Color.Success">
		 <AvatarContent>
			 <MudAvatar Style="width:0px;"></MudAvatar>
		 </AvatarContent>
	 </MudChip>
	 <MudChip Text="사고처리중" Class="rounded mx-0 pa-2" Variant="Variant.Text" Color="Color.Transparent" SelectedColor="Color.Warning">
		 <AvatarContent>
			 <MudAvatar Style="width:0px;"></MudAvatar>
		 </AvatarContent>
	 </MudChip>
	 <MudChip Text="연기" Class="rounded mx-0 pa-2" Variant="Variant.Text" Color="Color.Transparent" SelectedColor="Color.Secondary">
		 <AvatarContent>
			 <MudAvatar Style="width:0px;"></MudAvatar>
		 </AvatarContent>
	 </MudChip>
	 <MudChip Text="처리완료" Class="rounded mx-0 pa-2" Variant="Variant.Text" Color="Color.Transparent" SelectedColor="Color.Tertiary">
		 <AvatarContent>
			 <MudAvatar Style="width:0px;"></MudAvatar>
		 </AvatarContent>
	 </MudChip>
	 <MudChip Text="취소" Class="rounded mx-0 pa-2" Variant="Variant.Text" Color="Color.Transparent" SelectedColor="Color.Error">
		 <AvatarContent>
			 <MudAvatar Style="width:0px;"></MudAvatar>
		 </AvatarContent>
	 </MudChip>
 </MudChipSet>

결과는 아래와 같습니다.