UST | StepOne - UI framework

Tabs

Tabs is a styled component that toogles the visible information. This holds the tab content to show.

Tabs Props

Name	Use	Type	Definition
className	optional	string	Additional class name(s) for the component.
defaultActiveTab	optional	string	Indicates the active tab when the component is rendered.
onChangeTab	optional	(_id: string) => void	Handler function that gets called when a tab is changed.
vertical	optional	boolean	Changes the tabs to be aligned vertically instead of horizontally.

TabItem

Each item is the clickable area of the tab.

TabItem Props

Name	Use	Type	Definition
id	required	string	Identifies the tab item.
title	required	string	Tab name to show.
activeTab	optional	string	Identifies if this tab is selected.
collapsed	optional	boolean	Adds the tab to the dropdown menu.
disabled	optional	boolean	Identifies if this tab is disabled.

Examples

Tabs Horizontal

This is a default variant, it can be used by implementing Tabs

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus saepe fugit perspiciatis architecto eum voluptatem fugiat error, tempore iste? Consequatur similique quia in nam pariatur illum voluptatibus sit? Nobis, quae!

Tabs Vertical

This variant can be used by implementing Tabs component with vertical attribute:

Tabs Collapsed

Also, is possible to implement the previous variants with items collapsed. In this variant will hide the item indicated from the main tab and make it available inside the dropdown menu.

This variant can be used by implementing Tabs component with TabItem childs with collapsed attribute:

States

Disabled Items

This state can be used by implementing Tabs component with TabItem childs with disabled attribute: