# Tabs

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

Organize content in the same view, and view content one view at a time. You can switch tabs to view other content.

## Install

```bash
npm install @arco-design/web-react@2.66.18
```

Import `@arco-design/web-react/dist/css/arco.css` at the entry and set the locale with `ConfigProvider`. React 19 projects must also import `@arco-design/web-react/es/_util/react-19-adapter` first, or imperative APIs such as Message and Modal cannot render.

## Examples

- **Basic**: Basic usage example.
- **Icon**: You can add an icon to the tab through a custom title.
- **Position**: Set the position of tabs by `tabPosition`.
- **Type**: Use `type` to set the type of the tab.
- **Extra Content**: You can add extra content on the right side of the tabs through `extra`.
- **Dynamic Tab**: Dynamically add or subtract tabs. Only effective when `type=card | card-gutter`.
- **Controlled**: Open the controlled mode through `activeTab`.
- **Nested**: Components can be nested.
- **Size**: Use `Size` to set the size of the tab.
- **Scrollable**: Support scrolling operation via scroll wheel or touch pad.
- **The active tab's scroll  position**: Support scrolling operation via scroll wheel or touch pad.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

## API

### Tabs

|Property|Description|Type|DefaultValue|Version|
|---|---|---|---|---|
|destroyOnHide|Whether to destroy the DOM structure in the TabPane when the tab is hidden. This attribute of `TabPane` has higher priority than `Tabs`.|boolean |`-`|-|
|editable|Whether to allow adding or subtracting tabs. It only effect when `type` is `card` or `card-gutter`.|boolean |`-`|-|
|headerPadding|Whether there is a horizontal margin on the tab. It only effect when `type` is `line` or `text`|boolean |`true`|2.6.0|
|justify|Height to fill the container, Only effective in horizontal mode.|boolean |`-`|-|
|lazyload|When set to `true`, hidden tabs will not be rendered when the component is mounted.|boolean |`true`|-|
|showAddButton|Whether to show the new button(Only effect when `editable` is `true`)|boolean |`true`|-|
|activeTab|The key of the currently selected tab|string |`-`|-|
|defaultActiveTab|The Tab selected by default. If not specified, the first one is selected|string |`-`|-|
|direction|The Direction of tabs. ** Warn: Please use `tabPosition` instead.**|'horizontal' \| 'vertical' |`-`|-|
|inkBarSize|custom the size of underline|{ width?: CSSProperties['width']; height?: CSSProperties['height'] } |`-`|2.54.0|
|overflow|When there are too many tabs, select scroll or drop-down to display tabs|'scroll' \| 'dropdown' |`scroll`|-|
|scrollPosition|The scroll position of the selected tab, the default auto will scroll the activeTab to the visible area, but will not adjust the position intentionally|'start' \| 'end' \| 'center' \| 'auto' \| number |`auto`|2.25.0|
|size|Size of tabs|'mini' \| 'small' \| 'default' \| 'large' |`-`|-|
|tabPosition|Position of tabs|'left' \| 'right' \| 'top' \| 'bottom' |`top`|-|
|type|Type of tabs|'line' \| 'card' \| 'card-gutter' \| 'text' \| 'rounded' \| 'capsule' |`line`|-|
|addButton|Custom add button|ReactNode |`-`|2.16.0|
|deleteButton|Custom delete button|ReactNode |`-`|2.16.0|
|extra|Additional on the right side of the tab|ReactNode |`-`|-|
|animation|Whether to turn on the transition animation|boolean \| { tabPane?: boolean; inkBar?: boolean } |`-`|-|
|className|Additional css class|string \| string[] |`-`|-|
|icons|Tab header edit/scroll/dropdown icon configuration. You can set it to `null` for icons you don't want to display|{add?: ReactNode;delete?: ReactNode;prev?: ReactNode;next?: ReactNode;dropdown?: ReactNode;} |`-`|2.15.0, `prev`,`next`,`dropdown` in `2.47.0`|
|scrollAfterEdit|Whether to automatically scroll to the selected label after the label is dynamically increased or decreased (only effective when `editable` is `true`)|{delete?: boolean;add?: boolean;} |`{ add: true, delete: true }`|2.25.0|
|style|Additional style|CSSProperties |`-`|-|
|onAddTab|Callback when click Add Button|() => void |`-`|-|
|onChange|Callback when `activeTab` changed|(key: string) => void |`-`|-|
|onClickTab|Callback when click Tab|(key: string) => void |`-`|-|
|onDeleteTab|Callback when click Delete Button|(key: string) => void |`-`|-|
|renderTabHeader|Custom Tab Header|(tabProps: [TabsProps](tabs#tabs), DefaultTabHeader: typeof TabHeader) => ReactElement |`-`|-|
|renderTabTitle|Customize tab header|(tabTitle: ReactNode,info: {key: string \| number;isActive: boolean;disabled: boolean;editable: boolean;}) => ReactNode |`-`|-|

### Tabs.TabPane

|Property|Description|Type|DefaultValue|
|---|---|---|---|
|closable|Whether to allow the tab to be closed when `editable="true"`|boolean |`-`|
|destroyOnHide|Whether to destroy the DOM structure in the TabPane when the tab is hidden.This option has priority over the `destroyOnHide` property of `Tabs`|boolean |`-`|
|disabled|Whether the TabPane is disabled|boolean |`-`|
|title|The title of Tab|string \| ReactNode  **(Required)**|`-`|
|className|Additional css class|string \| string[] |`-`|
|style|Additional style|CSSProperties |`-`|

---

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