ติดตั้ง Radzen Blazor

ติดตั้งตามเว็บเค้าแล้วมันเหมือนใช้ Javascript ไม่ได้ เพราะตอนใช้ Layout มันเปิด-ปิด Sidebar ไม่ได้

ติดตั้งแพ็คเกจ

dotnet add package Radzen.Blazor

แก้ไขไฟล์ .csproj

จากที่มันจะมีอันนี้แหละ แต่แก้ตรง Version เป็น *

<PackageReference Include="Radzen.Blazor" Version="*" />

แก้ไขไฟล์ _Imports.razor

// Components/_Imports.razor

@using Radzen
@using Radzen.Blazor

แก้ไขไฟล์ App.razor

มีการ Set Theme และเพิ่ม rendermode เข้าไปที่ Routes และเพิ่มไฟล์ Radzen.Blazor.js

// Components/App.razor

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]" />
    <link rel="stylesheet" href="@Assets["app.css"]" />
    <ImportMap />
    <link rel="icon" type="image/png" href="favicon.png" />
    <RadzenTheme Theme="material" @rendermode="InteractiveServer" />
    <HeadOutlet />
</head>

<body>
    <Routes @rendermode="InteractiveServer" />
    <script src="_framework/blazor.web.js"></script>
    <script
        src="_content/Radzen.Blazor/Radzen.Blazor.js?v=@(typeof(Radzen.Colors).Assembly.GetName().Version)"></script>

</body>

</html>

แก้ไขไฟล์ Program.cs

// Program.cs

using Radzen;

builder.Services.AddRadzenComponents();

var app = builder.Build();

หน้า MainLayout.razor ก็จะใช้ได้

// Components/Layout/MainLayout.razor

@inherits LayoutComponentBase

<RadzenLayout Style="grid-template-areas: 'rz-sidebar rz-header' 'rz-sidebar rz-body'">
    <RadzenHeader>
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
            <RadzenSidebarToggle Click="@(() => sidebarExpanded = !sidebarExpanded)" />
            <RadzenLabel Text="Header" />
        </RadzenStack>
    </RadzenHeader>
    <RadzenSidebar @bind-Expanded="@sidebarExpanded">
        <RadzenPanelMenu>
            <RadzenPanelMenuItem Text="Home" Icon="home" />
            <RadzenPanelMenuItem Text="Users" Icon="account_box" />
        </RadzenPanelMenu>
        <div class="rz-p-4">
            Sidebar
        </div>
    </RadzenSidebar>
    <RadzenBody>
        <div class="rz-p-4">
            @Body
        </div>
    </RadzenBody>
</RadzenLayout>

@code {
    bool sidebarExpanded = true;
}

เขียนโดย KanexKane

นักเขียนโค้ด นักเก็บเรื่องราว และนักทดสอบ ชอบแบ่งปันสิ่งเล็ก ๆ ที่ทำให้วันธรรมดาพิเศษขึ้น

รู้จักกันอีกนิด →