logo

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

Layout

Work with the Layout component and add a button to reload the current page.

expand code expand code

Title from menu

The default page label is retrieved from the menu on the current layout.

expand code expand code

Page settings

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.

expand code expand code

Dynamic title

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.

expand code expand code

Singleton Page

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.

expand code expand code

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 -
NewPageForParams 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 .
文档已更新，请点击 此处 更新。
A new version of this app is available. Click here to update.