■ コンポーネントデモ(demo)

Tab 1
Tab 2
Tab 3

Content for Tab 1

■ 概要（Overview）

コンポーネント名

TabPanel

レベル (Atomic Design)

原子（Atom）

カテゴリー（category）

displays

■ データ（Data）

【props】

id (string): ルート要素のID
class (string): ルート要素のクラス名
style (String | Object, default: ''): インラインスタイルを指定します。
tabs (Array, default: () => 'apple', 'banana'): 表示するタブの名前の配列です。
color (String, default: '#fff'): アクティブタブの文字色を指定します。
backgroundColor (String, default: '#00a968'): アクティブタブの背景色を指定します。

【computed】

activeTabStyle: 選択中のタブに適用するスタイル（props.backgroundColor, props.color の値に基づく）
bindingClass: props.class の値を含むクラス名

■ 使用例（Usage Example）

<script setup lang="ts">
import { TabPanel } from './TabPanel.vue'
import 'revuekitz/dist/style.css' 
</script>

<template>
  <TabPanel 
    :tabs="['Tab 1', 'Tab 2', 'Tab 3']" 
    :style="{ margin: '20px' }" 
    color="#fff" 
    backgroundColor="#00a968"
  >
    <template #content0>
      <div>Content for Tab 1</div>
    </template>
    <template #content1>
      <div>Content for Tab 2</div>
    </template>
    <template #content2>
      <div>Content for Tab 3</div>
    </template>
  </TabPanel>
</template>