Tab

The Tabs component allows you to combine multiple Tab components together, where different tabs can be switched.

Example

First Tab

Second Tab

Third Tab

This is the content of the first tab.

Code:

<Tabs>
    <Tab title="First Tab">
        This is the content of the first tab.
    </Tab>
    <Tab title="Second Tab">
        This is the content of the second tab.
    </Tab>
        <Tab title="Third Tab">
        This is the content of the third tab.
    </Tab>
</Tabs>

You can add any number of tabs. The content of the Tab component follows Markdown syntax.

Specifying Tab Position

第一个选项卡

第二个选项卡

第三个选项卡

这是第一个选项卡中的内容.

代码：

<Tabs tabPosition="left">
    <Tab title="第一个选项卡">
        这是第一个选项卡中的内容.
    </Tab>
    <Tab title="第二个选项卡">
        这是第二个选项卡中的内容.
    </Tab>
        <Tab title="第三个选项卡">
        这是第三个选项卡中的内容.
    </Tab>
</Tabs>

Specifying Tab Size

第一个选项卡

第二个选项卡

第三个选项卡

这是第一个选项卡中的内容.

代码：

<Tabs size="small">
    <Tab title="第一个选项卡">
        这是第一个选项卡中的内容.
    </Tab>
    <Tab title="第二个选项卡">
        这是第二个选项卡中的内容.
    </Tab>
        <Tab title="第三个选项卡">
        这是第三个选项卡中的内容.
    </Tab>
</Tabs>

Parameter Description

Tabs

type

string

optional

Card Group Style

tabPosition

string

optional

Card Group Position

size

string

optional

Card Group Size

Tab

title

string

Title

required

Define the single tab title

Example#

Specifying Tab Position#

Specifying Tab Size#

Parameter Description#

Example

Specifying Tab Position

Specifying Tab Size

Parameter Description