728x90
728x170
1. Blazor WebAssembly 프로젝트 생성
2. 'Radzen.Blazor' Nuget Package 설치
3. 자주사용되는 Radzen using 처리
_Imports.razor 파일에 아래 내용 추가
@using Radzen
@using Radzen.Blazor
4. 환경 설정
wwwroot/index.html 파일에 아래 내용을 추가
<head> 테그 안에
<link href="_content/Radzen.Blazor/css/default.css" rel="stylesheet">
<body> 테그 안에
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Blazor.RadzenTest</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="Blazor.RadzenTest.styles.css" rel="stylesheet" />
<link href="_content/Radzen.Blazor/css/default.css" rel="stylesheet">
</head>
<body>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
</body>
</html>
Program.cs 에 아래 내용 추가
builder.Services.AddScoped<DialogService>();
builder.Services.AddScoped<NotificationService>();
builder.Services.AddScoped<TooltipService>();
builder.Services.AddScoped<ContextMenuService>();
Shared/MainLayout.razor 에 아래 내용 추가
<RadzenDialog /> <RadzenNotification /> <RadzenContextMenu /> <RadzenTooltip /> |
@inherits LayoutComponentBase
<div class="page">
<div class="sidebar">
<NavMenu />
<RadzenDialog />
<RadzenNotification />
<RadzenContextMenu />
<RadzenTooltip />
</div>
<main>
<div class="top-row px-4">
<a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
</div>
<article class="content px-4">
@Body
</article>
</main>
</div>
5. 적용 확인 (Service 사용법은 다음 포스팅에서...)
Pages/Counter.razor 에서 Button 을 RadzenButton 으로 변경
<RadzenButton Click="@IncrementCount" Text="Click me"></RadzenButton>
Shared/NavMenu.razor 에서 nav,NavLink 를 RadzenPanelMenu(Item) 로 변경
<div class="top-row ps-3 navbar navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="">Blazor.RadzenTest</a>
<button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="rz-sidebar"
@onclick="ToggleNavMenu"
style="top: 51px; bottom: 0px; width: 250px;; transform: translateX(0px);">
<RadzenPanelMenu Style="width:249px">
<ul class="rz-panel-menu">
<li class="rz-navigation-item">
<RadzenPanelMenuItem Text="Home" Icon="home" Path="/" />
</li>
<li class="rz-navigation-item">
<RadzenPanelMenuItem Text="Counter" Icon="zoom_in" Path="counter" />
</li>
<li class="rz-navigation-item">
<RadzenPanelMenuItem Text="Fetch Data" Icon="zoom_out" Path="fetchdata" />
</li>
</ul>
</RadzenPanelMenu>
</div>
@code {
private bool collapseNavMenu = true;
private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
}
[Source]
https://github.com/kei-soft/Blazor.AppTest/tree/master/Blazor.RadzenTest
참고
https://github.com/radzenhq/radzen-blazor
728x90
그리드형
'C# > Blazor' 카테고리의 다른 글
[Blazor] NavMenu 와 Page 간 데이터 처리하기 (0) | 2022.10.15 |
---|---|
[Blazor] Radzen - RadzenTree 사용하기 (0) | 2022.10.14 |
[Blazor] Search 처리하기 (0) | 2022.10.12 |
[Blazor] PWA 만들기 - 프로그레시브 웹 애플리케이션 (0) | 2022.10.12 |
[Blazor] 핫리로드 활성화 및 오류 세부정보 표시하기 (0) | 2022.10.05 |