MudBlazor๋ฅผ ํ์ฉํ UI ๊ตฌ์ฑ ์ง์์ ์ ๋ฆฌํฉ๋๋ค.
ํธ์์ MudBlazor Template๋ก ํ๋ก์ ํธ๋ฅผ ์์ฑํด์ ์์
ํฉ๋๋ค.
MudBlazor๋ฅผ ํ์ฉํ UI ๊ตฌ์ฑ ์ง์์ ์ ๋ฆฌํฉ๋๋ค.
ํธ์์ MudBlazor Template๋ก ํ๋ก์ ํธ๋ฅผ ์์ฑํด์ ์์
ํฉ๋๋ค.
๊ถ๊ธํ๋ค์ ๊ธฐ๋
์, ์ ๋ ๊ด์ฌ์์ต๋๋ค. ใ ใ ใ
MudBlazor ๋ฌธ์
https://mudblazor.com/components/dialogSource code (GitHub)
https://github.com/ChoiHM/MB-MudDialogSample
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"
/>
์ด์ ๊ฐ๋จํ๊ฒ ํ
์คํธ๋ฅผ ์ํ ๋ฒํผ 2๊ฐ๊ณผ Dialog ์ปดํฌ๋ํธ๋ 2๊ฐ ๋ง๋ค๊ฒ ์ต๋๋ค.
ํ์ด์ง๋ Index.razor๋ฅผ ๋์ถฉ ์์ ํ๊ฒ ์ต๋๋ค. ๋ฒํผ์ 2๊ฐ ์ถ๊ฐํ๊ณ onclick ์ด๋ฒคํธ๋ฅผ ์ฐ๊ฒฐํฉ๋๋ค.
@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()
{
}
}
MudTemplate์ ์ด์ฉํด์ ํ๋ก์ ํธ๋ฅผ ์์ฑํ๋ฉด, ๊ตฌ๋ฒ์ ์ด ์ค์น๋ ๊ฒฝ์ฐ๊ฐ ๋ง์ต๋๋ค.
๋ฐ๋ผ์ ShowAsyncํจ์๊ฐ ์ ๊ณต๋์ง ์๋ ๋ฒ์ ์ ์ฌ์ฉํ๋ฉด ์ค๋ฅ๊ฐ ๋ฐ์ํ๋ฏ๋ก, ์๋์ ๊ฐ์ด ์ ๋ฐ์ดํธ ํด์ฃผ๋ ๊ฒ์ด ์ข์ต๋๋ค.
(์ ์ ๊ฒฝ์ฐ 6.0.13์ด ์ค์น๋์ด ์์ผ๋ฉฐ, 6.2.2๋ก ์ ๋ฐ์ดํธ ์งํํ์ต๋๋ค.)
<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 ์ปดํฌ๋ํธ๋ ๊ตฌํ์ ์๋ฃํ๊ณ , ์ด์ ์ปดํฌ๋ํธ๊ฐ ๋๊ฒจ์ฃผ๋ 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();
}
MudBlazor ๋ฌธ์
https://mudblazor.com/components/chipset#single-selection
๊ธฐ๋ณธ์ ์ธ ์ฌ์ฉ๋ฒ์ ์ ๋งํฌ๋ฅผ ์ฐธ๊ณ ํด์ฃผ์ธ์.
<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์์ ๋ณ์๊ฐ ์๊ธธ ์๊ฐ ์์ต๋๋ค.
๊ทธ๋์ ์ ๋ ์์ธ์ฑ๋ ์ข์ผ๋ฉด์, ํญ์ด ๋ณํ์ง ์๋๋ก ์ฒดํฌ๋ฐ์ค๋ฅผ ์์ ๊ธฐ๋ก ํ์ต๋๋ค.
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>
๊ฒฐ๊ณผ๋ ์๋์ ๊ฐ์ต๋๋ค.