我想要使用 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’，它是任意代码，无法序列化。”
根据您的另一个问题，您必须
InteractiveWebAssembly为您的项目全局设置渲染模式创建新项目时，选择如下：
并按照文档中的步骤进行交互式自动模式
但你必须保持
InteractiveWebAssemblyapp.razor 中的渲染模式我建议您选择交互式位置作为全局的原因是导航项只会在 OnAfterRenderAsync 生命周期事件期间加载。
如果按组件设置交互位置，布局将被渲染为静态，并且不会触发 OnAfterRenderAsync 事件，侧边栏将继续加载