Tabs

Dynamic image
<BaseTabs
items="[ 'One', 'Two', 'Three' ]"
>
<template #tab-1>...</template>
<template #tab-2>...</template>
<template #tab-3>...</template>
</BaseTabs>

Props (1)

  • itemsarrayThe items of the tabs.

Tabs with icons

Content for the home tab
<BaseTabs
:items="[ 'Home', 'Search', 'Favorite' ]"
>
<template #tab="{ tab, index }">
<span class="tab-with-icon">
<web-icon v-if="index === 0" name="home" />
<web-icon v-else-if="index === 1" name="search" />
<web-icon v-else name="favorite" />
{{ tab }}</span>
</template>
<template #tab-1>...</template>
<template #tab-2>...</template>
<template #tab-3>...</template>
</BaseTabs>

Props (1)

  • itemsarrayThe items of the tabs.

Scrollable tabs

Content for tab-1

Nested tabs

Inner content one