Components

Tabs

A versatile and accessible Tabs component for organizing content in panels.

Demo

Tab 1

Tab 2

Tab 3

Content 1

 <template>
    <TabsContainer>
        <TabBar 
            v-model="activeTabIndex"
            :tabs
        />

        <TabContent v-if="activeTabIndex === 0">
            <ContentPlaceholder text="Content 1"/>
        </TabContent>

        <TabContent v-else-if="activeTabIndex === 1">
            <ContentPlaceholder text="Content 2"/>
        </TabContent>
        
        <TabContent v-else-if="activeTabIndex === 2">
            <ContentPlaceholder text="Content 3"/>
        </TabContent>
    </TabsContainer>
</template>
<script setup lang="ts">
// States
const activeTabIndex = ref(0)

// Data
const tabs: TabItem[] = [
    { 
        text: 'Tab 1',
    },
    { 
        text: 'Tab 2',
    },
    { 
        text: 'Tab 3',
    },
]
</script>

Components

Name	Description
`TabBar`	Displays the tabs items.
`TabContent`	Displays the tab item content.
`TabContainer`	Groups and styles the TabBar and the TabContent.

TabBar

View code

Show playground

Tab 1

Tab 2

Tab 3

Props

Props	Default	Type
`tabs`	`An example array`	`TabItem[]`
`modelValue`	`0`	`number`
`tabStyle`	`TabStyle.UNDERLINE`	`TabStyle`
`tabSize`	`TabSize.LG`	`TabSize`
`decoration`	`TabDecoration.NONE`	`TabDecoration`
`hasContainer`	`false`	`boolean`
`isContainerFullWidth`	`false`	`boolean`
`disabled`	`false`	`boolean`
`prefetchOn`	`PrefetchOn.VISIBILITY`	`PrefetchOnStrategy`

tabs

Sets the tab items.

 <template>
    <TabBar :tabs="exampleTabs" />
</template>
<script setup lang="ts">
const exampleTabs: TabItem[] = [
    { 
        text: 'Tab 1',
    },
    { 
        text: 'Tab 2',
    },
    { 
        text: 'Tab 3',
    },
]
</script>

TypeScript interface

 interface TabItem {
    text: string
    icon?: string
    imgUrl?: string
    badgeValue?: number | string
    to?: string
    disabled?: boolean
}

text: Sets the label for the tab.
icon: Sets the icon for ICON decoration type.
imgUrl: Sets the image for IMAGE decoration type.
badgeValue: Sets the value for an optional badge at the right side of the tab label. Displays the badge only if the value is passed through the object.
to: Defines a navigation target for the tab. When provided, the tab behaves as a link and triggers a route navigation instead of updating the modelValue (active index).
disabled: Disables a single tab item. This applies disabled visual styles and blocks interaction for that item.

modelValue

The value of the currently active tab.

 <template>
    <TabBar v-model="activeTabIndex" />
</template>
<script setup lang="ts">
const activeTabIndex = ref(0)
</script>

Type: number
Default: 0

tabStyle

The style of the tabs. It uses the TabStyle enum.

 <template>
    <TabBar :tabStyle="TabStyle.PILL" />
</template>

Type: TabStyle
Default: TabStyle.UNDERLINE

Options

Value	Description
`UNDERLINE`	Underline-styled tab
`PILL`	Primary brand pill-styled tab
`PILL_MONOCRHOME`	Neutral color pill-styled tab

tabSize

Sets the size of the tabs. It uses the TabSize enum.

 <template>
    <TabBar :tabSize="TabSize.SM" />
</template>

Type: TabSize
Default: TabSize.LG

Options

Value	Description
`LG`	Large size tab
`MD`	Medium size tab
`SM`	Small size tab

decoration

Sets the type of decoration of the tabs. It uses the TabDecoration enum.

 <template>
    <TabBar 
        :decoration="TabDecoration.IMAGE" />
        :tabs="exampleTabs" 
    />
</template>
<script setup lang="ts">
const exampleTabs: TabItem[] = [
    { 
        text: 'Tab 1',
        imgUrl : '....'
    },
    { 
        text: 'Tab 2',
        imgUrl : '....'
    },
    { 
        text: 'Tab 3',
        imgUrl : '....'
    },
]
</script>

Type: TabDecoration
Default: TabDecoration.NONE

Options

Value	Description
`NONE`	Does not use decoration.
`IMAGE`	Displays an image at the left side of the tab text. Requires to use the 'imgUrl' key inside the object array.
`ICON`	Displays an icon at the left side of the tab text. Requires to use the 'icon' key inside the object array.

hasContainer

Adds a border and padding to the TabBar component.

     <TabBar 
        ...
        :hasContainer="true"
    />
</template>

Type: boolean
Default: false

isContainerFullWidth

When hasContainer is true, this prop makes the container take the full width of its parent.

     <TabBar 
        ...
        :hasContainer="true"
        :isContainerFullWidth="true"
    />
</template>

Type: boolean
Default: false

disabled

Disables the entire TabBar interaction state.

 <template>
    <TabBar
        :tabs="exampleTabs"
        :disabled="true"
    />
</template>

Type: boolean
Default: false

prefetchOn

Controls when tab route targets should be prefetched. It uses either the PrefetchOnStrategy type or the PrefetchOn enum.

 <template>
    <TabBar
        :tabs="exampleTabs"
        :prefetchOn="PrefetchOn.INTERACTION"
    />
</template>

Type: PrefetchOnStrategy
Default: PrefetchOn.VISIBILITY

Options

Value	Description
`VISIBILITY`	Prefetches routes based on visibility strategy.
`INTERACTION`	Prefetches routes when users hover or focus a tab with a route target.

You can also pass an object strategy:

 {
    visibility: true,
    interaction: true,
}

TabContent

Wraps the content of the tab.

Use v-if directive to display the correct index content.

 <template>
    <TabsContainer>
        <TabBar 
            ...
        />
            <TabContent v-if="activeTabIndex === 0">
                <!-- Content 1 -->
            </TabContent>
            <TabContent v-else-if="activeTabIndex === 1">
                <!-- Content 2 -->
            </TabContent>
            <!-- More tabs -->
    </TabsContainer>
</template>
<script setup lang="ts">
// States
const activeTabIndex = ref(0)
</script>

TabsContainer

Wraps the TabBar and TabContent components.

 <template>
    <TabsContainer>
        <TabBar 
            ...
        />
            <TabContent v-if="activeTabIndex === 0">
                <!-- Content 1 -->
            </TabContent>
            ...
    </TabsContainer>
</template>