---
localeCode: en-US
order: 60
category: Navigation
title: Tabs
subTitle: Tabs
icon: doc-tabs
brief: When the content needs to be grouped and displayed in different modules or pages, you could use Tabs to switch between different groups or pages
---

## Demos

### How to import

```jsx
import { Tabs, TabPane } from '@douyinfe/semi-ui';
```

### Basic Usage

Tbs supports three types of styles: `line`, `button`, `card`, and `slash`. By default, the first tab is selected.

Tabs supports two declare ways, and the rendering process of the two is different:

-   Pass the array of objects through `tabList`, when using `tabList`, only render the currently passed node each time
-   Or use `<TabPane>` to explicitly pass in item by item. When using `<TabPane>`, all panels will be rendered by default. You can set `keepDOM={false}` to only render the current panel, and there will be no animation effect at this time .

<Notice title='Notice'>

1. When tabList and TabPane Children are used at the same time, the data passed in through tabList will be rendered first. It is not recommended to configure both
2. When using TabPane Children, TabPane must be a direct child element of Tabs, otherwise Tabs will not be able to correctly collect related attributes such as itemKey and other subcomponents

</Notice>

```jsx live=true
import React from 'react';
import { Tabs, TabPane } from '@douyinfe/semi-ui';

class App extends React.Component {
    render() {
        return (
            <div>
                <Tabs type="line">
                    <TabPane tab="Document" itemKey="1">
                        <h3>Document</h3>
                        <p style={{ lineHeight: 1.8 }}>
                            Semi Design is a design system developed and maintained by IES Front-end Team and UED Team
                        </p>
                        <p style={{ lineHeight: 1.8 }}>
                            Semi Design create a consistent, good-looking, easy-to-use, and efficient user experience
                            with a user-centric, content-first, and human-friendly design system.
                        </p>
                        <ul>
                            <li>
                                <p>Content-first</p>
                            </li>
                            <li>
                                <p>Customized theming</p>
                            </li>
                            <li>
                                <p>Internationalized</p>
                            </li>
                            <li>
                                <p>Humanism</p>
                            </li>
                        </ul>
                    </TabPane>
                    <TabPane tab="Quick Start" itemKey="2">
                        <h3>Quick Start</h3>
                        <p style={{ lineHeight: 1.8 }}>
                            If it is a new project, it is recommended that you use Eden to initialize the project and
                            initialize the project type to select the React direction.
                        </p>
                        <pre
                            style={{
                                margin: '24px 0',
                                padding: '20px',
                                border: 'none',
                                whiteSpace: 'normal',
                                borderRadius: 'var(--semi-border-radius-medium)',
                                color: 'var(--semi-color-text-1)',
                                backgroundColor: 'var(--semi-color-fill-0)',
                            }}
                        >
                            <code>yarn add @douyinfe/semi-ui</code>
                        </pre>
                    </TabPane>
                    <TabPane tab="Help" itemKey="3">
                        <h3>Help</h3>
                        <p style={{ lineHeight: 1.8, color: 'var(--semi-color-text-0)', fontWeight: 600 }}>
                            Q: Who should I look for if there are new component requirements, or existing component does
                            not meet my needs?
                        </p>
                        <p style={{ lineHeight: 1.8, color: 'var(--semi-color-text-1)' }}>
                            {`Give feedbacks in the upper right corner, submit an Issue, describe your needs as well as
                            the business scenario. We'll handle these issues with priorities.`}
                        </p>
                        <p style={{ lineHeight: 1.8, color: 'var(--semi-color-text-0)', fontWeight: 600 }}>
                            Q: Have questions when using components?
                        </p>
                        <p style={{ lineHeight: 1.8, color: 'var(--semi-color-text-1)' }}>
                            Welcome to ask anything in our Lark customer service group.
                        </p>
                    </TabPane>
                </Tabs>
            </div>
        );
    }
}
```

```jsx live=true
import React from 'react';
import { Tabs, TabPane } from '@douyinfe/semi-ui';

class App extends React.Component {
    render() {
        return (
            <Tabs type="button">
                <TabPane tab="Document" itemKey="1">
                    Document
                </TabPane>
                <TabPane tab="Quick Start" itemKey="2">
                    Quick Start
                </TabPane>
                <TabPane tab="Help" itemKey="3">
                    Help
                </TabPane>
            </Tabs>
        );
    }
}
```

```jsx live=true
import React from 'react';
import { Tabs } from '@douyinfe/semi-ui';

class TabDemo extends React.Component {
    constructor() {
        super();
        this.state = { key: '1' };
        this.onTabClick = this.onTabClick.bind(this);
    }

    onTabClick(key, type) {
        this.setState({ [type]: key });
    }

    render() {
        // eslint-disable-next-line react/jsx-key
        const contentList = [<div>Document</div>, <div>Quick Start</div>, <div>Help</div>];
        const tabList = [
            { tab: 'Document', itemKey: '1' },
            { tab: 'Quick Start', itemKey: '2' },
            { tab: 'Help', itemKey: '3' },
        ];
        return (
            <Tabs
                type="card"
                tabList={tabList}
                onChange={key => {
                    this.onTabClick(key, 'key');
                }}
            >
                {contentList[this.state.key - 1]}
            </Tabs>
        );
    }
}
```

```jsx live=true
import React from 'react';
import { Tabs } from '@douyinfe/semi-ui';

class TabDemo extends React.Component {
    constructor() {
        super();
        this.state = { key: '1' };
        this.onTabClick = this.onTabClick.bind(this);
    }

    onTabClick(key, type) {
        this.setState({ [type]: key });
    }

    render() {
        // eslint-disable-next-line react/jsx-key
        const contentList = [<div>Document</div>, <div>Quick Start</div>, <div>Help</div>];
        const tabList = [
            { tab: 'Document', itemKey: '1' },
            { tab: 'Quick Start', itemKey: '2' },
            { tab: 'Help', itemKey: '3' },
        ];
        return (
            <Tabs
                type="slash"
                tabList={tabList}
                onChange={key => {
                    this.onTabClick(key, 'key');
                }}
            >
                {contentList[this.state.key - 1]}
            </Tabs>
        );
    }
}
```

### With Icon

```jsx live=true
import React from 'react';
import { Tabs, TabPane } from '@douyinfe/semi-ui';
import { IconFile, IconGlobe, IconHelpCircle } from '@douyinfe/semi-icons';

class App extends React.Component {
    render() {
        return (
            <Tabs>
                <TabPane
                    tab={
                        <span>
                            <IconFile />
                            Document
                        </span>
                    }
                    itemKey="1"
                >
                    Document
                </TabPane>
                <TabPane
                    tab={
                        <span>
                            <IconGlobe />
                            Quick Start
                        </span>
                    }
                    itemKey="2"
                >
                    Quick Start
                </TabPane>
                <TabPane
                    tab={
                        <span>
                            <IconHelpCircle />
                            Help
                        </span>
                    }
                    itemKey="3"
                >
                    Help
                </TabPane>
            </Tabs>
        );
    }
}
```

### More with Dropdown

Supports merging redundant tabs into a `more` drop-down menu. Just pass in a number for `more`. The number represents the number of tabs included in the drop-down menu. **（>=v2.59.0）**

```jsx live=true dir=column
import React from 'react';
import { Tabs, TabPane } from '@douyinfe/semi-ui';

function Demo() {
    return (
        <Tabs more={4} style={{ width: '60%', margin: '20px' }} type="card">
            {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (
                <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}>
                    Content of card tab {i}
                </TabPane>
            ))}
        </Tabs>
    );
}
```

Advanced configuration is also supported, passing the object to `more`, and it can be passed in

-   `count`: Represents the number of Tabs in the income drop-down menu
-   `render`: Customize the rendering function of Trigger. The returned ReactNode will be rendered as the Trigger of the drop-down menu.
-   `dropdownProps`: Incoming DropDown Props will be transparently transmitted to the drop-down menu. If you need to customize the drop-down menu, use the render method in dropdownProps

```jsx live=true dir=column
import React from 'react';
import { Tabs, TabPane, Button } from '@douyinfe/semi-ui';

function Demo() {
    return (
        <Tabs
            more={{
                count: 4,
                render: () => {
                    return <Button type='tertiary'>Click to show More</Button>;
                },
                dropdownProps: { trigger: 'click', position: 'bottomRight' },
            }}
            style={{ width: '60%', margin: '20px' }}
            type="card"
        >
            {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (
                <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}>
                    Content of card tab {i}
                </TabPane>
            ))}
        </Tabs>
    );
}
```

### Vertical mode

When `type` is `line`, `card`, or `button`, horizontal and vertical modes are supported, `tabPosition='left|top'`，default is top. When `type` is `slash`, only horizontal mode is supported.

```jsx live=true
import React from 'react';
import { Tabs, TabPane, Radio, RadioGroup } from '@douyinfe/semi-ui';
import { IconFile, IconGlobe, IconHelpCircle } from '@douyinfe/semi-icons';

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            type: 'line',
        };
    }

    onSelect(e) {
        this.setState({
            type: e.target.value,
        });
    }

    render() {
        return (
            <>
                <RadioGroup
                    onChange={e => this.onSelect(e)}
                    value={this.state.type}
                    type="button"
                    style={{
                        display: 'flex',
                        width: 200,
                        justifyContent: 'center',
                    }}
                >
                    <Radio value={'line'}>Line</Radio>
                    <Radio value={'card'}>Card</Radio>
                    <Radio value={'button'}>Button</Radio>
                </RadioGroup>
                <br />
                <br />
                <Tabs tabPosition="left" type={this.state.type}>
                    <TabPane
                        tab={
                            <span>
                                <IconFile />
                                Document
                            </span>
                        }
                        itemKey="1"
                    >
                        <div style={{ padding: '0 24px' }}> Document </div>
                    </TabPane>
                    <TabPane
                        tab={
                            <span>
                                <IconGlobe />
                                Quick Start
                            </span>
                        }
                        itemKey="2"
                    >
                        <div style={{ padding: '0 24px' }}>Quick Start</div>
                    </TabPane>
                    <TabPane
                        tab={
                            <span>
                                <IconHelpCircle />
                                Help
                            </span>
                        }
                        itemKey="3"
                    >
                        <div style={{ padding: '0 24px' }}>Help</div>
                    </TabPane>
                </Tabs>
            </>
        );
    }
}
```

### Scrollable Tabs

**v>= 1.1.0**  
You could use `collapsible` for a scrollable tabs with dropdown menu. Horizontal mode only.

```jsx live=true dir=column
import React from 'react';
import { Tabs, TabPane } from '@douyinfe/semi-ui';

class App extends React.Component {
    render() {
        return (
            <Tabs style={{ width: '60%', margin: '20px' }} type="card" collapsible>
                {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((item, index) => (
                    <TabPane tab={`Tab-${item}`} itemKey={`Tab-${item}`} key={item}>
                        Content of card tab {index}
                    </TabPane>
                ))}
            </Tabs>
        );
    }
}
```

**Modify the scrolling rendering Arrow**

`renderArrow` modifies the Arrow, with the input parameters being the overflowed items, position, click function, and defaultNode.
 
**Attention**: The first three parameters of renderArrow are supported since 2.61.0，while defaultNode parameter is supported since 2.66.0.

```jsx live=true dir="column"
import React from 'react';
import { Tabs, TabPane, Dropdown } from '@douyinfe/semi-ui';

() => {
    const [activeKey, setActiveKey] = useState('Tab-0');
    const renderArrow = (items, pos, handleArrowClick) => {
        const style = {
            width: 32,
            height: 32,
            margin: '0 12px',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            borderRadius: '100%',
            background: 'rgba(var(--semi-grey-1), 1)',
            color: 'var(--semi-color-text)',
            cursor: 'pointer',
        };
        return (
            <Dropdown
                render={
                    <Dropdown.Menu>
                        {items.map(item => {
                            return (
                                <Dropdown.Item onClick={() => setActiveKey(item.itemKey)}>{item.itemKey}</Dropdown.Item>
                            );
                        })}
                    </Dropdown.Menu>
                }
            >
                {pos === 'start' ? (
                    <div style={style} onClick={handleArrowClick}>
                        ←
                    </div>
                ) : (
                    <div style={style} onClick={handleArrowClick}>
                        →
                    </div>
                )}
            </Dropdown>
        );
    };

    return (
        <Tabs
            renderArrow={renderArrow}
            style={{ width: '50%', margin: '20px' }}
            activeKey={activeKey}
            type="card"
            collapsible
            onChange={k => setActiveKey(k)}
        >
            {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (
                <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}>
                    Content of card tab {i}
                </TabPane>
            ))}
        </Tabs>
    );
};
```

**Modify Arrow rendering position**

Use `arrowPosition` to modify the overflow indicator position, optional start both end

```jsx live=true dir=column
import React from 'react';
import { Tabs, TabPane } from '@douyinfe/semi-ui';

class App extends React.Component {
    render() {
        return (
            <>
                <Tabs style={{ width: '60%', margin: '20px' }} type="card" collapsible arrowPosition={'start'}>
                    {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (
                        <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}>
                            Content of card tab {i}
                        </TabPane>
                    ))}
                </Tabs>
                <Tabs style={{ width: '60%', margin: '20px' }} type="card" collapsible arrowPosition={'both'}>
                    {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (
                        <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}>
                            Content of card tab {i}
                        </TabPane>
                    ))}
                </Tabs>
                <Tabs style={{ width: '60%', margin: '20px' }} type="card" collapsible arrowPosition={'end'}>
                    {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (
                        <TabPane tab={`Tab-${i}`} itemKey={`Tab-${i}`} key={i}>
                            Content of card tab {i}
                        </TabPane>
                    ))}
                </Tabs>
            </>
        );
    }
}
```

### Auto Overflow Detection

**v>= 2.97.0**

Set `collapsible="auto"` to enable automatic overflow detection. The component will automatically detect whether tabs overflow the container:
- When tabs exceed the container width or wrap to multiple lines, it automatically enables collapse mode (shows left/right arrows)
- When the container width increases or tab count decreases and all tabs can be fully displayed, it automatically exits collapse mode

This feature eliminates the need for developers to manually determine whether folding is needed, making it especially suitable for responsive layouts.

```jsx live=true dir=column
import React from 'react';
import { Tabs, TabPane, Button } from '@douyinfe/semi-ui';

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            count: 8,
        };
    }

    render() {
        const tabs = Array.from({ length: this.state.count }, (_, i) => (
            <TabPane tab={`Tab-${i + 1}`} itemKey={`${i}`} key={i}>
                Content of Tab {i + 1}
            </TabPane>
        ));

        return (
            <div>
                <div style={{ marginBottom: 12 }}>
                    <Button 
                        onClick={() => this.setState({ count: Math.max(3, this.state.count - 2) })}
                        style={{ marginRight: 8 }}
                    >
                        Reduce Tabs
                    </Button>
                    <Button 
                        onClick={() => this.setState({ count: Math.min(15, this.state.count + 2) })}
                    >
                        Increase Tabs
                    </Button>
                    <span style={{ marginLeft: 12 }}>Current tab count: {this.state.count}</span>
                </div>
                
                <div style={{ border: '1px solid var(--semi-color-border)', padding: 12, marginBottom: 16 }}>
                    <p style={{ marginBottom: 8, color: 'var(--semi-color-text-2)', fontSize: 12 }}>
                        collapsible="auto" - Auto detect overflow
                    </p>
                    <Tabs type="card" collapsible="auto">
                        {tabs}
                    </Tabs>
                </div>
                
                <div style={{ border: '1px solid var(--semi-color-border)', padding: 12, maxWidth: 400 }}>
                    <p style={{ marginBottom: 8, color: 'var(--semi-color-text-2)', fontSize: 12 }}>
                        Fixed width 400px, test with narrow container
                    </p>
                    <Tabs type="card" collapsible="auto">
                        {tabs}
                    </Tabs>
                </div>
            </div>
        );
    }
}
```

### Disable

Disable one tab.

```jsx live=true
import React from 'react';
import { Tabs, TabPane } from '@douyinfe/semi-ui';

class App extends React.Component {
    render() {
        return (
            <Tabs defaultActiveKey="1">
                <TabPane tab="Document" itemKey="1">
                    Document
                </TabPane>
                <TabPane tab="Quick Start" itemKey="2" disabled>
                    Quick Start
                </TabPane>
                <TabPane tab="Help" itemKey="3">
                    Help
                </TabPane>
            </Tabs>
        );
    }
}
```

### Extra Content

Use `tabBarExtraContent` to add extra content on the right side of tabBar.

```jsx live=true
import React from 'react';
import { Tabs, TabPane, Button } from '@douyinfe/semi-ui';

class App extends React.Component {
    render() {
        return (
            <Tabs
                defaultActiveKey="1"
                tabBarExtraContent={
                    <Button
                        onClick={() => {
                            alert('you have clicked me!');
                        }}
                    >
                        Extra Action
                    </Button>
                }
            >
                <TabPane tab="Document" itemKey="1">
                    Document
                </TabPane>
                <TabPane tab="Quick Start" itemKey="2">
                    Quick Start
                </TabPane>
                <TabPane tab="Help" itemKey="3">
                    Help
                </TabPane>
            </Tabs>
        );
    }
}
```

### Custom Render

Use `renderTabBar` to customize tabBar render behavior.

```jsx live=true
import React from 'react';
import { Tabs, TabPane } from '@douyinfe/semi-ui';

class App extends React.Component {
    render() {
        return (
            <Tabs
                defaultActiveKey="1"
                renderTabBar={(tabBarProps, DefaultTabBar) => {
                    return (
                        <div className="tab-bar-box">
                            This is a custom rendered tabBar. Current activeKey is: {tabBarProps.activeKey}
                            <DefaultTabBar {...tabBarProps} />
                        </div>
                    );
                }}
            >
                <TabPane tab="Document" itemKey="1">
                    Document
                </TabPane>
                <TabPane tab="Quick Start" itemKey="2">
                    Quick Start
                </TabPane>
                <TabPane tab="Help" itemKey="3">
                    Help
                </TabPane>
            </Tabs>
        );
    }
}
```

### Drag and Drop Reordering

You can implement drag-and-drop tab reordering using `renderTabBar` API combined with third-party drag libraries like [@dnd-kit](https://docs.dndkit.com/).

<Notice title='Prerequisites'>

Install dnd-kit dependencies first:

```bash
npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities
```

</Notice>

```jsx live=true noInline=true hideInDSM
import React, { useState } from 'react';
import { Tabs, TabPane } from '@douyinfe/semi-ui';
import { DndContext, closestCenter, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
import { arrayMove, SortableContext, horizontalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
import { CSS as cssDndKit } from '@dnd-kit/utilities';

// Reuse Semi's built-in TabItem for native styling; wrap with useSortable to inject ref/listeners/transform
const SortableTabItem = ({ item, selected, size, type, tabPosition, onClick }) => {
    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
        id: item.itemKey,
        disabled: item.disabled,
    });
    const style = {
        transform: cssDndKit.Transform.toString(transform),
        transition,
        cursor: item.disabled ? 'not-allowed' : 'grab',
        opacity: isDragging ? 0.5 : 1,
        display: 'inline-flex',
    };
    return (
        <Tabs.TabItem
            ref={setNodeRef}
            style={style}
            itemKey={item.itemKey}
            tab={item.tab}
            icon={item.icon}
            disabled={item.disabled}
            selected={selected}
            size={size}
            type={type}
            tabPosition={tabPosition}
            onClick={onClick}
            {...attributes}
            {...listeners}
        />
    );
};

function DraggableTabsDemo() {
    const [activeKey, setActiveKey] = useState('1');
    const [items, setItems] = useState([
        { itemKey: '1', tab: 'Document', content: 'Document content' },
        { itemKey: '2', tab: 'Table', content: 'Table content' },
        { itemKey: '3', tab: 'Slides', content: 'Slides content' },
        { itemKey: '4', tab: 'Form', content: 'Form content' },
    ]);

    const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));

    const handleDragEnd = ({ active, over }) => {
        if (over && active.id !== over.id) {
            setItems(prev => {
                const oldIndex = prev.findIndex(i => i.itemKey === active.id);
                const newIndex = prev.findIndex(i => i.itemKey === over.id);
                return arrayMove(prev, oldIndex, newIndex);
            });
        }
    };

    const renderTabBar = (tabBarProps) => {
        const { type = 'line', size = 'medium', tabPosition = 'top' } = tabBarProps;
        const barCls = `semi-tabs-bar semi-tabs-bar-${type} semi-tabs-bar-${tabPosition}`;
        return (
            <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
                <SortableContext
                    items={items.map(i => i.itemKey)}
                    strategy={horizontalListSortingStrategy}
                >
                    <div className={barCls} role="tablist">
                        {items.map(item => (
                            <SortableTabItem
                                key={item.itemKey}
                                item={item}
                                selected={activeKey === item.itemKey}
                                size={size}
                                type={type}
                                tabPosition={tabPosition}
                                onClick={(key) => setActiveKey(key)}
                            />
                        ))}
                    </div>
                </SortableContext>
            </DndContext>
        );
    };

    return (
        <Tabs
            type="line"
            activeKey={activeKey}
            onChange={setActiveKey}
            renderTabBar={renderTabBar}
        >
            {items.map(item => (
                <TabPane key={item.itemKey} tab={item.tab} itemKey={item.itemKey}>
                    <div style={{ padding: 20 }}>{item.content}</div>
                </TabPane>
            ))}
        </Tabs>
    );
}

render(DraggableTabsDemo);
```

### Dynamic Update

You can add events to update tabBar dynamically.

```jsx live=true
import React from 'react';
import { Tabs, TabPane, ButtonGroup, Button } from '@douyinfe/semi-ui';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.newTabIndex = 0;
        const panes = [
            { title: 'Tab 1', content: 'Content of Tab Pane 1', itemKey: '1' },
            { title: 'Tab 2', content: 'Content of Tab Pane 2', itemKey: '2' },
        ];
        this.state = {
            panes,
            activeKey: panes[0].itemKey,
        };
    }

    add() {
        const { panes } = this.state;
        const index = this.newTabIndex++;
        panes.push({ title: `New Tab ${index}`, content: 'New Tab Pane', itemKey: `newTab${index}` });
        this.setState({ panes, activeKey: `newTab${index}` });
    }

    remove() {
        const { panes } = this.state;
        if (panes.length > 1) {
            panes.pop();
            this.setState({ panes, activeKey: panes[panes.length - 1].itemKey });
        }
    }

    handleChange(activeKey) {
        this.setState({ activeKey });
    }

    render() {
        const { panes, activeKey } = this.state;
        return (
            <Tabs
                defaultActiveKey="1"
                activeKey={activeKey}
                onChange={this.handleChange.bind(this)}
                tabBarExtraContent={
                    <ButtonGroup>
                        <Button onClick={() => this.add()}>Add</Button>
                        <Button onClick={() => this.remove()}>Delete</Button>
                    </ButtonGroup>
                }
            >
                {panes.map(pane => (
                    <TabPane tab={pane.title} itemKey={pane.itemKey} key={pane.itemKey}>
                        {pane.content}
                    </TabPane>
                ))}
            </Tabs>
        );
    }
}
```

### Closeable

Close a tab in the tab bar. Only card style tabs support the close option. Use `closable={true}` to turn it on.

```jsx live=true
import React from 'react';
import { Tabs, TabPane } from '@douyinfe/semi-ui';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tabList: [
                { tab: 'Doc', itemKey: '1', text: 'Doc', closable: true },
                { tab: 'Quick Start', itemKey: '2', text: 'Quick Start', closable: true },
                { tab: 'Help', itemKey: '3', text: 'Help' },
            ],
        };
    }
    close(key) {
        const newTabList = [...this.state.tabList];
        const closeIndex = newTabList.findIndex(t => t.itemKey === key);
        newTabList.splice(closeIndex, 1);
        this.setState({ tabList: newTabList });
    }
    render() {
        return (
            <Tabs type="card" defaultActiveKey="1" onTabClose={this.close.bind(this)}>
                {this.state.tabList.map(t => (
                    <TabPane closable={t.closable} tab={t.tab} itemKey={t.itemKey} key={t.itemKey}>
                        {t.text}
                    </TabPane>
                ))}
            </Tabs>
        );
    }
}
```

## API Reference

### Tab

| Property | Description | Type | Default Value |
| --- | --- | --- | --- |
| activeKey | The itemKey value of the currently active tab page | string | None |
| className | class name | string | None |
| collapsible | collapsed Tabs, **>=1.1.0**, supports `auto` overflow detection | boolean \| 'auto' | false |
| dropdownProps | In collapsible mode, It is used to transparently transmit parameters to the Dropdown component of the drop-down menu, support since 2.66.0 | DropDownProps | { start: DropdownProps, end: DropdownProps } |
| visibleTabsStyle | Overall scrolling area style **>=2.61.0** | style: CSSProperties | None |
| contentStyle | The outer style object of the content area | CSSProperties | None |
| defaultActiveKey | Initialize the key value of the selected tab page | string | '1' |
| keepDOM | Whether to render the DOM structure of the hidden panel when using TabPane writing, **>=1.0.0** | boolean | true |
| lazyRender | Lazy rendering, only when the panel is activated will it be rendered in the DOM tree, **>=1.0.0** | boolean | false |
| more | Render a portion of the Tab into a drop-down menu ** >= 2.59.0** | number \| {count:number,render:()=>ReactNode,dropdownProps:DropDownProps} | - |
| renderTabBar | Used for secondary packaging tab bar, can be combined with third-party drag libraries to implement tab reordering | (tabBarProps: object, defaultTabBar: React.ComponentType) => ReactNode | None |
| renderArrow | Customize how overflow items indicator are rendered externally. By default, the overflow items are expanded when the arrow button is hovered. The first three parameters of renderArrow are supported since **>=2.61.0**, defaultNode is supported since **>=2.66.0** | (items: OverflowItem[],pos:"start"\|"end", handleArrowClick:()=>void, defaultNode: ReactNode)=> ReactNode | None |
| preventScroll | Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user | boolean |
| showRestInDropdown | Whether to display the collapsed Tab in the drop-down menu (only effective when collapsible is true) **>= 2.61.0** | boolean | true |
| size | Size, providing three types of `large`, `medium`, and `small`, **>=1.11.0, currently only supports linear Tabs** | string | `large` |
| style | style object | CSSProperties | None |
| tabBarExtraContent | Used to extend the content of the tab bar | ReactNode | None |
| tabList | An array of tab page objects that supports itemKey (corresponding to activeKey, tab (tab page text) and icon (tab page icon) | TabPane[] | None |
| tabPaneMotion | Whether to use animation to switch tabs | boolean | true |
| tabPosition | The position of the tab, support `top` (horizontal), `left` (vertical), **>=1.0.0** | string | `top` |
| type | The style of the label bar, optional `line`, `card`, `button` | string | `line` |
| onChange | Callback function when switching tab pages | function(activeKey: string) | None |
| onTabClick | Click event | function(key: string, e: Event) | None |
| onTabClose | executed when tab closed by user, **>=2.1.0** | function(tabKey: string) | None |
| arrowPosition | Arrow rendering position **>=2.61.0** | "start" "end" "both" | 无 |
| onVisibleTabsChange | Overflow item switching change callback **>=2.61.0** | (visibleState:Record\<string,bool\>)=>void | None |

### TabPane

| Property  | Description                                | Type          | Default Value |
| --------- | ------------------------------------------ | ------------- | ------------- |
| className | class name                                 | string        | None          |
| disabled  | Whether the tab bar is disabled            | boolean       | None          |
| icon      | Tab bar icon                               | ReactNode     | None          |
| itemKey   | corresponding to `activeKey`               | string        | None          |
| style     | style object                               | CSSProperties | None          |
| tab       | Tab page bar display text                  | ReactNode     | None          |
| closable  | whether user can close the tab **>=2.1.0** | boolean       | false         |

## Accessibility

### ARIA

-   About role
    -   TabBar has a role of `tablist`
    -   Tab in TabBar has a role of `tab`
    -   TabPane has a role of `tabpanel`
-   aria-orientation: Indicates TabBar's orientation, can be `vertical` or `horizontal`. When tabPosition is `left`,aria-orientation will be `vertical`, when tabPosition is `top`, aria-orientation will be `horizontal`.
-   aria-disabled: When TabPane is disabled, the related Tab's aria-disabled will be set to true.
-   aria-selected: Indicates whether the Tab is selected.
-   aria-controls: Indicates the TabPane controlled by the Tab
-   aria-labelledby: Indicates the element labels the TabPane

### Keyboard and Focus

WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/

-   Tabs can be given focus, except for disabled tabs
-   Keyboard users can use the `Tab` key to move the focus to the tab panel of the selected tab element
-   Use `left and right arrows` to toggle options when focus is on a tab element in a horizontal tab list
-   Use `up and down arrows` to toggle options when focus is on a tab element in a vertical tab list
-   When the focus is on an inactive tab element in the tab list, the `Space` or `Enter` keys can be used to activate the tab
-   When keyboard users want to focus directly on the last tab element in the tab list:
    -   Mac users: `fn` + `right arrow`
    -   Windows users: `End`
-   When keyboard users want to focus directly on the first tab element in the tab list:
    -   Mac users: `fn` + `left arrow`
    -   Windows users: `Home`
-   When a tab is allowed to be deleted:
    -   Users can use `Delete` keys to delete tab
    -   After deletion, the focus is transferred to the next element of the deleted tab element; if the deleted element has no subsequent element, it is transferred to the previous element

## Content Guidelines

-   Label copy needs to explain the label content accurately and clearly
-   Use short, easily distinguishable labels
-   try to stay within one word

## Design Token

<DesignToken/>

## FAQ

-   **Why typography with ellipses in Tabs doesn't work?**

    Because when Tabs renders TabPane, the default is to render display: none. At this point these components cannot get the correct width or height values. It is recommended to enable lazyRender in or disable keepDOM.

-   **Why are the height or width values ​​wrong when using components such as Collapse/Collapsible/Resizable Table in Tabs?**

    The reason is the same as above. In addition, if the collapse does not need animation, you can also turn off the animation effect by setting motion={false}. There is no need to get the height of the component at this point。
