syncfusion-angular-tab

Syncfusion Angular Tabs の実装

Syncfusion Angular Tab コンポーネントは、タブ形式のインターフェースでコンテンツを整理して表示するための、柔軟でレスポンシブな方法を提供します。タブを使うと、ユーザーは複数のコンテンツパネルを切り替えられるため、複数ステップのワークフロー、設定パネル、ナビゲーション構造、整理されたデータ表示に最適です。

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

• タブ形式のナビゲーションを構築する： 関連するコンテンツを個別のタブに整理し、簡単に切り替えられるようにします
• 複数ステップのワークフロー： ウィザード形式の操作や、手順に沿ったプロセスを作成します
• レスポンシブレイアウト： モバイル、タブレット、デスクトップの各画面サイズに合わせてタブ表示を調整します（向きは異なります）
• 動的なコンテンツ管理： 実行時にタブを追加、削除、並べ替え、ドラッグ＆ドロップします
• 複雑なアプリケーション： グリッド、チャート、カレンダー、フォームをタブ内に組み込みます
• 状態の保持： ブラウザーのセッションをまたいでユーザーの選択を保存、復元します
• ローカライズされたアプリケーション： UI テキストをローカライズして複数の言語に対応します
• 複数の向き： レイアウトのニーズに応じて、縦または横のタブヘッダーを使用します
• 大規模なデータセット： リモート API やデータベースからタブを読み込みます
• UI のカスタマイズ： ヘッダー、アイコン、アニメーション、オーバーフローモード、コンテンツ領域をスタイル設定します
• ユーザー設定： 状態の永続化を使用して、最後に選択したタブを記憶します

ナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• パッケージのインストールとセットアップ
• Angular CLI の設定（スタンドアロンとモジュール）
• CSS のインポートとテーマのセットアップ
• 3 つのレンダリング方法：JSON アイテム、ng-template、HTML 要素
• 基本的な使用例と最小限のセットアップ

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

📄 参照： references/rendering-modes.md

• On Demand（デフォルト）： アクティブなタブのコンテンツを読み込み、状態を保持します
• Dynamic： メモリを最適化し、DOM 内のコンテンツを 1 つにします
• Init： すべてのコンテンツを事前に読み込み、タブ間でアクセスできるようにします
• パフォーマンス上のトレードオフとユースケースの選択
• 各モードのコード例

コンテンツ管理とデータ

📄 参照： references/content-management.md

• DataSource のバインドとデータ駆動型タブ
• 動的なタブの追加／削除（.addTab()、.removeTab()）
• AJAX とサーバーサイドでのコンテンツ読み込み
• タブの動的な表示／非表示
• タブ内のリアクティブフォーム（FormGroup、FormControl）
• TemplateRef を使ったコンテンツの再利用

タブの選択とナビゲーション

📄 参照： references/selection-navigation.md

• タブの選択イベント（selecting、selected）
• プログラムによるタブの選択（.select() メソッド）
• ユーザーによる選択とプログラムによる選択の判別（isInteracted）
• キーボードナビゲーション（Tab キー、矢印キー、Enter／Space）
• クリックハンドラーと選択コールバック

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

📄 参照： references/customization-styling.md

• ヘッダーのスタイルと CSS クラス（fill、background、accent）
• アイコンの配置とアイコンの CSS カスタマイズ
• コンテンツの高さの管理と自動サイズ調整
• スクロールステップの設定
• アニメーションの制御とカスタムアニメーション
• 高度なスタイル設定のための CSS カスタマイズガイド
• レスポンシブなヘッダー表示

ドラッグ＆ドロップによる並べ替え

📄 参照： references/drag-and-drop-reordering.md

• allowDragAndDrop プロパティでドラッグ＆ドロップを有効にします
• dragArea プロパティでドラッグ領域を設定します
• onDragStart、dragging、dragged イベントを処理します
• 特定のタブのドラッグやドロップを防止します
• ポップアップオーバーフローモードでアクティブなタブを並べ替えます
• 複数の Tab コンポーネント間でアイテムをドラッグします
• Tab アイテムを外部コンポーネント（TreeView など）にドラッグします

ローカライズと表示位置

📄 参照： references/localization-and-orientation.md

• locale プロパティと L10n クラスを使用して UI テキストをローカライズします
• ヘッダーの配置オプション（Top、Bottom、Left、Right）
• オーバーフローモード（スクロール可能、ポップアップ）
• スクロール速度を設定する scrollStep
• 画面サイズに応じたレスポンシブな表示方向の変更
• カスタム翻訳による多言語サポート

状態の永続化とデータバインディング

📄 参照： references/state-persistence-and-data-binding.md

• enablePersistence プロパティで永続化を有効にします
• ブラウザーの localStorage への状態の自動保存
• タブをデータソース（配列、API、DataManager）にバインドします
• リモートサーバーからタブデータを読み込みます（OData、HTTP）
• POST リクエストでタブのコンテンツを読み込みます
• 永続化と動的なデータバインディングの組み合わせ

高度なシナリオ

📄 参照： references/advanced-scenarios.md

• ネストされたタブ（複数階層のタブコンテンツ）
• アコーディオンのように動作する折りたたみ可能なタブ
• ウィザードパターンの実装（ステップの検証）
• LocalStorage／SessionStorage による状態の永続化
• イベントからのコンポーネントの初期化
• エッジケースとベストプラクティス

レスポンシブで適応性のある動作

📄 参照： references/responsive-adaptive.md

• 制約のあるスペースに合わせた適応型レンダリング
• オーバーフローモード：スクロール可能、ポップアップ
• モバイル／デスクトップでのレスポンシブなタブ表示
• 表示方向の変更（水平／垂直）
• タッチデバイスでのスワイプによる選択を防止
• 幅と高さの制約

トラブルシューティングとベストプラクティス

📄 参照： references/troubleshooting.md

• よくある実装上の問題と解決策
• パフォーマンス最適化の手法
• コンテンツのレンダリングに関する注意点
• 状態管理で陥りやすい問題
• アクセシビリティとキーボード操作のサポート
• アニメーションのパフォーマンス
• EJ1 から EJ2 への移行

クイックスタートの例

複数のコンテンツパネルを持つ基本的なタブ：

import { Component } from '@angular/core';
import { TabModule } from '@syncfusion/ej2-angular-navigations';

@Component({
  imports: [TabModule],
  standalone: true,
  selector: 'app-root',
  template: `
    <ejs-tab id="element">
      <e-tabitems>
        <e-tabitem [header]="headerText[0]" [content]="content0"></e-tabitem>
        <e-tabitem [header]="headerText[1]" [content]="content1"></e-tabitem>
        <e-tabitem [header]="headerText[2]" [content]="content2"></e-tabitem>
      </e-tabitems>
    </ejs-tab>
  `
})
export class AppComponent {
  public headerText: object[] = [
    { text: 'Home' },
    { text: 'Settings' },
    { text: 'Profile' }
  ];

  public content0 = 'Welcome to the home tab with your dashboard content.';
  public content1 = 'Configure application settings and preferences here.';
  public content2 = 'View and edit your user profile information.';
}

よくあるパターン

パターン 1：動的なタブの作成

// Add new tab at specific index
const newTab = { 
  header: { text: 'New Tab' }, 
  content: 'New content here' 
};
this.tabObj.addTab([newTab], 2);

パターン 2：イベント処理による選択

// Handle tab selection changes
onTabSelected(args: SelectEventArgs) {
  console.log('Selected tab index:', args.selectedIndex);
  // Refresh data for selected tab
  this.loadDataForTab(args.selectedIndex);
}

パターン 3：アイコン付きのレスポンシブなタブヘッダー

public headerText: object[] = [
  { text: 'Dashboard', iconCss: 'e-icons e-home' },
  { text: 'Products', iconCss: 'e-icons e-shopping-cart' },
  { text: 'Orders', iconCss: 'e-icons e-receipt' }
];

パターン 4：コンテンツのレンダリングモードの選択

// Use Dynamic mode for memory optimization
<ejs-tab 
  loadOn="Dynamic"  // Only active content in DOM
  heightAdjustMode="Auto">
</ejs-tab>

パターン 5：キーボード操作

// Tab component has built-in keyboard support
// Tab key - focus next header
// Arrow keys - navigate between tabs
// Enter/Space - activate tab
// Users can switch tabs without mouse

主なプロパティとメソッド

共通プロパティ：

• items - タブ項目のコレクション
• selectedIndex - 現在アクティブなタブのインデックス
• heightAdjustMode - コンテンツの高さの管理方法
• loadOn - コンテンツのレンダリングモード（Default、Dynamic、Init）
• overflowMode - オーバーフローの処理（Scrollable、Popup）
• animation - アニメーションの設定
• allowDragAndDrop - ドラッグ＆ドロップの有効／無効を切り替えます（ブール値）
• dragArea - ドラッグ可能な範囲を指定する CSS セレクター
• reorderActiveTab - ポップアップからアクティブなタブを並べ替えます（ブール値）
• headerPlacement - ヘッダーの位置（Top、Bottom、Left、Right）
• enablePersistence - 状態を保存／復元します（ブール値）
• locale - 言語／カルチャーコード（例：'en-US'、'fr-FR'）
• scrollStep - クリックごとにスクロールするピクセル数

主なメソッド：

• .select(index) - プログラムからタブを選択します
• .addTab(items, index) - 新しいタブを追加します
• .removeTab(index) - タブを削除します
• .hideTab(index, hide) - タブを非表示／表示にします（hide=true で非表示、false で表示）
• .refresh() - タブのレイアウトを更新します
• .dataBind() - データバインディングを更新します

重要なイベント：

• selecting - タブ選択の前
• selected - タブ選択の後
• onDragStart - ドラッグ開始前（キャンセル可能）
• dragging - ドラッグ操作中
• dragged - ドロップ完了後（キャンセル可能）
• created - タブコンポーネントの初期化時
• destroyed - タブコンポーネントの破棄時

関連スキル

• ボタンの実装 - タブヘッダーのボタンのスタイル設定について
• フォームの実装 - タブ内のリアクティブフォームについて
• グリッドの実装 - タブ内のデータ表示について

---

次のステップ： 必要に応じて、上記のナビゲーションガイドから適切なリファレンスファイルをお読みください。