BlazorStrap 导航栏无法打开

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

我正在使用 BlazorStrap 导航栏。当显示屏宽度减小时,会显示切换按钮。 问题是现在点击它不会打开菜单。

我创建了一个 Blazor 服务器应用程序

dotnet new blazor -o BlazorIndNone  -au Individual  -int Server
dotnet add package blazorstrap
dotnet add package blazorstrap.V5

程序.cs:

using BlazorStrap;
builder.Services.AddBlazorStrap(options =>
{
    options.ShowDebugMessages = true;
});

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="BlazorApp3.styles.css" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
</head>

<body>
    <Routes />
    <script src="_framework/blazor.web.js"></script>
    <script src="_content/BlazorStrap/popper.min.js"></script>
    <script src="_content/BlazorStrap/blazorstrap.js"></script>
</body>
</html>

nav.razor 来自 https://blazorstrap.io/V5/V5/components/navbar

<BSNavbar Color="BSColor.Light">
    <BSContainer Container="Container.Fluid">
        <BSNavbarBrand>Navbar</BSNavbarBrand>
        <BSCollapse IsInNavbar="true">
            <Toggler>
                <BSNavbarToggle />
            </Toggler>
            <Content>
                <BSNav MarginEnd="Margins.Auto" MarginBottom="Margins.Small" Class="mb-lg-0">
                    <BSNavItem IsActive="true" Url="javascript:void(0);">Home</BSNavItem>
                    <BSNavItem Url="javascript:void(0);">Link</BSNavItem>
                    <BSNavItem IsDropdown="true">
                        <BSDropdown IsNavPopper="true" Placement="Placement.BottomEnd">
                            <Toggler><BSToggle IsNavLink="true">Dropdown</BSToggle></Toggler>
                            <Content>
                                <BSDropdownItem Url="javascript:void(0);">Action</BSDropdownItem>
                                <BSDropdownItem Url="javascript:void(0);">Another action</BSDropdownItem>
                                <BSDropdownItem IsDivider="true" />
                                <BSDropdownItem Url="javascript:void(0);">Something else here</BSDropdownItem>
                            </Content>
                        </BSDropdown>
                    </BSNavItem>
                    <BSNavItem Url="javascript:void(0);" IsDisabled="true">Disabled</BSNavItem>
                </BSNav>
            </Content>
        </BSCollapse>
        <form class="d-flex">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            <BSButton Color="BSColor.Success" IsOutlined="true">Search</BSButton>
        </form>
    </BSContainer>
</BSNavbar>
asp.net-core blazor navbar blazorstrap
1个回答
0
投票

这是因为这个导航栏需要交互式渲染模式才能工作。您需要将 App.razor 更改为

    <HeadOutlet @rendermode="InteractiveServer" />
...
    <Routes @rendermode="InteractiveServer" />

如果你检查原始内置模板导航栏,你会发现它使用纯 javascript 进行切换功能,可以在 SSR 中工作。

onclick="document.querySelector('.navbar-toggler').click()"

但是这个引导导航栏不是纯 JavaScript,因此需要交互模式才能激活。

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.