Tab Normal


Hi, this is the first tab.

This is the 2nd tab.

This is the 2nd tab.

This is the 2nd tab.

And this is the 3rd tab.

Hi, this is the first tab.

This is the 2nd tab.

This is the 2nd tab.

This is the 2nd tab.

And this is the 3rd tab.

Hi, this is the first tab.

This is the 2nd tab.

This is the 2nd tab.

This is the 2nd tab.

And this is the 3rd tab.

Tab Rotation Effect 1


Hi, this is the first tab.

This is the 2nd tab.

This is the 2nd tab.

This is the 2nd tab.

And this is the 3rd tab.

And this is the 4th tab.

And this is the 5th tab.

Tab Rotation Effect 2


Hi, this is the first tab.

This is the 2nd tab.

This is the 2nd tab.

This is the 2nd tab.

And this is the 3rd tab.

And this is the 4th tab.

API


Tabs

import {Tabs} from '@uixkit.react/components/Tabs/index.tsx';
PropertyTypeDefaultDescription
centerbooleanfalseIf true, the navigation button of the component is centered
fullwidthbooleanfalseIf true, the navigation buttons of the component will be automatically filled in the 100% width area
rotationbooleanfalseSet whether to enable the rotation layout of the component. When the value is true, the two properties of rotationRadius and rotationWrapperAngle are valid.
rotationRadiusnumber130Set the radius of rotation
rotationWrapperAnglenumber0Set the rotation angle of the entire component

Tab List

import {TabList} from '@uixkit.react/components/Tabs/index.tsx';
PropertyTypeDefaultDescription
keystring | tab-list-*-A “key” is a special string attribute you need to include when creating lists of elements. Let’s assign a key to our list of items. Must contain the string tab-list
defaultActivebooleanfalseSet an item to activate by default

Tab Panel

import {TabPanel} from '@uixkit.react/components/Tabs/index.tsx';
PropertyTypeDefaultDescription
keystring | tab-panel-*-A “key” is a special string attribute you need to include when creating lists of elements. Let’s assign a key to our list of items. Must contain the string tab-panel
defaultActivebooleanfalseSet an item to activate by default
tabpanelClassstring-Additional style name, such as uix-outer-shadow--regular

It accepts all props(include data-* attributes) which native div support.