# Tabs

- Page: https://jiguang132.com/resources/ant-design/docs/tabs
- Resource: Ant Design (https://jiguang132.com/resources/ant-design.md)
- All guides: https://jiguang132.com/resources/ant-design/docs.md

Tabs make it easy to explore and 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](/components/radio/#radio-demo-radiobutton): for secondary tabs.

## Examples


- Basic · `basic`
- Disabled · `disabled`
- Centered · `centered`
- Icon · `icon`
- Indicator · `custom-indicator`
- Slide · `slide`
- Extra content · `extra`
- Size · `size`
- Placement · `placement`
- Custom Popup Search · `popupRender-Search`
- Card type tab · `card`
- Add & close tab · `editable-card`

- Customized trigger of new tab · `custom-add-trigger`
- Customized bar of tab · `custom-tab-bar`
- Draggable Tabs · `custom-tab-bar-node`
- Custom semantic dom styling · `style-class`




## API

Common props ref：[Common props](#jguang-common-props)

### Tabs


| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| activeKey | Current TabPane's key | string | - |  | × |
| addIcon | Customize add icon, only works with `type="editable-card"` | ReactNode | `<PlusOutlined />` | 4.4.0 | 5.14.0 |
| animated | Whether to change tabs with animation. | boolean \| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } |  | × |
| centered | Centers tabs | boolean | false | 4.4.0 | × |
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-dom), string> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), string> | - |  | 6.0.0 |
| defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set | string | `The key of first tab` |  | × |
| hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | false |  | × |
| indicator | Customize `size` and `align` of indicator | { size?: number \| (origin: number) => number; align: `start` \| `center` \| `end`; } | - | 5.13.0 | 5.13.0 |
| items | Configure tab content | [TabItemType](#tabitemtype) | [] | 4.23.0 | × |
| more | Customize the collapse menu | [MoreProps](#moreprops) | { icon: `<EllipsisOutlined />` , trigger: 'hover' } |  | `more.icon`: 5.17.0 |
| removeIcon | The custom icon of remove, only works with `type="editable-card"` | ReactNode | `<CloseOutlined />` | 5.15.0 | 5.15.0 |
| ~~popupClassName~~ | `className` for more dropdown, please use `classNames.popup` instead | string | - | 4.21.0 | × |
| renderTabBar | Replace the TabBar | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - |  | × |
| size | Preset tab bar size | `large` \| `medium` \| `small` | `medium` |  | × |
| styles |  Customize inline style for each semantic structure inside the component. Supports object or function.  | Record<[SemanticDOM](#semantic-dom), CSSProperties> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), CSSProperties> | - |  | 6.0.0 |
| tabBarExtraContent | Extra content in tab bar | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 | × |
| tabBarGutter | The gap between tabs | number | - |  | × |
| tabBarStyle | Tab bar style object | CSSProperties | - |  | × |
| tabPlacement | Placement of tabs | `top` \| `end` \| `bottom` \| `start` | `top` |  | × |
| ~~tabPosition~~ | Position of tabs, please use `tabPlacement` instead | `top` \| `right` \| `bottom` \| `left` | `top` |  | × |
| ~~destroyInactiveTabPane~~ | Whether destroy inactive TabPane when change tab, use `destroyOnHidden` instead | boolean | false |  | × |
| destroyOnHidden | Whether destroy inactive TabPane when change tab | boolean | false | 5.25.0 | × |
| type | Basic style of tabs | `line` \| `card` \| `editable-card` | `line` |  | × |
| onChange | Callback executed when active tab is changed | (activeKey: string) => void | - |  | × |
| onEdit | Callback executed when tab is added or removed. Only works while `type="editable-card"` | (action === 'add' ? event : targetKey, action) => void | - |  | × |
| onTabClick | Callback executed when tab is clicked | (key: string, event: MouseEvent) => void | - |  | × |
| onTabScroll | Trigger when tab scroll | ({ direction: `left` \| `right` \| `top` \| `bottom` }) => void | - | 4.3.0 | × |

More option at [@rc-component/tabs](https://github.com/react-component/tabs#tabs)

### TabItemType

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| closeIcon | Customize close icon in TabPane's head. Only works while `type="editable-card"`. 5.7.0: close button will be hidden when setting to `null` or `false` | ReactNode | - |  |
| ~~destroyInactiveTabPane~~ | Whether destroy inactive TabPane when change tab, use `destroyOnHidden` instead | boolean | false | 5.11.0 |
| destroyOnHidden | Whether destroy inactive TabPane when change tab | boolean | false | 5.25.0 |
| disabled | Set TabPane disabled | boolean | false |  |
| forceRender | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false |  |
| key | TabPane's key | string | - |  |
| label | Tab header text element | ReactNode | - |  |
| icon | Tab header icon element | ReactNode | - | 5.12.0 |
| children | Tab content element | ReactNode | - |  |
| closable | Whether a close (x) button is visible, Only works while `type="editable-card"` | boolean | true |  |

### MoreProps

| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| icon | The custom icon | ReactNode | - |  |
| popupRender | Customize the dropdown menu render | (menu: ReactElement, info: { restTabs: Tab[], onClose: () => void }) => ReactElement | - | 6.6.0 |
| [DropdownProps](/components/dropdown#api) | Support other Dropdown props |  |  |  |

## Semantic DOM

| Semantic node | Native description | Version |
| --- | --- | --- |
| `root` | Root element with basic tab container styles, layout and direction control | — |
| `header` | Header element with tab navigation header layout, background, borders and other styles | — |
| `item` | Item element with relative positioning, padding, colors, text ellipsis, border-radius, transitions and other tab item styles and interactive effects | — |
| `remove` | Remove button element with editable tab close button size, color, hover state and other interactive feedback styles | 6.4.0 |
| `indicator` | Indicator element with indicator bar color, position, dimensions, transitions and other active state indication styles | — |
| `body` | Body element with tab panel container layout, animation and size control styles | — |
| `content` | Content element with single tab panel layout, padding and other content display styles | — |
| `popup.root` | Popup menu element with dropdown absolute positioning, z-index, display control, max-height, scrolling and other styles | — |

Semantic description source: `vendor/components/tabs/demo/_semantic.tsx`

## Design Token

Types, inheritance and declarations retain the pinned native source. Defaults are computed by the native theme and may be overridden by ConfigProvider; this table does not invent static defaults.

| Token | Type | Native description |
| --- | --- | --- |
| `zIndexPopup` | `number` | z-index of dropdown menu |
| `cardBg` | `string` | Background color of card tab |
| `cardHeight` | `number` | Height of card tab |
| `cardHeightSM` | `number` | Height of small card tab |
| `cardHeightLG` | `number` | Height of large card tab |
| `cardPadding` | `string` | Padding of card tab |
| `cardPaddingSM` | `string` | Padding of small card tab |
| `cardPaddingLG` | `string` | Padding of large card tab |
| `titleFontSize` | `number` | Font size of title |
| `titleFontSizeLG` | `number` | Font size of large title |
| `titleFontSizeSM` | `number` | Font size of small title |
| `inkBarColor` | `string` | Color of indicator |
| `horizontalMargin` | `string` | Horizontal margin of horizontal tab |
| `horizontalItemGutter` | `number` | Horizontal gutter of horizontal tab |
| `horizontalItemMargin` | `string` | Horizontal margin of horizontal tab item |
| `horizontalItemMarginRTL` | `string` | Horizontal margin of horizontal tab item (RTL) |
| `horizontalItemPadding` | `string` | Horizontal padding of horizontal tab item |
| `horizontalItemPaddingLG` | `string` | Horizontal padding of large horizontal tab item |
| `horizontalItemPaddingSM` | `string` | Horizontal padding of small horizontal tab item |
| `verticalItemPadding` | `string` | Vertical padding of vertical tab item |
| `verticalItemMargin` | `string` | Vertical margin of vertical tab item |
| `itemColor` | `string` | Text color of tab |
| `itemActiveColor` | `string` | Text color of active tab |
| `itemHoverColor` | `string` | Text color of hover tab |
| `itemSelectedColor` | `string` | Text color of selected tab |
| `cardGutter` | `number` | Gutter of card tab |

Declaration source: `vendor/components/tabs/style/index.ts`

```ts
import { unit } from '@ant-design/cssinjs';

import type { CSSObject } from '@ant-design/cssinjs';

import { genFocusOutline, genFocusStyle, resetComponent, textEllipsis } from '../../style';

import { slideDownIn, slideDownOut, slideUpIn, slideUpOut } from '../../style/motion';

import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';

import { genStyleHooks, mergeToken } from '../../theme/internal';

import genMotionStyle from './motion';

export interface ComponentToken {
  /**
   * @desc 下拉菜单 z-index
   * @descEN z-index of dropdown menu
   */
  zIndexPopup: number;
  /**
   * @desc 卡片标签页背景色
   * @descEN Background color of card tab
   */
  cardBg: string;
  /**
   * @desc 卡片标签页高度
   * @descEN Height of card tab
   */
  cardHeight: number;
  /**
   * @desc 小尺寸卡片标签页高度
   * @descEN Height of small card tab
   */
  cardHeightSM: number;
  /**
   * @desc 大尺寸卡片标签页高度
   * @descEN Height of large card tab
   */
  cardHeightLG: number;
  /**
   * @desc 卡片标签页内间距
   * @descEN Padding of card tab
   */
  cardPadding: string;
  /**
   * @desc 小号卡片标签页内间距
   * @descEN Padding of small card tab
   */
  cardPaddingSM: string;
  /**
   * @desc 大号卡片标签页内间距
   * @descEN Padding of large card tab
   */
  cardPaddingLG: string;
  /**
   * @desc 标签页标题文本大小
   * @descEN Font size of title
   */
  titleFontSize: number;
  /**
   * @desc 大号标签页标题文本大小
   * @descEN Font size of large title
   */
  titleFontSizeLG: number;
  /**
   * @desc 小号标签页标题文本大小
   * @descEN Font size of small title
   */
  titleFontSizeSM: number;
  /**
   * @desc 指示条颜色
   * @descEN Color of indicator
   */
  inkBarColor: string;
  /**
   * @desc 横向标签页外间距
   * @descEN Horizontal margin of horizontal tab
   */
  horizontalMargin: string;
  /**
   * @desc 横向标签页标签间距
   * @descEN Horizontal gutter of horizontal tab
   */
  horizontalItemGutter: number;
  /**
   * @desc 横向标签页标签外间距
   * @descEN Horizontal margin of horizontal tab item
   */
  horizontalItemMargin: string;
  /**
   * @desc 横向标签页标签外间距（RTL）
   * @descEN Horizontal margin of horizontal tab item (RTL)
   */
  horizontalItemMarginRTL: string;
  /**
   * @desc 横向标签页标签内间距
   * @descEN Horizontal padding of horizontal tab item
   */
  horizontalItemPadding: string;
  /**
   * @desc 大号横向标签页标签内间距
   * @descEN Horizontal padding of large horizontal tab item
   */
  horizontalItemPaddingLG: string;
  /**
   * @desc 小号横向标签页标签内间距
   * @descEN Horizontal padding of small horizontal tab item
   */
  horizontalItemPaddingSM: string;
  /**
   * @desc 纵向标签页标签内间距
   * @descEN Vertical padding of vertical tab item
   */
  verticalItemPadding: string;
  /**
   * @desc 纵向标签页标签外间距
   * @descEN Vertical margin of vertical tab item
   */
  verticalItemMargin: string;
  /**
   * @desc 标签文本颜色
   * @descEN Text color of tab
   */
  itemColor: string;
  /**
   * @desc 标签激活态文本颜色
   * @descEN Text color of active tab
   */
  itemActiveColor: string;
  /**
   * @desc 标签悬浮态文本颜色
   * @descEN Text color of hover tab
   */
  itemHoverColor: string;
  /**
   * @desc 标签选中态文本颜色
   * @descEN Text color of selected tab
   */
  itemSelectedColor: string;
  /**
   * @desc 卡片标签间距
   * @descEN Gutter of card tab
   */
  cardGutter: number;
}

export interface TabsToken extends FullToken<'Tabs'> {
  tabsCardPadding: string;
  dropdownEdgeChildVerticalPadding: number;
  tabsNavWrapPseudoWidth: number;
  tabsDropdownHeight: number | string;
  tabsDropdownWidth: number | string;
  tabsHorizontalItemMargin: string;
  tabsHorizontalItemMarginRTL: string;
}
```


## Shared native props {#jguang-common-props}


> Tips: The following generic properties apply to most antd components; those not supported are described separately.

| Property | Description | Type | Default |
| --- | --- | --- | --- |
| style | The additional style | CSSProperties | - |
| className | The additional css class | string | - |
| rootClassName | ClassName on the root element | string | - |
| autoFocus | Auto focus when component mounted, only effective for focusable elements like forms, links, etc. | boolean | false |


## Install and reproduce an example

```bash
npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23
```

Use ConfigProvider and native App; configure dayjs locale separately. Each example lists its complete source files and additional pinned dependencies in View code. Example names select demos, not universal component props. See the resource setup guide for theme, locale and SSR.

## Native type references

The source viewer includes unchanged native implementations and the following source declarations. Inherited types remain in their native packages. English source comments are preserved as code reference.

- `vendor/components/tabs/TabPane.ts`
- `vendor/components/tabs/index.tsx`
- `vendor/components/tabs/style/index.ts`

## Source and license

https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd

Original bilingual prose and executable examples are retained. Website-only embeds and token tables are expanded locally. Ant Design is MIT; separately listed dependency notices also apply. Upload previews block outbound requests and do not provide a backend.

---

Index of all JGuang resources: https://jiguang132.com/llms.txt