Ignite UI는 모든 주요 웹 프레임워크를 위한 수백 개의 UI 구성 요소로 구성된 완전한 라이브러리입니다. 여기에는 시장에서 가장 빠른 그리드, 속도 및 성능에 최적화된 고성능 차트, 가장 포괄적인 앱 구축 경험에 필요한 기타 모든 컨트롤이 포함됩니다. 특히 Ignite UI for Blazor의 경우 빠른 구성 요소 및 기능 집합을 사용하여 기능이 풍부한 웹 앱을 구축할 수 있습니다. 여기에는 Data Grid, Pivot Grid, Hierarchical Grid 등이 포함됩니다. 필요한 모든 차트 – Area, Pie, Financial 등과 Stepper, Dock Manager 등과 같은 고유한 컨트롤.
Ignite UI 및 Blazor 하이브리드 시작하기
이 섹션에서는 .NET MAUI 및 Ignite UI for Blazor를 사용하여 Blazor 하이브리드 앱을 만들고 실행하는 방법을 보여 주고 마지막에 완성된 Blazor 하이브리드 예제를 보여 줍니다. Blazor-MAUI 하이브리드 앱은 Windows, macOS 또는 Linux 배포판에서 개발할 수 있습니다. 그러나 이 문서에서는 Windows 기반 시나리오에 대해서만 설명합니다.
Prerequisites:
- .NET SDK 8 or above
- 최신 버전의 Visual Studio 2022 이상(다음 워크로드 포함):
- .NET Multi-platform App UI development
- ASP.NET 및 웹 개발
Step 1: Create a new ".NET MAUI Blazor Hybrid App" project in Visual Studio.
2 단계 : 프로젝트 이름과 위치를 입력하고 그런 다음 만들기를 클릭합니다.
3 단계 : Visual Studio에서 프로젝트 → NuGet 패키지 관리를 선택하여 NuGet 패키지 관리자를 엽니다. IgniteUI.Blazor NuGet 패키지를 검색하여 설치합니다.
Step 4: Register Ignite UI for Blazor
먼저 MauiProgram.cs 파일을 열고 builder를 호출하여 Ignite UI for Blazor Service를 등록해야 합니다. Services.AddIgniteUIBlazor 함수를 사용합니다. 그런 다음 IgniteUI를 추가합니다. Blazor._Imports.razor 파일의 컨트롤 네임스페이스입니다.
@using IgniteUI.Blazor.Controls
준비가 되면 wwwroot/index.html 파일의 <head> 요소에 스타일 시트를 추가합니다.
<head> <link rel="stylesheet" href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" /> </head>
계속해서 스크립트 참조를 wwwroot/index.html 파일에 추가하려면 다음을 수행합니다.
<script src="_content/IgniteUI.Blazor/app.bundle.js"></script> <script src="_framework/blazor.webview.js" autostart="false"></script입니다>
5 단계 : Ignite UI for Blazor 구성 요소 추가
방법은 다음과 같습니다.
<IgbCard style="width:350px"> <IgbCardMedia> <img src="https://images.unsplash.com/photo-1541516160071-4bb0c5af65ba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=350&q=80" /> </IgbCardMedia> <IgbCardHeader> <h4>Jane Doe</h4> <h6>전문 사진작가</h6> </IgbCardHeader> <IgbCardContent>안녕하세요! 저는 사진작가 겸 영화 제작자인 Jane입니다. 사진은 느끼고, 만지고, 사랑하는 방식입니다. 필름에 담은 것은 영원히 포착됩니다... 모든 것을 잊어버린 후에도 오랫동안 작은 것을 기억합니다.</IgbCardContent> <IgbCardActions> <IgbButton>More Info</IgbButton> </IgbCardActions> </IgbCard>
Windows용 .NET MAUI Blazor 앱을 만드는 방법입니다.