logo

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.

expand code expand code

Disabled a tab.

expand code expand code

The Tab with Icon.

expand code expand code

Centered tabs.

expand code expand code

In order to fit in more tabs, they can slide left and right (or up and down).

expand code expand code

You can add extra actions to the right or left or even both side of Tabs.

expand code expand code

Large size tabs are usually used in page header, and small size could be used in Modal.

expand code expand code

Tab's position: left, right, top or bottom.

expand code expand code

Another type of Tabs, which doesn't support vertical mode.

expand code expand code

Only card type Tabs support adding & closable. +Use closable={false} to disable close.

expand code expand code

Should be used at the top of container, needs to override styles.

expand code expand code

Hide default plus icon, and bind event for customized trigger.

expand code expand code

Use react-sticky.

expand code expand code

Use Draggable to make tabs draggable.

expand code expand code

Use the ContextMenu template in the TabPane to specify the content of the right-click menu.

expand code expand code

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