Tabs多文档标签页(数据展示)

转载已于 2022-03-21 16:50:12 修改 · 962 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://jamesyeung.cn/posts/implement-reuse-tabs-using-antblazor/

flyingdream123

关注

标签

#Ant Blazor #Tabs

分类前端开发

于 2022-03-21 16:06:01 首次发布

Ant Blazor UI 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在Blazor应用中集成AntDesign，重点讲解了如何替换`RouteView`为`ReuseTabsRouteView`，以及如何通过`ReuseTabsPageTitle`和`IReuseTabsPage`接口自定义标签。步骤包括修改App.razor和MainLayout.razor，展示了灵活的标签管理技巧。

首先，按照 Ant Design Blazor 文档中介绍的方式安装 AntDesign 包和服务注册。
修改项目中的 App.razor 文件，把 RouteView 替换成 ReuseTabsRouteView。

<Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            @*<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />*@
            <ReuseTabsRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
 </Router>

3. 修改项目中的 MainLayout.razor 文件

 <div class="main">
-       <div class="top-row px-4">
-           <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
-       </div>
-       <div class="content px-4">
-           @Body
-       </div>
+       <ReuseTabs Class="top-row px-4" TabPaneClass="content px-4" / >
    </div>

4.两种方式自定义标签名称

如果是纯文本，可以在页面组件使用 ReuseTabsPageTitle 特性。

@page "/counter"
+ @attribute [ReuseTabsPageTitle("Counter")]

如果需要使用模板来获取动态的标签名，比如添加另一个组件，或者从页面内容中获取标题，需要实现 IReuseTabsPage 接口：

@page "/"
+ @implements IReuseTabsPage

<h1>Hello, world!</h1>

@code{
+   public RenderFragment GetPageTitle() =>
+       @<div>
+           <Icon Type="home"/> Home
+       </div>
+   ;
}