ติดตั้งตามเว็บเค้าแล้วมันเหมือนใช้ 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;
}