Tabs

Accessible tabs with roving tabindex.

🎰 Slot Games

Spin the reels and win big! Choose from hundreds of themed slot machines.

Features

• Arrow key navigation — Left/Right to switch tabs
• Roving tabindex — Single tab stop
• Disabled tabs — Individual tab disabling
• Named slots — Content per tab ID

Usage

<script setup>
import { ref } from 'vue'
import { FkTabs } from '@fortune-kit/components'

const activeTab = ref('slots')

const tabs = [
  { id: 'slots', label: 'Slots' },
  { id: 'poker', label: 'Poker' },
  { id: 'roulette', label: 'Roulette' }
]
</script>

<template>
  <FkTabs v-model="activeTab" :tabs="tabs">
    <template #slots>
      <p>Slot games content</p>
    </template>
    <template #poker>
      <p>Poker content</p>
    </template>
    <template #roulette>
      <p>Roulette content</p>
    </template>
  </FkTabs>
</template>

Props

Prop	Type	Default	Description
tabs	TabItem[]	Required	Tab definitions
modelValue	string	First tab	Active tab ID

Tab Item Type

interface TabItem {
  id: string
  label: string
  disabled?: boolean
}

Keyboard Navigation

• ← / → — Navigate between tabs
• Home — First tab
• End — Last tab