# Popovers & Tooltips
# Demo
# Usage
<Tabs :activeIndex="1">
<TabsNavigation>
<TabsNavigationItem :index="1" class="uppercase">
Tab One
</TabsNavigationItem>
<TabsNavigationItem :index="2" class="uppercase">
Tab Two
</TabsNavigationItem>
<TabsNavigationItem :index="3" class="uppercase">
Tab Three
</TabsNavigationItem>
</TabsNavigation>
<TabsContent>
<TabsContentItem :index="1">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi veritatis
officiis, quidem placeat autem nihil voluptatem velit quaerat adipisci
veniam iste. Quae odio sint dolorum aliquid eos numquam est ducimus! Lorem
ipsum dolor, sit amet consectetur adipisicing elit. Itaque enim alias odit
facilis, necessitatibus quam nulla! Sapiente nostrum nulla ut, aspernatur
nisi unde enim quas ipsam laudantium excepturi vel consequuntur.
</TabsContentItem>
<TabsContentItem :index="2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi veritatis
officiis, quidem placeat autem nihil voluptatem velit quaerat adipisci
veniam iste. Quae odio sint dolorum aliquid eos numquam est ducimus! Lorem
ipsum dolor, sit amet consectetur adipisicing elit. Itaque enim alias odit
facilis, necessitatibus quam nulla! Sapiente nostrum nulla ut, aspernatur
nisi unde enim quas ipsam laudantium excepturi vel consequuntur. Lorem
ipsum dolor sit amet consectetur adipisicing elit. Commodi veritatis
officiis, quidem placeat autem nihil voluptatem velit quaerat adipisci
veniam iste. Quae odio sint dolorum aliquid eos numquam est ducimus! Lorem
ipsum dolor, sit amet consectetur adipisicing elit. Itaque enim alias odit
facilis, necessitatibus quam nulla! Sapiente nostrum nulla ut, aspernatur
nisi unde enim quas ipsam laudantium excepturi vel consequuntur.
</TabsContentItem>
<TabsContentItem :index="3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi veritatis
officiis, quidem placeat autem nihil voluptatem velit quaerat adipisci
veniam iste. Quae odio sint dolorum aliquid eos numquam est ducimus! Lorem
ipsum dolor, sit amet consectetur adipisicing elit. Itaque enim alias odit
facilis, necessitatibus quam nulla! Sapiente nostrum nulla ut, aspernatur
nisi unde enim quas ipsam laudantium excepturi vel consequuntur.
</TabsContentItem>
</TabsContent>
</Tabs>
# Props
# Tabs
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
| activeIndex | number | no | Index of active tab | |
| onActiveIndexChange | function | no | Callback function when active tab index is changed |
# TabsNavigationItem
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
| index | number | no | Index of the tab |
# TabsContentItem
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
| index | number | no | Index of the tab |