syncfusion-aspnetcore-tabs

Syncfusion Core Tabs の実装

Syncfusion Tab コンポーネントは、コンテンツを個別に選択できるタブに整理するためのナビゲーションコントロールです。各タブは、ヘッダーと、タブの選択時に表示される関連コンテンツで構成されます。

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

• 関連するコンテンツをタブナビゲーションで論理的なセクションに整理する
• 手順に沿って進めるウィザード形式のインターフェースを作成する
• 折りたたみ可能なアコーディオン形式のインターフェースを構築する
• ドラッグ＆ドロップで並べ替え可能なタブ項目を実装する
• 選択状態を保持するタブ選択を設定する
• ヘッダーのスタイル、位置、アニメーションをカスタマイズする
• コンテンツを動的に、または外部ソースから読み込む

コンポーネントの概要

主な機能：

• HeaderPlacement：上、下、左、右に配置
• コンテンツの読み込みモード：Init（すべて）、Demand（遅延読み込み）、Dynamic（置き換え）
• イベントコールバックを使用したドラッグ＆ドロップによる並べ替え
• スムーズな遷移のためのアニメーション設定
• RTL サポートとローカライズ
• ページの再読み込み後も状態を保持
• キーボードナビゲーション（Tab キーのサポート）
• 高さの管理：None、Auto、Content、Fill

主要なプロパティ：

• items：ヘッダーとコンテンツを定義する TabItem オブジェクトの配列
• selectedItem：アクティブなタブのインデックス
• heightAdjustMode：コンテンツパネルの高さの動作を制御
• allowDragAndDrop：ドラッグによる並べ替えを有効または無効にする
• headerPlacement：タブヘッダーの位置
• enablePersistence：再読み込み時に選択したタブを保存および復元
• loadOn：コンテンツの読み込み方法（Init／Demand／Dynamic）

ドキュメントとナビゲーションガイド

はじめに

📄 参照先： references/getting-started.md

• NuGet パッケージのインストールとセットアップ
• Tag Helper の設定
• CSS／スクリプトの参照（CDN と NPM）
• TagHelper を使用した基本的な Tab の初期化
• JSON の項目コレクションと HTML 要素のバインド

タブの設定とコンテンツ

📄 参照先： references/tab-content-rendering.md

• タブヘッダーの構造とカスタマイズ
• コンテンツのレンダリングモード（HTML、Partial View、External POST、テンプレート）
• 動的なコンテンツの読み込みと設定
• コンテンツテンプレートとインラインレンダリング

タブの操作機能

📄 参照先： references/tab-interaction.md

• プログラムによるタブ選択とユーザー操作によるタブ選択
• クリックハンドラーと選択イベント
• Tab キーをサポートするキーボードナビゲーション
• タブ間のドラッグ＆ドロップによる並べ替え
• 入れ子になったタブと階層構造

スタイルとレイアウト

📄 参照先： references/styling-layout.md

• CSS クラスのカスタマイズ（e-fill、e-background、e-accent）
• タブの高さとコンテンツの高さの調整モード
• 水平方向のスクロールとポップアップによるオーバーフローモード
• ヘッダーアイコンの配置と向き
• レスポンシブデザインのパターン

高度な機能

📄 参照先： references/advanced-features.md

• 状態保持の設定
• ローカライズと国際化
• RTL（右から左）サポート
• アニメーションのカスタマイズ（前へ／次へエフェクト）
• 折りたたみ可能なタブとウィザードのパターン
• プログラム制御用の API メソッド

API リファレンス

📄 参照先： references/api-reference.md

• API ドキュメントの全項目
• すべてのプロパティと型、デフォルト値
• イベントのシグネチャとパラメーター
• 実行時の操作に使用するメソッド

クイックスタートの例

TagHelper 構文を使用した、3 項目の基本的な Tab：

@using Syncfusion.EJ2.Navigations;

<ejs-tab id="ej2Tab">
    <e-tab-tabitems>
        <e-tab-tabitem header="@(new TabHeader { Text = "Home" })" content="Welcome to home tab"></e-tab-tabitem>
        <e-tab-tabitem header="@(new TabHeader { Text = "Profile" })" content="Your profile information"></e-tab-tabitem>
        <e-tab-tabitem header="@(new TabHeader { Text = "Settings" })" content="Adjust your settings"></e-tab-tabitem>
    </e-tab-tabitems>
</ejs-tab>

よく使われるパターン

コンテンツの遅延読み込み（Demand モード）

<ejs-tab id="ej2Tab" loadOn="ContentLoad.Demand">
    <e-tab-tabitems>
        <e-tab-tabitem header="@(new TabHeader { Text = "Tab1" })" content="Content loads on demand"></e-tab-tabitem>
        <e-tab-tabitem header="@(new TabHeader { Text = "Tab2" })" content="Second tab content"></e-tab-tabitem>
    </e-tab-tabitems>
</ejs-tab>

動的コンテンツのみ（Dynamic モード）

<ejs-tab id="ej2Tab" loadOn="ContentLoad.Dynamic">
    
</ejs-tab>

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

<ejs-tab id="ej2Tab" allowDragAndDrop="true">
    
</ejs-tab>

ヘッダーの配置（垂直ナビゲーション）

<ejs-tab id="ej2Tab" headerPlacement="@HeaderPosition.Left">
    
</ejs-tab>

高さの管理

<ejs-tab id="ej2Tab" heightAdjustMode="@HeightStyles.Auto">
    
</ejs-tab>

状態の保持

<ejs-tab id="ej2Tab" enablePersistence="true" selectedItem="1">
    
</ejs-tab>

主要イベント

イベント	トリガー	用途
selecting	タブを選択する前	タブの変更を検証するか、選択を防止します
selected	タブを選択した後	タブの切り替え時に処理を実行し、ユーザーによる選択かプログラムによる選択かを検出します
adding	タブ項目を追加する前	新しい項目を挿入前に検証します
added	タブ項目を追加した後	新しいタブの追加後に UI を更新します
removing	タブ項目を削除する前	削除を確認するか、データをクリーンアップします
removed	タブ項目を削除した後	削除後に状態を更新します
onDragStart	ドラッグ操作の前	特定の項目のドラッグを防止します
dragging	ドラッグ操作中	視覚的なフィードバックを提供します
dragged	ドロップ操作の後	データを更新するか、外部ソースに移動します
created	コンポーネントの初期化時	関連するコントロールを初期化します
destroyed	コンポーネントの破棄時	リソースをクリーンアップします

統合チェックリスト

• NuGet パッケージをインストール済み：Syncfusion.EJ2.AspNet.Core
• _ViewImports.cshtml に Tag Helper を登録済み
• レイアウトで CSS テーマを参照済み（CDN または NPM）
• レイアウトの body にスクリプトマネージャー <ejs-scripts> を配置済み
• タブコンポーネントの ID がページごとに一意
• コンテンツ戦略を選択済み（Init/Demand/Dynamic）
• レイアウトに合わせて高さモードを設定済み
• 動的な動作が必要な場合はイベントを接続済み
• タブの状態を再読み込み後も保持する場合は永続化を有効化済み
• アクセシビリティを確認済み（キーボード操作）

---

次のステップ： 機能要件に応じて、該当するリファレンスファイルを確認してください。基本的なセットアップについては getting-started.md から始め、必要に応じて高度な機能や API リファレンスを確認してください。