syncfusion-javascript-tab

Syncfusion TypeScript Tab コンポーネントの実装

Syncfusion TypeScript Tab は、限られたスペースに複数のコンテンツを一度に 1 つずつ表示する、高機能なコンテンツコンテナーです。JSON アイテムまたは HTML 要素からのレンダリングに対応し、幅広いカスタマイズ、アニメーション、アクセシビリティ、レスポンシブデザインの機能を備えています。

このスキルを使用する場面

• 基本的なタブの設定：ヘッダーとコンテンツを含むシンプルなタブインターフェイスを作成する
• タブの選択とナビゲーション：プログラム操作やユーザー操作によるタブ選択を処理する
• カスタマイズ：ヘッダー、コンテンツ、アイコン、選択状態のスタイルを設定する
• レスポンシブデザイン：スクロール可能モードまたはポップアップモードで、画面に適応するタブを実装する
• 動的コンテンツ：タブ項目を動的に、またはデータソースから読み込む
• 高度な機能：ドラッグ＆ドロップによる並べ替え、ネストされたタブ、折りたたみ可能なタブ、ウィザード
• ユーザーエクスペリエンス：アニメーション、ツールチップ、キーボードナビゲーション、アクセシビリティを追加する
• 状態管理：セッション間でタブの状態を保持する

主な機能

1. レンダリング：JSON アイテムコレクションまたは HTML 要素からタブを作成します
2. 適応機能：スクロール可能なタブとポップアップメニューによるレスポンシブなレンダリング
3. カスタマイズ：ヘッダーアイコン、配置、スタイル、テーマ設定に対応します
4. アニメーション：animation プロパティによる、タブ切り替え時の組み込みアニメーション効果
5. アクセシビリティ：キーボードナビゲーションと ARIA 属性による WCAG 準拠
6. ドラッグ＆ドロップ：allowDragAndDrop を使用して、タブを並べ替え、インターフェイス間で項目を移動します
7. 動的読み込み：loadOn プロパティ（Demand、Dynamic、Init）でコンテンツの読み込みを制御します
8. 状態の永続化：enablePersistence を使用して、ユーザーセッション間で選択中のタブの状態を復元します
9. セキュリティ：組み込みの HTML サニタイザー enableHtmlSanitizer で XSS 攻撃を防ぎます
10. スワイプジェスチャー：swipeMode プロパティを使用した、タッチ／マウスのスワイプによるタブナビゲーション

列挙型の完全なリファレンス

HeaderPosition - タブヘッダーの配置

タブヘッダーをコンテンツに対してどこに配置するかを制御します。

値	配置	使用例
'Top'	コンテンツの上（デフォルト）	ダッシュボード、フォーム、標準的なタブ
'Bottom'	コンテンツの下	ドキュメントビューアー、下部ナビゲーション
'Left'	左側	管理パネル、サイドバーナビゲーション
'Right'	右側	特殊なレイアウト

new Tab({ headerPlacement: 'Top', items: [...] });     // Default
new Tab({ headerPlacement: 'Left', items: [...] });    // Sidebar
new Tab({ headerPlacement: 'Bottom', items: [...] });  // Bottom
new Tab({ headerPlacement: 'Right', items: [...] });   // Right side

HeightStyles - コンテンツの高さ調整モード

タブコンテンツの高さの計算方法を制御します。

値	動作	使用方法
'None'	明示的な height プロパティを使用	固定コンテナー
'Auto'	すべてのタブの高さを最も高いコンテンツに合わせる	高さの統一
'Content'	各タブの高さをそれぞれのコンテンツに合わせる（デフォルト）	高さが異なるコンテンツ
'Fill'	コンテンツで親コンテナーを満たす	レスポンシブな拡張

new Tab({ height: '400px', heightAdjustMode: 'None', items: [...] });
new Tab({ heightAdjustMode: 'Auto', items: [...] });
new Tab({ heightAdjustMode: 'Content', items: [...] });
new Tab({ height: '100%', heightAdjustMode: 'Fill', items: [...] });

ContentLoad - コンテンツのレンダリングモード

タブコンテンツを DOM に読み込むタイミングを制御します。

値	読み込み	DOM	使用する場面
'Demand'（デフォルト）	初回選択時	維持される	タブ数が多く、静的コンテンツの場合
'Dynamic'	選択するたび	選択中のものだけ	動的データ／ライブデータの場合
'Init'	最初にすべて	常に DOM 内	タブ数が少なく、コンテンツ量が少ない場合

new Tab({ loadOn: 'Demand', items: [...] });    // Lazy load (default)
new Tab({ loadOn: 'Dynamic', items: [...] });   // Reload each time
new Tab({ loadOn: 'Init', items: [...] });      // Load all at init

TabSwipeMode - スワイプジェスチャーの制御

タブのスワイプを実行する入力方法を制御します。

値	タッチ	マウス	デスクトップ	モバイル
'Both'（デフォルト）	✅	✅	すべてのデバイス	すべてのデバイス
'Touch'	✅	❌	デスクトップのみ	モバイルユーザー
'Mouse'	❌	✅	デスクトップユーザー	マウス入力のみ
'None'	❌	❌	スワイプ無効	スワイプ無効

new Tab({ swipeMode: 'Both', items: [...] });      // Both touch and mouse
new Tab({ swipeMode: 'Touch', items: [...] });     // Mobile touch only
new Tab({ swipeMode: 'Mouse', items: [...] });     // Desktop mouse only
new Tab({ swipeMode: 'None', items: [...] });      // Disabled swiping

---

コアドキュメント（まずはこちら）

1. はじめに ⭐ まずはこちら

   • インストールとセットアップ
   • 最初の Tab コンポーネント
   • HTML 構造とインポート

2. Tab の構造とコンテンツ

   • Tab 項目の構造
   • ヘッダーとコンテンツ
   • Tab の選択

API リファレンスとプロパティ

3. API プロパティ完全リファレンス 📚 詳細

   • 24 以上のすべてのプロパティを解説
   • 各プロパティの使用例
   • プロパティの組み合わせと推奨事項
   • コア、レンダリング、操作、アニメーションのプロパティ

4. イベント処理リファレンス 📚 詳細

   • 11 個すべてのイベントを解説
   • イベント引数（SelectEventArgs、SelectingEventArgs、DragEventArgs など）
   • イベントのライフサイクルとタイミング
   • 実践的なイベントパターン

5. メソッド完全リファレンス 📚 詳細

   • 18 個すべてのメソッドをシグネチャとパラメーターとともに解説
   • Tab 管理メソッド（addTab、removeTab、select）
   • 表示と状態の制御（hideTab、enableTab、disable）
   • イベント管理（addEventListener、removeEventListener）
   • コンポーネントのライフサイクル（destroy、refresh、refreshActiveTab）
   • ユーティリティメソッド（getItemIndex、getRootElement、appendTo、dataBind）
   • 各メソッドの実践的なコード例
   • メソッドの連携パターンとベストプラクティス

カスタマイズとスタイル設定

6. カスタマイズとスタイル設定
   • CSS 構造
   • ヘッダーとコンテンツのスタイル設定
   • showCloseButton プロパティ
   • 組み込みテーマ
   • カスタムスタイル設定の例

コンテンツとデータ

7. データバインディングと動的コンテンツ
   • 読み込み方法（JSON、AJAX、DataManager）
   • loadOn プロパティ（Demand、Dynamic、Init）
   • addTab() と removeTab() メソッド
   • POST リクエストと API 統合
   • コンテンツのレンダリングモード

レイアウトとレスポンシブ対応

8. コンテンツの向きとヘッダーの配置

   • headerPlacement（Top、Bottom、Left、Right）
   • 水平レイアウトと垂直レイアウト
   • レスポンシブデザインのパターン
   • サイドバーナビゲーションの実装

9. レスポンシブモードとアダプティブモード

   • スクロール可能モード
   • ポップアップ／ドロップダウンモード
   • 複数行モード
   • overflowMode プロパティ

高度な機能

10. 高度な機能

    • ドラッグ＆ドロップ（allowDragAndDrop、dragArea）
    • reorderActiveTab プロパティ
    • ネストされた Tab と折りたたみ可能な Tab
    • Tab ベースのウィザード
    • アイコンとツールチップの統合

11. アニメーションとトランジション

    • animation プロパティ（TabAnimationSettingsModel）
    • エフェクト：SlideLeftIn、SlideRightIn、FadeIn、ZoomIn など
    • swipeMode プロパティ（Both、Touch、Mouse、None）
    • カスタムアニメーションのタイミング

12. 状態の永続化

    • enablePersistence プロパティ
    • localStorage を利用した永続化
    • 複数 Tab のフォームとダッシュボード
    • 高度な永続化パターン

アクセシビリティと国際化

13. アクセシビリティとローカライズ
    • WCAG 準拠と ARIA
    • キーボードナビゲーション
    • enableRtl プロパティ（RTL サポート）
    • locale プロパティ（i18n）

セキュリティ

14. セキュリティと HTML のサニタイズ 🔒 重要
    • enableHtmlSanitizer プロパティ
    • XSS の防止
    • ユーザーコンテンツの保護
    • セキュリティのベストプラクティス

トラブルシューティング

15. エッジケースとトラブルシューティング
    • 高さとスクロールの管理
    • ブラウザー互換性

---

クイックスタート

JSON 項目を使用した基本的な Tab

import { Tab } from '@syncfusion/ej2-navigations';

let tabObj: Tab = new Tab({
    items: [
        {
            header: { 'text': 'Twitter' },
            content: 'Twitter is an online social networking service...'
        },
        {
            header: { 'text': 'Facebook' },
            content: 'Facebook is an online social networking service...'
        },
        {
            header: { 'text': 'WhatsApp' },
            content: 'WhatsApp Messenger is a proprietary cross-platform...'
        }
    ]
});

tabObj.appendTo('#element');

HTML 構造

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tab Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
    <div id="element"></div>
</body>
</html>

CSS のセットアップ

@import '../../node_modules/@syncfusion/ej2-base/styles/fluent2.css';
@import '../../node_modules/@syncfusion/ej2-buttons/styles/fluent2.css';
@import '../../node_modules/@syncfusion/ej2-popups/styles/fluent2.css';
@import '../../node_modules/@syncfusion/ej2-navigations/styles/fluent2.css';

機能別の使用シナリオ

タブコンテンツの高さのカスタマイズ

heightAdjustMode プロパティを使用して、タブコンテンツの高さの調整方法を制御します。

let tabObj: Tab = new Tab({
    heightAdjustMode: 'Auto',  // 'None', 'Auto', 'Content', 'Fill'
    height: '400px',  // Set container height when using 'None' or 'Auto'
    items: [
        { header: { 'text': 'Tab 1' }, content: 'Short content' },
        { header: { 'text': 'Tab 2' }, content: 'Much longer content with more text...' },
        { header: { 'text': 'Tab 3' }, content: 'Another tab with varying content length' }
    ]
});
tabObj.appendTo('#element');

高さのモード：

• None：コンテンツの高さをタブコンテナーの高さに合わせます（高さの明示的な指定が必要です）
• Auto：すべてのタブの高さを最も高いコンテンツに合わせて調整します
• Content：各タブの高さをそれぞれのコンテンツに合わせて調整します（デフォルト）
• Fill：タブコンテンツを親要素全体に表示します

タブに閉じるボタンを表示する

閉じるボタンをクリックして、ユーザーが個々のタブを閉じられるようにします。

let tabObj: Tab = new Tab({
    showCloseButton: true,
    items: [
        { header: { 'text': 'Home' }, content: 'Home content...' },
        { header: { 'text': 'Editor' }, content: 'Editor content...' },
        { header: { 'text': 'Settings' }, content: 'Settings content...' }
    ]
});
tabObj.appendTo('#element');

// Optionally handle close button clicks
tabObj.element.addEventListener('close', (e: any) => {
    console.log(`Closed tab at index: ${e.index}`);
});

ポップアップモードでアクティブなタブを並べ替える

タブがポップアップメニューにオーバーフローしたときの、アクティブなタブの動作を制御します。

let tabObj: Tab = new Tab({
    overflowMode: 'Popup',  // Enable popup mode for overflow tabs
    reorderActiveTab: false,  // Don't reorder active tab in popup (keep it highlighted)
    heightAdjustMode: 'Auto',
    items: [
        { header: { 'text': 'India' }, content: 'India content...' },
        { header: { 'text': 'Canada' }, content: 'Canada content...' },
        { header: { 'text': 'Australia' }, content: 'Australia content...' },
        // ... many more tabs that trigger popup mode
    ]
});
tabObj.appendTo('#element');

reorderActiveTab が true（デフォルト）の場合、ポップアップ内のタブをクリックすると、そのタブがメインビューに移動します。false の場合、タブは並べ替えられてメインビューに移動することなく、ポップアップ内でハイライト表示されたままになります。

タブ項目を動的に読み込む

ユーザーの操作に応じて、プログラムからタブを追加します。

let tabObj: Tab = new Tab({
    items: [
        { header: { 'text': 'Home' }, content: 'Home content' }
    ]
});
tabObj.appendTo('#element');

// Add new tab dynamically
document.getElementById('addTabBtn')?.addEventListener('click', () => {
    let newTabCount = tabObj.items.length;
    let newTab = {
        header: { 'text': `Tab ${newTabCount}` },
        content: `Content for tab ${newTabCount}`
    };
    tabObj.addTab([newTab]);  // Add at end
    // Or insert at specific position: tabObj.addTab([newTab], 1);
});

// Remove tab by index
document.getElementById('removeTabBtn')?.addEventListener('click', () => {
    if (tabObj.items.length > 1) {
        tabObj.removeTab(tabObj.items.length - 1);  // Remove last tab
    }
});

ページの更新後も状態を保持する

選択したタブを自動的に保存し、復元します。

let tabObj: Tab = new Tab({
    enablePersistence: true,  // Enable localStorage-based persistence
    items: [
        { header: { 'text': 'Dashboard' }, content: 'Dashboard...' },
        { header: { 'text': 'Analytics' }, content: 'Analytics...' },
        { header: { 'text': 'Settings' }, content: 'Settings...' }
    ]
});
tabObj.appendTo('#element');

// When user returns to page, the previously selected tab is automatically restored

選択中のタブの表示をカスタマイズする

CSS クラスを使用して、選択中のタブのデフォルトスタイルを上書きします。

let tabObj: Tab = new Tab({
    cssClass: 'e-tab-custom-style',  // Add custom CSS class
    items: [...]
});
tabObj.appendTo('#element');

次に、カスタム CSS を定義します。

.e-tab.e-tab-custom-style .e-tab-header .e-toolbar-item.e-active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom: 3px solid #667eea;
}

.e-tab.e-tab-custom-style .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    font-weight: 600;
    color: white;
}

POST リクエストでコンテンツを読み込む

サーバーからタブのコンテンツを取得します。

import { Tab } from '@syncfusion/ej2-navigations';
import { Ajax } from '@syncfusion/ej2-base';

let ajax: Ajax = new Ajax('./api/tab-content', 'GET', true);

ajax.onSuccess = (data: string): void => {
    let tabObj: Tab = new Tab({
        items: [
            { header: { 'text': 'Home' }, content: 'Home content' },
            { header: { 'text': 'Remote Content' }, content: data }
        ]
    });
    tabObj.appendTo('#element');
};

ajax.send();

// Or using Fetch API
async function loadTabContent() {
    try {
        let response = await fetch('api/tab-data', { method: 'POST' });
        let data = await response.json();
        
        let tabObj = new Tab({
            items: data.tabs  // Server returns array of tab items
        });
        tabObj.appendTo('#element');
    } catch (error) {
        console.error('Failed to load tabs:', error);
    }
}

loadTabContent();

タブ間または外部ソースとの間でドラッグ＆ドロップする

同じタブ内、または外部コンポーネントとの間で、ユーザーがタブ項目を移動できるようにします。

let tabObj: Tab = new Tab({
    allowDragAndDrop: true,  // Enable drag-drop
    dragArea: '#dragContainer',  // Restrict drag area
    items: [...],
    dragged: (args) => {
        console.log(`Item moved from ${args.draggedIndex} to ${args.droppedIndex}`);
    }
});
tabObj.appendTo('#element');

// Transfer tabs between two Tab instances
let sourceTab: Tab = new Tab({
    allowDragAndDrop: true,
    dragArea: '#container',
    items: [{ header: { 'text': 'Source 1' }, content: 'Can be moved' }]
});
sourceTab.appendTo('#sourceTab');

let destTab: Tab = new Tab({
    allowDragAndDrop: true,
    dragArea: '#container',
    items: [{ header: { 'text': 'Dest 1' }, content: 'Receives items' }]
});
destTab.appendTo('#destTab');

コンテンツのレンダリングモード

タブコンテンツの読み込み方法とタイミングを制御します。

// Mode 1: On-Demand (Lazy Loading) - Default
let tabObj: Tab = new Tab({
    // Content loaded only when tab is selected
    // Content persists in DOM once loaded
    items: [
        { header: { 'text': 'Tab 1' }, content: 'Content loaded on first select' }
    ]
});
tabObj.appendTo('#element');

// Mode 2: Dynamic - Only selected content in DOM
let dynamicTab: Tab = new Tab({
    loadOn: 'Dynamic',  // Content reloaded each time tab is selected
    items: []
});
dynamicTab.appendTo('#element');

// Mode 3: Initial - All content loaded upfront
let initialTab: Tab = new Tab({
    loadOn: 'Init',  // All tabs rendered on initialization
    items: []
});
initialTab.appendTo('#element');

よく使われるパターン

パターン 1：プログラムによるタブの選択

// Select a tab by index
tabObj.select(1);  // Select second tab

// Get currently selected tab index
let activeIndex = tabObj.selectedItem;

// Determine if selection was user interaction or programmatic
tabObj.selecting = (args) => {
    if (args.isInteracted) {
        console.log('User clicked tab');
    } else {
        console.log('Tab selected programmatically');
    }
};

パターン 2：タブの動的な追加

// Add new tab item dynamically
tabObj.addTab([
    {
        header: { 'text': 'New Tab' },
        content: 'New content here'
    }
], 2); // Insert at index 2

パターン 3：スクロール可能なレスポンシブタブ

let tabObj: Tab = new Tab({
    items: [...], // your items
    heightAdjustMode: 'Auto',
    overflowMode: 'Scrollable'  // Enable scrollable mode
});

パターン 4：アイコン付きタブ

let tabObj: Tab = new Tab({
    items: [
        {
            header: { 
                'text': 'Settings',
                'iconCss': 'e-icon-settings'  // Add icon class
            },
            content: 'Settings content...'
        }
    ]
});

主要なプロパティと設定

プロパティ	型	目的	一般的な値
items	Array	タブ項目のコレクション	項目オブジェクトの配列
selectedItem	number	アクティブなタブのインデックス	0, 1, 2, ...
heightAdjustMode	string	高さの自動調整	'Auto', 'Content', 'Scroll'
overflowMode	string	オーバーフローしたタブの処理	'Scrollable', 'Popup', 'MultiRow'
animation	object	アニメーションの設定	{ previous, next }
headerPlacement	string	ヘッダーの配置	'Top', 'Bottom', 'Left', 'Right'
enableRtl	boolean	RTL のサポート	true, false
allowDragAndDrop	boolean	ドラッグ＆ドロップを有効化	true, false
enablePersistence	boolean	状態の保持	true, false

一般的なユースケース

1. 複数パネルのフォーム：入力検証を行いながら、複数のタブにフォームフィールドを整理します
2. ドキュメントサイト：タブ付きのコード例（TypeScript、JavaScript、HTML）を作成します
3. ダッシュボードのレイアウト：ダッシュボードのウィジェットをタブセクションに整理します
4. 段階的なウィザード：タブを使用して順次進行するワークフローを作成します
5. コンテンツの整理：大規模なデータセットを分類して表示します
6. 機能の切り替え：タブパネルで関連機能を表示または非表示にします
7. 管理インターフェース：設定や構成オプションを整理します
8. モバイルナビゲーション：小さな画面向けにレスポンシブなタブベースのナビゲーションを提供します

---

次のステップ：

• ユースケースに応じた適切なリファレンスファイルを読みます
• 基本的なセットアップについて、クイックスタートの例を確認します
• 特定のシナリオに関する一般的なパターンを確認します
• トラブルシューティングには、エッジケースのガイドを参照します