Gravity
Search
K

Tabs

Tabs are a great way to simplify complex user interfaces by showing only groups of elements when required.
To create a tabbed view, wrap all the components in a <TabView> component.

Preview

Code

<TabView name='Billing' labels={['Plan', 'Card Details']}>
<Card className={ props.className }/>
<Card className={ props.className }/>
</TabView
You must pass the name prop in order for the state to be saved across view changes. You must also pass the className prop down to any direct children.

Props

Prop
Description
Required
Value
initialView
set the initial tab index
optional
integer (default: 0)
labels
list of tab labels
required
array
name
unique name for the tab view
optional
string
Last modified 11h ago