Tabs

A set of tab panels that are displayed one at a time.

Usage

Pass an array to the items prop of the Tabs component. Each item can have the following properties:

• label - The label of the item.
• slot - A key to customize the item with a slot.
• content - The content to display in the panel by default.
• disabled - Determines whether the item is disabled or not.

This is the content shown for Tab1

<script setup lang="ts">
const items = [{
  label: 'Tab1',
  content: 'This is the content shown for Tab1'
}, {
  label: 'Tab2',
  disabled: true,
  content: 'And, this is the content for Tab2'
}, {
  label: 'Tab3',
  content: 'Finally, this is the content for Tab3'
}]
</script>

<template>
  <STabs :items="items"/>
</template>