Blazor로 시작: 공유 대화 상자 구성 요소 추가
17318 단어 csharpblazoraspnetcore
카드 레이아웃이 모두 설정되고 검색 가능하므로 이제 공유 대화 구성 요소를 구축할 수 있습니다. 이 대화 상자에서 사용자는 카드를 클릭하여 이미지에 대한 자세한 정보를 얻을 수 있습니다. 대화 상자에는 제목, 날짜, 설명, 사진 자체 및 사용자가 내 공용 Azure Blob Storage 컨테이너에서 이미지를 열 수 있는 링크가 표시됩니다.
직접 대화를 작성하는 것은 간단해 보이지만 많은 뉘앙스로 인해 직접 작성하는 것이 어려울 수 있습니다. CSS 효과(창을 열 때 배경을 어둡게 하는 것과 같은)를 적용하고, 스크롤 가능하게 만들고, 여러 화면 크기에 맞게 조정하고, 키보드 입력을 허용(
Esc 키를 눌렀을 때 대화 상자를 닫는 것과 같은)해야 합니다. 에. 훌륭한 옵션이 많이 있지만 저는 MudBlazor component library 을 사용하기로 결정했습니다.시작하자. 언제나처럼 내project is out on GitHub .
MudBlazor 설치 및 구성
MudBlazor를 설치하기 위해 내
dotnet 프로젝트에서 다음BlastOff.Client CLI 명령을 실행했습니다.dotnet add package MudBlazor
구성 요소 파일에서 수동 가져오기를 방지하기 위해 bottom of my
@using file 에 단일 _Imports.razor 를 추가했습니다.@using MudBlazor
그런 다음 in
Program.cs in the BlastOff.Client project 다음 서비스를 추가합니다.using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.DependencyInjection;
using System;
using System.Threading.Tasks;
using MudBlazor.Services;
namespace BlastOff.Client
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
// other stuff not relevant to this post
builder.Services.AddMudServices();
builder.Services.AddMudBlazorDialog();
await builder.Build().RunAsync();
}
}
}
프로젝트의
wwwroot/index.html , add MudBlazor’s CSS in the <head> tag 및 해당 JS에서 <body> 태그의 끝 부분. (참고로 이게 다입니다in the MudBlazor documentation .)<!DOCTYPE html>
<html>
<head>
<!-- Condensed <head> -->
<link href="BlastOff.Client.styles.css" rel="stylesheet">
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
</head>
<body>
<!-- Condensed <body> -->
<script src="_framework/blazor.webassembly.js"></script>
<script src="_content/MudBlazor/MudBlazor.min.js"></script>
</body>
</html>
MudBlazor 설정을 완료하려면
MudThemeProvider 및 MudDialogProvider 구성 요소in the Shared/MainLayout.razor file를 추가합니다. FullWidth 및 MaxWidth 와 같은 전역 대화 매개변수를 전달할 수도 있음을 알 수 있습니다.@inherits LayoutComponentBase
<NavBar />
<div>
<div class="section columns">
<main class="column">
<MudThemeProvider/>
<MudDialogProvider
FullWidth="true"
MaxWidth="MaxWidth.Small"/>
@Body
</main>
</div>
</div>
공유 대화 구성 요소 추가
MudBlazor가 설정 및 구성된 상태에서
Shared/ImageDialog.razor 에 새 대화 상자 구성 요소를 추가해 보겠습니다.the
@code block 에서 먼저 Submit 및 Cancel 이벤트를 연결해야 합니다. Submit는 간단한 Ok 대화 결과에 바인딩되며 Cancel는 기본 동작을 가정합니다. MudBlazor는 CascadingParameter의 MudDialog를 전달합니다. 또한 대화 상자를 채우는 데 사용하는 데이터를 포함하는 매개 변수로 ImageDetails를 전달하고 있습니다.@code {
[CascadingParameter] MudDialogInstance MudDialog { get; set; }
[Parameter] public Image ImageDetails { get; set; }
void Submit() => MudDialog.Close(DialogResult.Ok(true));
void Cancel() => MudDialog.Cancel();
}
the markup 에서
ImageDetails 모델은 MudDialog 및 연결된 DialogContent 및 마지막으로 MudContainer 내부에 있습니다. 몇 가지 간단한 Tailwind CSS 스타일 지정 후 ImageDetails 속성을 사용하여 대화 상자를 채웁니다.<MudDialog>
<DialogContent>
<MudContainer Style="max-height: 500px; overflow-y: scroll">
<div class="text-gray-600 text-md-left font-semibold tracking-wide">
@ImageDetails.PrettyDate
</div>
<div class="text-xs p-4">
@ImageDetails.Explanation
</div>
<div class="p-4">
<a href="@ImageDetails.Url" target="_blank">See high-quality image <i class="fa fa-external-link" aria-hidden="true"></i></a>
</div>
<img src="@ImageDetails.Url" />
</MudContainer>
</DialogContent>
<DialogActions>
<MudButton OnClick="Cancel">Cancel</MudButton>
<MudButton Color="Color.Primary" OnClick="Submit">Ok</MudButton>
</DialogActions>
</MudDialog>
ImageCard에 대화 상자 추가
공유 대화 상자가 생성되었으므로 이제 add it to our existing
ImageCard component . 마크업의 경우 IDialogService 및 bind an OpenDialog function to an @onclick event 을 삽입할 수 있습니다.@inject IDialogService DialogService
<div class="image-container m-6 rounded overflow-hidden shadow-lg"
@onclick="OpenDialog">
<!-- All the existing markup -->
</div>
@code 블록은 ImageDetails를 매개변수로 포함하여 대화 상자로 보냅니다. 그런 다음 OpenDialog 에서 ImageDetails 를 DialogParameters 로 전달하고 대화 상자를 표시합니다.@code
{
[Parameter]
public Image ImageDetails { get; set; }
private void OpenDialog()
{
var parameters = new DialogParameters ImageDetails;
DialogService.Show<ImageDialog>(ImageDetails.Title, parameters);
}
}
보너스: 이미지 카드 호버 효과에 CSS 격리 사용
이미지 카드 위로 마우스를 가져가면 이미지 카드가 조금 더 커지는 호버 효과를 추가했습니다. 사용자에게 "이봐, 이걸 클릭해도 돼"라고 말하는 간단하고 미묘한 방법입니다.
나는 few에 대해 times Blazor CSS isolation을 썼습니다. 링크에서 자세한 내용을 확인할 수 있지만 스타일 범위를 특정 구성 요소로만 지정할 수 있습니다.
이를 위해 나created an
ImageCard.razor.css file . 이 스타일은 호버에서 이미지 카드를 10% 더 크게 만듭니다..image-container:hover {
transform: scale(1.10)
}
미션 완료!
마무리
이 게시물에서는 MudBlazor 구성 요소 라이브러리를 사용하여 공유 대화 상자 구성 요소를 만들었습니다. 라이브러리를 설치 및 구성하고, 구성 요소를 만들고, 기존 솔루션에 추가하는 방법을 보여 주었습니다. 보너스로 멋진 호버 효과를 적용하기 위해 CSS 격리를 사용했습니다.
Reference
이 문제에 관하여(Blazor로 시작: 공유 대화 상자 구성 요소 추가), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/daveabrock/blast-off-with-blazor-add-a-shared-dialog-component-2md3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
