MASA Blazor多页签组件

找了一圈的Blazor多页签组件，感觉都太麻烦，于是开发了这个。

demo:https://gitee.com/wang-zengxing/page-tabs-demo

源码:https://github.com/BlazorComponent/MASA.Blazor/blob/develop/src/MASA.Blazor/Components/PageTabs

用法

只要在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")
        };
}

进阶用法

可以使用TabContent插槽，自定义样式。

可以参考MASA.Blazor.Pro及其源码。

...
<MPageTabs Items="_items">
    <TabContent>
           //attrs用于添加右键菜单
            <div @attributes="context.Attrs">
                <MIcon>
                    @context.Item.Icon
                </MIcon>
                <a href="@context.Item.Url">
                    @context.Item.Name
                </a>
                <MIcon OnClick="context.Close">
                    mdi-close
                </MIcon>
            </div>
    </TabContent>
    <ChildContent>
            @Body       
    </ChildContent>           
</MPageTabs>
...
@code {
    //其它页面正常打开，状态不会保留
    private List<PageTabItem> _items = new List<PageTabItem>
        {
            new PageTabItem("index",""，"home"),
            new PageTabItem("counter","counter","counter"),
            new PageTabItem("fetchdata","fetchdata","fetchdata")
        };
}