[Blazor] Radzen Component 사용하기

C#/Blazor 2022. 10. 13. 20:37
728x90

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
Posted by kjun.kr
,

티스토리툴바