Tabs

The default slot renders the active panel. The parent owns its content. Arrow keys, Home, and End move selection.

Preview

Open in the playground

Usage

TabsExample.vueVue / TS

<script setup lang="ts">
import { ref } from 'vue'
import { FzTabs } from '@chrisdalbano/forza-ui'
import type { ForzaOption } from '@chrisdalbano/forza-ui'
const tab = ref<string>('overview')
const tabs: ForzaOption[] = [
  { value: 'overview', label: 'Overview' },
  { value: 'history', label: 'History' },
]
</script>

<template>
  <FzTabs v-model="tab" label="Details" :options="tabs"
    ><p>{{ tab }}</p></FzTabs
  >
</template>

TypeScript exampleSource you can use.

Import the shared stylesheet once and wrap your app in .fz-theme. See installation.

Props

Name	Type	Required	Default
label	string	Yes	None
options	readonly { value: string; label: string; }[]	Yes	None
modelValue	string	Yes	None

Events and state

v-model: string

• update:modelValue: [value: string]

Slots

default

Add from source

forza add tabs

Set up the CLI first. Generated API tables come from the Vue source, using Vue Language Tools.