Ant Design Blazor
ReuseTabs
Used to implement in-application page tabs and page caching.
When to use
- You need to use the in-app page tab to keep opened pages.
- When the page state needs to be hold, the state will not be lost when navigating back to the opened page.
How to use
Modify the MainLayout.razor file, add the ReuseTabs component. Note that @Body is not required at this case.
@inherits LayoutComponentBase
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<div class="main">
<ReuseTabs Class="top-row px-4" TabPaneClass="content px-4" Body="Body" / >
</div>
</div>
With just this step, you can easily implement a simple multi-tab feature.
But if you still need more powerful page configuration capabilities,
such as the ReuseTabsPageAttribute or IReuseTabsPage in the following examples,
you also need to modify the Routes.razor file, warp the RouteView or AuthorizeRouteView with <CascadingValue Value="routeData">...</CascadingValue>.
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<CascadingValue Value="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" / >
</CascadingValue>
</Found>
...
</Router>
Examples
Work with the Layout component and add a button to reload the current page.
The default page label is retrieved from the menu on the current layout.
Use the ReuseTabsPage attribute to set the functional properties of each page, such as defining the title, fixed at startup, and non-closable.
Note: Must cascade RouteData, otherwise it will be invalid.
Implement IReuseTabsPage to support dynamic headers, which are often used to set headers that need to request data fetch.
Note that since the page component and ReuseTabs are located in different locations, operating ReuseTabs requires an injected ReuseTabsService.
Note: Must cascade RouteData, otherwise it will be invalid.
If the page is Singleton, it will be reused although the parameters is different, otherwise, another tab will be created.
The singleton page is not re-instantiated, nor is the OnInitialized{Async} method performed, so it needs to listen for location navigation events to update the UI.
Note: Must cascade RouteData, otherwise it will be invalid.
ReuseTabs captures page components but does not render Layout, so you may encounter scenarios where you want certain pages, such as login pages, not to be captured, which can be disabled with Ignore=true. If you want to open a new page, you also need to match the Layout without the ReuseTabs component.
Note: Must cascade RouteData, otherwise it will be invalid.
API#
ReuseTabs
| Property | Description | Type | Default |
|---|---|---|---|
| Body | Used to set the @Body of Layout component. This parameter must be set in non-cascading RouteData mode. | RenderFragment | - |
| TabPaneClass | the class names of the Pane container | string | --- |
| Draggable | Whether you can drag and drop to adjust the order | bool | false |
| Size | Tabs size | TabSize | - |
| TabPaneTemplate | A template for a rendering class that adds styles around the page in the TabPane, passing in a context called ReuseTabsPageItem, where the Body is the page content |
RenderFragment<ReuseTabsPageItem> |
context => context.Body |
| Locale | Localized object | - | - |
| HidePages | Whether pages hidden in Tabs are used with ReusePages | bool | false |
| ReuseTabsRouteData | The routing information for the current page, which is a serializable version of RouteData | RouteData | - |
Other properties inherit from Tabs
ReuseTabsPageAttribute attribute
Note: Must cascade RouteData, otherwise it will be invalid.
| Property | Description | Type | Default |
|---|---|---|---|
| Title | The fixed title show on tab. | string | current path |
| Ignore | If Ignore=true, the page is not displayed in tab, but in the entire page. |
boolean | false |
| Closable | Whether the delete button can be displayed. | boolean | false |
| Pin | Whether the page is fixed to load and avoid closing, usually used on the home page or default page. | boolean | false |
| PinUrl | Specify the Url of the loaded page, and then open the page with a route parameter, such as /order/1 |
string | - |
| KeepAlive | Whether to cache the page state | bool | true |
| Order | The sequence number | int | 999 |
| TypeName | The page's classsname | string | - |
| Key | The page's key | string | - |
| Singleton | Whether to create a new page for route with different params | bool | false |
IReuseTabsPage interface
Note: Must cascade RouteData, otherwise it will be invalid.
| Method | Description |
|---|---|
| RenderFragment GetPageTitle() | Sets dynamic titles for titles that need to be determined when using templates or when loading |
ReuseTabsService
Used to control ReuseTabs in pages
| Method | Description |
|---|---|
| Pages | The information list of the currently opened pages can be used for caching and recovery |
| CreateTab(string pageUrl, RenderFragment? title = null) | Create a tab, but do not navigate to the page, and initialize the page when you navigate to the page. |
| ClosePage(string url) | Close the page with the specified url. |
| CloseOther(string url) | Close all pages except those that specify url, Cloasable=false, or Pin=true. |
| CloseAll() | Close all pages except those that Cloasable=false or Pin=true. |
| CloseCurrent() | Close current page. |
| Update() | Update the state of current tab. When the variable referenced in GetPageTitle() changes, Update() needs to be called to update the tab display. |
| ReloadPage(url) | Reload the page for the specified label, allowing the page components to be reinitialized without refreshing the browser. If no url is passed, reload the current page . |