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โ ๋ฒํผ์ ๋๋ฌ๋ด
๋๋ค.