Tabs AnimatedDocs on GitHub

Tab Animated Normal

The most basic style allows you to set transition animation


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.

API


Tabs Animated

import {TabsAnimated} from '@uixkit.react/components/TabsAnimated/index.tsx';
PropertyTypeDefaultDescription
----

Tab List

import {TabList} from '@uixkit.react/components/TabsAnimated/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/TabsAnimated/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.