Ant Design Blazor
Tabs
Tabs make it easy to switch between different views.
When To Use
Ant Design has 3 types of Tabs for different situations.
- Card Tabs: for managing too many closeable views.
- Normal Tabs: for EventCallbackal aspects of a page.
- RadioButton: for secondary tabs.
Supports keyboard navigation
Keyboard navigation is available when the focus is on the tab.
- ArrowLeft: navigate to previous tab
- ArrowRight: navigate to next tab
- ArrowUp: navigate to first tab
- ArrowDown: navigate to last tab
- Enter: navigate to currently focused tab
Examples
Default activate first tab.
Disabled a tab.
Centered tabs.
The Tab with Icon.
In order to fit in more tabs, they can slide left and right (or up and down).
You can add extra actions to the right or left or even both side of Tabs.
Large size tabs are usually used in page header, and small size could be used in Modal.
Tab's position: left, right, top or bottom.
Another type of Tabs, which doesn't support vertical mode.
Only card type Tabs support adding & closable. +Use closable={false} to disable close.
Should be used at the top of container, needs to override styles.
Hide default plus icon, and bind event for customized trigger.
Use react-sticky.
Use Draggable to make tabs draggable.
Use the ContextMenu template in the TabPane to specify the content of the right-click menu.
Tabs API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| ChildContent | ParameterContent for tabs. Should include TabPane elements |
RenderFragment | -- |
| ActiveKey | ParameterCurrent TabPane's AntDesign.TabPane.Key |
String | -- |
| ActiveKeyChanged | ParameterCallback executed when the active tab changes | EventCallback<String> | -- |
| Animated | ParameterWhether to change tabs with animation. Only works while AntDesign.Tabs.TabPosition = AntDesign.TabPosition.Top or AntDesign.TabPosition.Bottom |
Boolean | -- |
| InkBarAnimated | ParameterWhether the ink bar is animated | Boolean | true |
| RenderTabBar | ParameterReplace the TabBar | Object | -- |
| DefaultActiveKey | ParameterInitial active TabPane's AntDesign.TabPane.Key, if AntDesign.Tabs.ActiveKey is not set |
String | -- |
| HideAdd | ParameterHide plus icon or not. Only works while AntDesign.Tabs.Type = AntDesign.TabType.EditableCard |
Boolean | false |
| Size | ParameterPreset tab bar size | TabSize | TabSize.Default |
| TabBarExtraContent | ParameterExtra content in tab bar | RenderFragment | -- |
| TabBarExtraContentLeft | ParameterExtra content to the left of the tab bar | RenderFragment | -- |
| TabBarExtraContentRight | ParameterExtra content to the right of the tab bar | RenderFragment | -- |
| TabBarGutter | ParameterThe gap between tabs | Int32 | 0 |
| TabBarStyle | ParameterTab bar style object | String | -- |
| TabBarClass | ParameterTab bar css class | String | -- |
| TabPosition | ParameterPosition of tabs | TabPosition | TabPosition.Top |
| Type | ParameterBasic style of tabs | TabType | TabType.Line |
| OnChange | ParameterCallback executed when active tab is changed | EventCallback<String> | -- |
| OnEdit | ParameterCallback executed when tab is added or removed. Only works while AntDesign.Tabs.Type = AntDesign.TabType.EditableCard |
Func<String, String, Task<Boolean>> | -- |
| OnClose | ParameterCallback when tab is closed | EventCallback<String> | -- |
| OnAddClick | ParameterCallback executed when add button clicked | EventCallback | -- |
| AfterTabCreated | ParameterCallback executed after a tab is created | EventCallback<String> | -- |
| OnTabClick | ParameterCallback executed when tab is clicked | EventCallback<String> | -- |
| Draggable | ParameterMake tabs draggable | Boolean | -- |
| Centered | ParameterIf tabs are centered or not | Boolean | false |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |
| Method Signature | Return Type | Description |
|---|---|---|
| GoTo(Int32 tabIndex) | void | Activate the tab with the specified index |
| Next() | void | Move to next tab |
| Previous() | void | Move to previous tab |
| ActivatePane(String key) | void | Activate the specified tab |
TabPane API#
| Property | Description | Type | Default Value |
|---|---|---|---|
| ForceRender | ParameterForced render of content in tabs, not lazy render after clicking on tabs | Boolean | false |
| Key | ParameterTabPane's key | String | -- |
| Tab | ParameterShow text in TabPane's head |
String | -- |
| TabTemplate | ParameterTemplate of TabPane's head | RenderFragment | -- |
| ChildContent | Parameter | RenderFragment | -- |
| TabContextMenu | ParameterTemplate for customer context menu | RenderFragment | -- |
| Disabled | ParameterIf the tab is disabled | Boolean | -- |
| Closable | ParameterIf the tab is closable | Boolean | true |
| Id | ParameterID for the component's HTML | String | Uniquely Generated ID |
| Class | ParameterSpecifies one or more class names for an DOM element. | String | -- |
| Style | ParameterSpecifies an inline style for a DOM element. | String | -- |
| RefBack | ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. |
ForwardRef | -- |