
Tabs
A collection of data that is associated with the separation content but belongs to a different category.
Tab components are designed in the form of templates, and this component is used by adding TabItem
subcomponents to the tabItems
in the template
Set additional information during tab navigation
- Tab properties can be set when navigating using the built-in extension method
Navigator.NavigateTo("provider", "url", "text", "icon", "closable")
- Setting
@attribute [TabItemOption(Text = "LayoutPage", Icon = "fa-solid fa-font-awesome")]
inrazor
page
Q&A
- Get
TabSet
by cascading parameter - Get
TabItem
by cascading parameter
[CascadingParameter]
[NotNull]
public Tab? TabSet { get; set; }
[CascadingParameter]
[NotNull]
public TabItem? TabItem { get; set; }
Basic, concise tabs.
Demo
Set tab-style tabs by isCard='true'
.
Demo
Set tab-style tabs by IsBorderCard='true'
.
Demo
Set the tab icon by setting the Icon
property of the TabItem
component
Demo
Show the close button to the tab by setting the ShowClose
property
Demo
By setting the Placement
property to change the label position, a small arrow scrolls up and down to TabItem
switch when you change to left or right
Demo
Dynamically add/remove TabItem
by calling the component api
Demo
other components are built into the TabItem
Demo
Tab
The contents of each panel of the component remain state by default, and in this case the original data is maintained when the panel switches
Counter
Current count: 0
Weather forecast
This component demonstrates fetching data from a service.
Date | Temp. (C) | Temp. (F) | Summary |
---|---|---|---|
3/23/2023 | -8 | 18 | Chilly |
3/24/2023 | 44 | 111 | Warm |
3/25/2023 | 2 | 35 | Chilly |
3/26/2023 | 44 | 111 | Sweltering |
3/27/2023 | 40 | 103 | Bracing |
This feature allows you to click on the menu link in the sidebar and render multiple labels at the top of the data area on the right
Demo
In this example, the right the Tab
the inside of the panel remains in state, and the component reloads when it is closed and reopened
By setting the ShowExtendButtons
property to true
, turning on the left and right buttons of the component and closing the drop-down menu, it is very useful in practice
Demo
By setting the isOnlyRenderActiveTab
parameter, the component renders only the current active label
Demo
Counter
Current count: 0
By setting IsLazyLoadTabItem="true"
enable the lazy load feature
Demo
Counter
Current count: 0
customer the header UI via HeaderTemplate
Demo
Badge
in the HeaderTemplate
Counter
Current count: 0
Set the parameter Text
of TabItem
custom the tabitem's header title'
Demo
Counter
Current count: 0
Weather forecast
This component demonstrates fetching data from a service.
Date | Temp. (C) | Temp. (F) | Summary |
---|---|---|---|
3/23/2023 | 41 | 105 | Warm |
3/24/2023 | 40 | 103 | Chilly |
3/25/2023 | -13 | 9 | Scorching |
3/26/2023 | -15 | 6 | Chilly |
3/27/2023 | 1 | 33 | Warm |
Reset the title of this TabItem
by click the button
Set the parameter by TabItem
instance method SetHeader
Demo
Reset the title of this TabItem
by click the button
Attributes
Method
B station related video link
交流群