Radzen Blazor 侧边栏展开不起作用

问题描述 投票:0回答:1

我正在为我的 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 组件配合得很好。我不知道还有什么问题。

c# blazor blazor-server-side radzen
1个回答
0
投票

找到您的 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>
© www.soinside.com 2019 - 2024. All rights reserved.