Tab

Stable

A versatile component for organizing content into tabbed sections. It supports switching between views, navigation via links , and integration with routing for dynamic content rendering.

<script setup lang="ts">
import { ref } from 'vue'
import { HTabs, type IconName } from '@holistics/design-system'

const tabs = [{ id: 'tab1', label: 'Tab 1', icon: 'user' as IconName }, { id: 'tab2', label: 'Tab 2' }, { id: 'tab3', label: 'Tab 3' }]
const orientation = 'horizontal'
const selected = ref('tab2')
</script>

<template>
  <HTabs
    v-model:selected="selected"
    :tabs
    :orientation
    class="h-52 w-96"
  >
    <template #tab1>
      <div class="h-full bg-blue-100">
        Tab content 1
      </div>
    </template>
    <template #tab2>
      <div class="h-full bg-green-100">
        Tab content 2
      </div>
    </template>
    <template #tab3>
      <div class="h-full bg-red-100">
        Tab content 3
      </div>
    </template>
  </HTabs>
</template>

Examples

Horizontal

<script setup lang="ts">
import { ref } from 'vue'
import { HTabs, type IconName } from '@holistics/design-system'

const tabs = [{ id: 'tab1', label: 'Tab 1', icon: 'user' as IconName }, { id: 'tab2', label: 'Tab 2' }, { id: 'tab3', label: 'Tab 3' }]
const orientation = 'horizontal'
const selected = ref('tab2')
</script>

<template>
  <HTabs
    v-model:selected="selected"
    :tabs
    :orientation
    class="h-52 w-96"
  >
    <template #tab1>
      <div class="h-full bg-blue-100">
        Tab content 1
      </div>
    </template>
    <template #tab2>
      <div class="h-full bg-green-100">
        Tab content 2
      </div>
    </template>
    <template #tab3>
      <div class="h-full bg-red-100">
        Tab content 3
      </div>
    </template>
  </HTabs>
</template>

Vertical

<script setup lang="ts">
import { ref } from 'vue'
import { HTabs, type IconName } from '@holistics/design-system'

const tabs = [{ id: 'tab1', label: 'Tab 1', icon: 'user' as IconName }, { id: 'tab2', label: 'Tab 2' }, { id: 'tab3', label: 'Tab 3' }]
const orientation = 'vertical'
const selected = ref('tab2')
</script>

<template>
  <HTabs
    v-model:selected="selected"
    :tabs
    :orientation
    class="h-52 w-96"
  >
    <template #tab1>
      <div class="h-full bg-blue-100">
        Tab content 1
      </div>
    </template>
    <template #tab2>
      <div class="h-full bg-green-100">
        Tab content 2
      </div>
    </template>
    <template #tab3>
      <div class="h-full bg-red-100">
        Tab content 3
      </div>
    </template>
  </HTabs>
</template>

Fill width

<script setup lang="ts">
import { ref } from 'vue'
import { HTabs, type IconName } from '@holistics/design-system'

const tabs = [{ id: 'tab1', label: 'Tab 1', icon: 'user' as IconName }, { id: 'tab2', label: 'Tab 2' }, { id: 'tab3', label: 'Tab 3' }]
const orientation = 'horizontal'
const selected = ref('tab2')
</script>

<template>
  <HTabs
    v-model:selected="selected"
    :tabs
    :orientation
    fill-width
    class="h-52 w-96"
  >
    <template #tab1>
      <div class="h-full bg-blue-100">
        Tab content 1
      </div>
    </template>
    <template #tab2>
      <div class="h-full bg-green-100">
        Tab content 2
      </div>
    </template>
    <template #tab3>
      <div class="h-full bg-red-100">
        Tab content 3
      </div>
    </template>
  </HTabs>
</template>

API

Pass-through: <div>

What does this mean?

All props, events, and attrs that are not specified in the tables below will be passed to the element/component described above.

Props

Name	Type	Description
tabs *	TabProps[]
orientation	"vertical" | "horizontal" = "horizontal"
fillWidth	boolean
maxWidth	number
minWidth	number
selected	string

Events

Name	Parameters	Description
@update:selected	[value: string | undefined]