タブパネル

TabPanelコンポーネントは、複数のコンテンツをタブ形式で整理・表示するコンポーネントです。Litとデザイントークンを使用して構築され、一貫したテーマとアクセシビリティを提供します。

機能

タブナビゲーション: 複数のタブ間での切り替え
アイコンサポート: タブにアイコンを表示可能
レイアウトオプション: 左寄せ・中央寄せの選択
アクティブタブ管理: 現在のタブの状態管理
テーマ対応: ライトテーマとダークテーマの自動切り替え
レスポンシブ: モバイルデバイスでの適切な表示

使用方法

---
import { TabPanel } from '@karan-monorepo/ui-core';
---

<kds-tab-panel
  tabs='[{"id": "tab1", "label": "概要"}, {"id": "tab2", "label": "詳細"}]'
  active-tab="tab1"
  theme="light"
>
  <div slot="tab-tab1">概要のコンテンツ</div>
  <div slot="tab-tab2">詳細のコンテンツ</div>
</kds-tab-panel>

プロパティ

プロパティ	型	デフォルト	説明
`tabs`	`Tab[] \| string`	`[]`	タブの配列またはJSON文字列
`active-tab`	`string \| null`	`null`	アクティブなタブのID
`theme`	`'light' \| 'dark'`	`'light'`	パネルのカラーテーマ
`centered`	`boolean`	`false`	タブを中央寄せにするか

Tab型

interface Tab {
  id: string;      // タブの一意ID
  label: string;   // タブの表示ラベル
  icon?: string;   // タブのアイコン（オプション）
}

使用例

TabPanel Component

Organize content into tabs with customizable layouts and themes.

Basic Usage

Simple Tabs

With Icons

Icon Tabs

Layout Options

Left Aligned (Default)

Centered Tabs

Themes

Light Theme

Dark Theme

Real-world Examples

Product Information

基本的な使用

シンプルなタブ

<kds-tab-panel
  tabs='[
    {"id": "overview", "label": "概要"},
    {"id": "details", "label": "詳細"},
    {"id": "settings", "label": "設定"}
  ]'
  active-tab="overview"
>
  <div slot="tab-overview">
    <h3>概要コンテンツ</h3>
    <p>これは概要タブのコンテンツです。</p>
  </div>
  <div slot="tab-details">
    <h3>詳細コンテンツ</h3>
    <p>これは詳細タブのコンテンツです。</p>
  </div>
  <div slot="tab-settings">
    <h3>設定コンテンツ</h3>
    <p>これは設定タブのコンテンツです。</p>
  </div>
</kds-tab-panel>

アイコン付きタブ

<kds-tab-panel
  tabs='[
    {"id": "home", "label": "ホーム", "icon": "🏠"},
    {"id": "profile", "label": "プロフィール", "icon": "👤"},
    {"id": "settings", "label": "設定", "icon": "⚙️"}
  ]'
  active-tab="home"
>
  <div slot="tab-home">
    <h3>ホームダッシュボード</h3>
    <p>最近のアクティビティとクイックアクションを表示します。</p>
  </div>
  <div slot="tab-profile">
    <h3>ユーザープロフィール</h3>
    <p>プロフィール情報、設定、アカウント設定を管理します。</p>
  </div>
  <div slot="tab-settings">
    <h3>アプリケーション設定</h3>
    <p>アプリケーション設定、通知、プライバシーオプションを設定します。</p>
  </div>
</kds-tab-panel>

レイアウトオプション

左寄せ（デフォルト）

<kds-tab-panel
  tabs='[
    {"id": "tab1", "label": "最初のタブ"},
    {"id": "tab2", "label": "2番目のタブ"},
    {"id": "tab3", "label": "3番目のタブ"}
  ]'
  active-tab="tab1"
>
  <!-- コンテンツ -->
</kds-tab-panel>

中央寄せ

<kds-tab-panel
  tabs='[
    {"id": "tab1", "label": "最初のタブ"},
    {"id": "tab2", "label": "2番目のタブ"},
    {"id": "tab3", "label": "3番目のタブ"}
  ]'
  active-tab="tab1"
  centered={true}
>
  <!-- コンテンツ -->
</kds-tab-panel>

使用ケース

商品情報ページ

<kds-tab-panel
  tabs='[
    {"id": "description", "label": "説明", "icon": "📝"},
    {"id": "specs", "label": "仕様", "icon": "📋"},
    {"id": "reviews", "label": "レビュー", "icon": "⭐"},
    {"id": "shipping", "label": "配送", "icon": "🚚"}
  ]'
  active-tab="description"
>
  <div slot="tab-description">
    <h3>商品説明</h3>
    <p>高品質な製品で、あなたのニーズを満たすために設計されています。</p>
    <ul>
      <li>プレミアム素材</li>
      <li>先進機能</li>
      <li>長期間の耐久性</li>
    </ul>
  </div>

  <div slot="tab-specs">
    <h3>技術仕様</h3>
    <table>
      <tr><td>寸法</td><td>10" x 8" x 2"</td></tr>
      <tr><td>重量</td><td>1.5 lbs</td></tr>
      <tr><td>素材</td><td>プレミアムアルミニウム</td></tr>
    </table>
  </div>

  <div slot="tab-reviews">
    <h3>お客様レビュー</h3>
    <div class="review">
      <p>⭐⭐⭐⭐⭐ "素晴らしい製品です！"</p>
      <small>- 田中さん</small>
    </div>
  </div>

  <div slot="tab-shipping">
    <h3>配送情報</h3>
    <p>迅速で信頼性の高い配送オプションを提供しています。</p>
  </div>
</kds-tab-panel>

設定パネル

<kds-tab-panel
  tabs='[
    {"id": "general", "label": "一般"},
    {"id": "privacy", "label": "プライバシー"},
    {"id": "notifications", "label": "通知"},
    {"id": "advanced", "label": "詳細"}
  ]'
  active-tab="general"
>
  <div slot="tab-general">
    <h3>一般設定</h3>
    <form>
      <label>言語設定</label>
      <select>
        <option>日本語</option>
        <option>English</option>
      </select>
    </form>
  </div>

  <div slot="tab-privacy">
    <h3>プライバシー設定</h3>
    <form>
      <label>
        <input type="checkbox" /> データ収集を許可する
      </label>
    </form>
  </div>

  <div slot="tab-notifications">
    <h3>通知設定</h3>
    <form>
      <label>
        <input type="checkbox" /> メール通知を有効にする
      </label>
    </form>
  </div>

  <div slot="tab-advanced">
    <h3>詳細設定</h3>
    <form>
      <label>デバッグモード</label>
      <input type="checkbox" />
    </form>
  </div>
</kds-tab-panel>

イベントハンドリング

TabPanelコンポーネントはtab-changeイベントを発火します：

// イベントリスナーの設定
const tabPanel = document.querySelector('kds-tab-panel');
tabPanel.addEventListener('tab-change', (event) => {
  console.log('アクティブタブ:', event.detail.activeTab);
});

スタイリング

TabPanelコンポーネントはデザイントークンを使用した一貫したスタイリングを提供します：

タイポグラフィ: sansJPフォントファミリーと適切なサイズ・重み
カラー: ライト/ダークテーマに対応したカラートークン
スペーシング: デザインシステムのスペーシングトークン
レスポンシブ: モバイルファーストのレスポンシブデザイン

アクセシビリティ

TabPanelコンポーネントには適切なアクセシビリティ機能が含まれています：

セマンティックHTMLのrole="tab"とrole="tabpanel"を使用
キーボードナビゲーションサポート（矢印キー、Tab）
スクリーンリーダー対応の構造
適切なaria-selectedとaria-controls属性
高コントラスト比による視認性の確保

ベストプラクティス

タブの数は適切に制限する（3-5個が理想的）
タブのラベルは簡潔で分かりやすくする
アイコンは意味を明確にするために使用する
アクティブタブは視覚的に明確にする
コンテンツは関連性の高いものをグループ化する
両方のテーマでテストして良好なコントラストと可読性を確保する

ブラウザサポート

TabPanelコンポーネントは以下の技術をサポートするモダンブラウザで動作します：

CSS Custom Properties
Web Components (Lit)
CSS Flexbox
CSS Grid