ant-design/components/tabs/index.en-US.md
Ashkan Pourghasem cc12109d46
feat: Implement centered prop in Tabs (#24958)
* Implement centered in Tabs along with its tests and docs

* Fix build error

* Add Chinese translations and remove test case

Co-authored-by: Ashkan Pourghasem <ashkan.pourghasem@gmail.com>
2020-06-14 13:42:44 +08:00

2.7 KiB

category type title cols cover
Components Data Display Tabs 1 https://gw.alipayobjects.com/zos/antfincdn/lkI2hNEDr2V/Tabs.svg

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 functional aspects of a page.
  • Radio.Button: for secondary tabs.

API

Tabs

Property Description Type Default Version
activeKey Current TabPane's key string -
animated Whether to change tabs with animation. Only works while tabPosition="top"|"bottom" boolean | {inkBar:boolean, tabPane:boolean} true, false when type="card"
renderTabBar replace the TabBar (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement -
defaultActiveKey Initial active TabPane's key, if activeKey is not set. string -
hideAdd Hide plus icon or not. Only works while type="editable-card" boolean false
size preset tab bar size large | default | small default
centered Centers tabs boolean false 4.4.0
tabBarExtraContent Extra content in tab bar React.ReactNode -
tabBarGutter The gap between tabs number -
tabBarStyle Tab bar style object object -
tabPosition Position of tabs top | right | bottom | left top
type Basic style of tabs line | card | editable-card line
onChange Callback executed when active tab is changed Function(activeKey) {} -
onEdit Callback executed when tab is added or removed. Only works while type="editable-card" (targetKey, action): void -
onTabClick Callback executed when tab is clicked Function(key: string, event: MouseEvent) -
onTabScroll Trigger when tab scroll Function({ direction: 'left' | 'right' | 'top' | 'bottom' }) - 4.3.0
keyboard whether to turn on keyboard navigation boolean true

More option at rc-tabs option

Tabs.TabPane

Property Description Type Default
forceRender Forced render of content in tabs, not lazy render after clicking on tabs boolean false
key TabPane's key string -
tab Show text in TabPane's head string|ReactNode -
closeIcon Customize close icon in TabPane's head. Only works while type="editable-card" ReactNode -

More option at rc-tabs option