我正在为我的 Blazor 应用程序 MainLayout 使用 Radzen 布局组件 但侧边栏扩展并不像文档中那样工作。如果我单击切换按钮,侧边栏不会折叠或展开。
@inherits LayoutComponentBase
@using Radzen
@using Radzen.Blazor
<RadzenComponents @rendermode="InteractiveServer" />
<RadzenLayout>
<RadzenHeader>
<RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
<RadzenSidebarToggle Click="@ToggleSidebar" />
<RadzenLabel Text="Header" />
</RadzenStack>
</RadzenHeader>
<RadzenSidebar Responsive="false" Style="width: max-content">
<RadzenPanelMenu DisplayStyle="@(sidebarExpanded ? MenuItemDisplayStyle.IconAndText : MenuItemDisplayStyle.Icon)" ShowArrow="false">
<RadzenPanelMenuItem Text="Overview" Icon="home" Path="/" />
<RadzenPanelMenuItem Text="Dashboard" Icon="dashboard" Path="counter" />
<RadzenPanelMenuItem Text="UI Fundamentals" Icon="auto_awesome">
<RadzenPanelMenuItem Text="Themes" Icon="color_lens" />
<RadzenPanelMenuItem Text="Colors" Icon="invert_colors" />
</RadzenPanelMenuItem>
</RadzenPanelMenu>
</RadzenSidebar>
<div class="rz-p-4">
@Body
</div>
<RadzenFooter>
Footer
</RadzenFooter>
</RadzenLayout>
@code {
bool sidebarExpanded = true;
void ToggleSidebar()
{
sidebarExpanded = !sidebarExpanded;
StateHasChanged();
}
}
我正在使用 .Net 8 服务器端渲染模式,并且我已确保 Radzen 的安装正确,因为它与除侧边栏之外的其他 Radzen 组件配合得很好。我不知道还有什么问题。
找到您的 App.razor 并更改
Routes
,如下所示,它将起作用。
<!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="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="BlazorApp.styles.css" />
<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>