Re:Vue

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

■ 概要（Overview）

コンポーネント名

• TabPanel

レベル (Atomic Design)

• 原子（Atom）

カテゴリー（category）

• displays

■ データ（Data）

【props】

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

■ 使用例（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']" 
    :count="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>