Apq/semi-design: 快速搭建美观的 React 应用。由抖音前端与 UED 团队维护。 @ dfb4681091503a320ebaf937ea7679db3e1c1713

localeCode: en-US order: 56 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

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 .

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 <br/>
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

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>
        );
    }
}

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>
        );
    }
}

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>
        );
    }
}

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

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）

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

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.

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.

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.

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

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>
            </>
        );
    }
}

Disable

Disable one tab.

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.

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.

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>
        );
    }
}

Dynamic Update

You can add events to update tabBar dynamically.

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.

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	boolean	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	(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

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。

index-en-US.md 30 KB History Raw