主页 / user-27339040

user27339040's questions

Martin Hope
user27339040
Asked: 2024-11-05 17:46:31 +0800 CST
  • 5

我想要使​​用 Blazor Bootstrap 的 SideBar。NewLayout.razor：

@inherits LayoutComponentBase

<div class="bb-page">
    <Sidebar2 Href="/"
              IconName="IconName.BootstrapFill"
              Title="Blazor Bootstrap"
              BadgeText="v2.1.0"
              DataProvider="Sidebar2DataProvider" />

    <main>
        <div class="bb-top-row px-4 d-flex justify-content-end">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4" style="position: relative;">
            <div class="py-2">
                @Body
            </div>
        </article>
    </main>
</div>

<style>
    .bb-page {
        display: flex;
        width: 100%;
        height: 100vh;
    }

    main {
        flex: 1;
        overflow: auto;
        min-width: 0;
    }
</style>

@code {

    IEnumerable<NavItem>? navItems;

    private async Task<Sidebar2DataProviderResult> Sidebar2DataProvider(Sidebar2DataProviderRequest request)
    {
        if (navItems is null)
            navItems = GetNavItems();

        return await Task.FromResult(request.ApplyTo(navItems));
    }

    private IEnumerable<NavItem> GetNavItems()
    {
        navItems = new List<NavItem>
        {
            new NavItem { Id = "1", Href = "/getting-started", IconName = IconName.HouseDoorFill, Text = "Getting Started"},

            new NavItem { Id = "2", IconName = IconName.LayoutSidebarInset, Text = "Content" },
            new NavItem { Id = "3", Href = "/icons", IconName = IconName.PersonSquare, Text = "Icons", ParentId="2"},

            new NavItem { Id = "4", IconName = IconName.ExclamationTriangleFill, Text = "Components" },
            new NavItem { Id = "5", Href = "/alerts", IconName = IconName.CheckCircleFill, Text = "Alerts", ParentId="4"},
            new NavItem { Id = "6", Href = "/breadcrumb", IconName = IconName.SegmentedNav, Text = "Breadcrumb", ParentId="4"},

            new NavItem { Id = "7", IconName = IconName.ListNested, Text = "Sidebar 2", ParentId="4"},
            new NavItem { Id = "701", Href = "/sidebar2", IconName = IconName.Dash, Text = "How to use", ParentId="7"},
            new NavItem { Id = "702", Href = "/sidebar2-examples", IconName = IconName.Dash, Text = "Examples", ParentId="7"},

            new NavItem { Id = "8", IconName = IconName.WindowPlus, Text = "Forms" },
            new NavItem { Id = "9", Href = "/autocomplete", IconName = IconName.InputCursorText, Text = "Auto Complete", ParentId="8"},
            new NavItem { Id = "10", Href = "/currency-input", IconName = IconName.CurrencyDollar, Text = "Currency Input", ParentId="8"},
            new NavItem { Id = "11", Href = "/number-input", IconName = IconName.InputCursor, Text = "Number Input", ParentId="8"},
            new NavItem { Id = "12", Href = "/switch", IconName = IconName.ToggleOn, Text = "Switch", ParentId="8"},
        };

        return navItems;
    }

}

我想将它用作客户端页面上的新布局。但它一直显示 3 点加载内容。( https://isstatic.askoverflow.dev/Jp3jQFK2.png )。有一个关于它的问题链接，但服务器项目中的 App.razor 对我来说不起作用。

我想将其用作客户端页面上的新布局。我发现此视频链接2最接近我想要的内容，但它在服务器端运行页面。

为了创建“@layout NewLayout”，布局必须在客户端，但即便如此，我也无法写入@rendermode InteractiveWebAssembly布局。出现以下错误：

“InvalidOperationException：无法将参数‘Body’传递给渲染模式为‘InteractiveWebAssemblyRenderMode’的组件‘NewLayout’。这是因为该参数属于委托类型‘Microsoft.AspNetCore.Components.RenderFragment’，它是任意代码，无法序列化。”

blazor