You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

2.1 KiB

category type title cols
Components Data Display Tabs 1

Tabs make it easy to switch between different views.

When To Use

Ant Design has 3 types Tabs for different situation.

  • Card Tabs: for managing too many closeable views.
  • Normal Tabs: for functional aspects of a page.
  • RadioButton: for secondary tabs.

API

Tabs

Property Description Type Default
activeKey Current TabPane's key string _
defaultActiveKey Default actived tabPanel's key, if activeKey is not setted. -
onChange Callback when tab is switched Function -
onTabClick Callback when tab is clicked Function -
onPrevClick Callback when prev button is clicked Function
onNextClick Callback when next button is clicked Function
tabBarExtraContent Extra element in tab bar React.ReactNode -
tabBarStyle tar bar style object object -
type Basic style of tabs. Options: line, card & editable-card string line
size Tab bar size. Options: default, small. Only works while type="line". string default
tabPosition Position of tabs. Options: top, right, bottom & left string top
onEdit Callback when tab is added or removed, which is executing when set type as editable-card (targetKey, action): void -
hideAdd Hide plus icon or not, which is effective when set type as editable-card boolean false
animated Whether to change tabs with animation, this property only works with `tabPosition=top bottom` boolean | {inkBar:boolean, tabPane:boolean}

Tabs.TabPane

Property Description Type Default
key TabPane's key string _
tab Show text in TabPane's head string|ReactNode _