Vue Tabs Component - Flowbite

Use these responsive tabs components to create a secondary navigational hierarchy for your website or toggle content inside a container

TIP

Original reference: https://flowbite.com/docs/components/tabs/

The tabs component can be used either as an extra navigational hierarchy complementing the main navbar or you can also use it to change content inside a container just below the tabs using the data attributes from Flowbite.

Prop - variant (default)

typescript

export type TabsVariant = 'default' | 'underline' | 'pills'

defineProps({
    variant: {
        type: String as PropType<TabsVariant>,
        default: 'default',
    },
})

First
Second
Third
Fourth

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, id, nisi? Enim excepturi id minus molestias quaerat qui rem repudiandae sed tempore ullam voluptate, voluptatum. Consequuntur illum possimus tempora totam.

vue

<script setup>
import { ref } from 'vue'
import { Tabs, Tab } from 'flowbite-vue'
const activeTab = ref('first')
</script>
<template>
  <tabs v-model="activeTab" class="p-5"> <!-- class appends to content DIV for all tabs -->
    <tab name="first" title="First">
      Lorem...
    </tab>
    <tab name="second" title="Second">
      Lorem...
    </tab>
    <tab name="third" title="Third">
      Lorem...
    </tab>
    <tab name="fourth" title="Fourth" :disabled="true">
      Lorem...
    </tab>
  </tabs>
</template>

Prop - variant (underline)

First
Second
Third
Fourth

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aspernatur debitis iste libero molestiae mollitia, optio sunt? A, consectetur distinctio, eaque harum iusto laudantium, molestiae nam odio officia pariatur vitae?

vue

<script setup>
import { ref } from 'vue'
import { Tabs, Tab } from 'flowbite-vue'
const activeTab = ref('first')
</script>
<template>
  <tabs variant="underline" v-model="activeTab" class="p-5"> <!-- class appends to content DIV for all tabs -->
    <tab name="first" title="First">
      Lorem...
    </tab>
    <tab name="second" title="Second">
      Lorem...
    </tab>
    <tab name="third" title="Third">
      Lorem...
    </tab>
    <tab name="fourth" title="Fourth" :disabled="true">
      Lorem...
    </tab>
  </tabs>
</template>

Prop - variant (pills)

First
Second
Third
Fourth

vue

<script setup>
import { ref } from 'vue'
import { Tabs, Tab } from 'flowbite-vue'
const activeTab = ref('first')
</script>
<template>
  <tabs variant="pills" v-model="activeTab" class="p-5"> <!-- class appends to content DIV for all tabs -->
    <tab name="first" title="First">
      Lorem...
    </tab>
    <tab name="second" title="Second">
      Lorem...
    </tab>
    <tab name="third" title="Third">
      Lorem...
    </tab>
    <tab name="fourth" title="Fourth" :disabled="true">
      Lorem...
    </tab>
  </tabs>
</template>

Prop - directive

Use this props if you want to control which directive to use for rendering every tab content

typescript

export type TabsVariant = 'default' | 'underline' | 'pills'

defineProps({
    directive: {
        type: String as PropType<'if' | 'show'>,
        default: 'if',
    },
})

Vue Tabs Component - Flowbite #

Use these responsive tabs components to create a secondary navigational hierarchy for your website or toggle content inside a container #

Prop - variant (default) #

Prop - variant (underline) #

Prop - variant (pills) #

Prop - directive #