MASA Blazor多页签组件(Masa Blazer multi tab component)

demo代码地址:https://gitee.com/wang-zengxing/page-tabs-demo

找了一圈的Blazor多页签组件,感觉都太麻烦,发现了MASA Blazor的这个。

只要在MainLayout.razor的@Body外面套个PageTabs组件就可以了,Items是要缓存的页面配置。

...
<MPageTabs Items="_items">
                @Body
</MPageTabs>
...
@code {
    //其它页面正常打开,状态不会保留
    private List<PageTabItem> _items = new List<PageTabItem>
        {
            new PageTabItem("index",""),
            new PageTabItem("counter","counter"),
            new PageTabItem("fetchdata","fetchdata")
        };
}
————————

demo代码地址:https://gitee.com/wang-zengxing/page-tabs-demo

After looking for a circle of blazor multi tab components, I felt it was too troublesome. I found this one of masa blazor.

Just in mainlayout Just set a pagetabs component outside the @ body of razor. Items is the page configuration to be cached.

...
<MPageTabs Items="_items">
                @Body
</MPageTabs>
...
@code {
    //其它页面正常打开,状态不会保留
    private List<PageTabItem> _items = new List<PageTabItem>
        {
            new PageTabItem("index",""),
            new PageTabItem("counter","counter"),
            new PageTabItem("fetchdata","fetchdata")
        };
}