MudBlazor.Extensions 사용하기 - Dialog Drag
MudBlazor.Extensions 사용하기 - Dialog Drag
MudBlazor.Extensions 은 MudBlazor 에서 부족한 기능들이 추가된 패키지입니다.
아래는 깃헙 페이지 입니다.
https://github.com/fgilde/MudBlazor.Extensions
GitHub - fgilde/MudBlazor.Extensions: MudBlazor.Extensions from https://www.mudex.org is a small extension for MudBlazor from ht
MudBlazor.Extensions from https://www.mudex.org is a small extension for MudBlazor from https://mudblazor.com - fgilde/MudBlazor.Extensions
github.com
아래는 데모 페이지 입니다.
여러 컨트롤의 사용법을 소개하고 있어 사용할때 많은 도움이 됩니다.
MudEx is blazor component and extension library for mudblazor
MudEx is blazor component and extension library for mudblazor.
www.mudex.org
저는 Dialog 가 떴을때 드레깅으로 움직일수 없어 불편했는데
MudBlazor.Extensions 을 이용하면 Dialog 를 마우스 드레그로 움직일 수 있습니다.
https://www.mudex.org/simple-dialogs
또한 MudBlazor 에는 Splitter 가 없는데 MudBlazor.Extensions 에는 MudExSplitter 가 있습니다.
https://www.mudex.org/splitter
1. MudBlazor.Extensions 패키지를 설치합니다.
2. MudBlazor.Extensions 를 사용하기 위한 추가 설정을 합니다.
Program.cs 파일에 아래 코드 추가합니다.
// MudBlazor.Extensions
builder.Services.AddMudServicesWithExtensions();
builder.Services.AddMudExtensions();
// SSR 인 경우
app.Use(MudExWebApp.MudExMiddleware);_Imports.razor 파일에 아래 코드를 추가합니다.
@using MudBlazor.Extensions
@using MudBlazor.Extensions.Components
@using MudBlazor.Extensions.Components.ObjectEditApp.razor 파일에 아래 태그를 추가합니다.
<head>
...
<link id="mudex-styles" href="_content/MudBlazor.Extensions/mudBlazorExtensions.min.css" rel="stylesheet">
...
</head>
3. 드레그 가능한 Dialog
// 기존
//var options = new DialogOptions { CloseOnEscapeKey = true };
//var dialog = await DialogService.ShowAsync<ItemDialog>("Simple Dialog", options);
// MudBlazor.Extensions
var options = new DialogOptionsEx { CloseOnEscapeKey = true, DragMode = MudDialogDragMode.Simple };
var dialog = await DialogService.ShowEx<ItemDialog>("Simple Dialog", options);위 코드를 보면 알 수 있듯이 기존 코드와 비슷한 코드로 처리가 가능합니다.
DialogOptionEx 에 DragMode 가 추가되었고 이를 설정 하면 아래처럼 Dialog 가 드레그 가능해 집니다.
'코딩 > Blazor' 카테고리의 다른 글
| MudBlazor.Extensions 사용하기 - MudExSplitter (0) | 2025.03.24 |
|---|---|
| BlazorDatasheet 에서 특정 값인 경우 배경색 변경하기 (0) | 2025.03.23 |
| BlazorDatasheet 에서 특정 문자 입력 방지하기 (0) | 2025.03.22 |
| MudBlzaor MudTextField 언더라인 제거하기 (delete underline) (0) | 2025.03.19 |
| MudBlzaor MudDataGrid Header 가운데 정렬 및 배경색 변경하기 (0) | 2025.03.19 |
