syncfusion-javascript-sidebar

Syncfusion TypeScript サイドバー

Sidebar は、メインコンテンツの横に配置されるサイドコンテナーとして機能する、展開・折りたたみ可能なナビゲーションコンポーネントです。Syncfusion Essential JS 2 を使用する TypeScript アプリケーションで、レスポンシブなナビゲーションメニュー、ドッキング可能なパネル、モバイル向けのレイアウトを構築するのに最適です。

主な機能

• 4 種類の展開タイプ：Over、Push、Slide、Auto による柔軟なコンテンツ操作
• ドッキングのサポート：サイドバーの全機能を維持しながら、ドッキングしたアイコン用のスペースを確保
• アニメーションとジェスチャー：タッチスワイプとモバイルジェスチャーに対応した滑らかな遷移
• レスポンシブデザイン：デスクトップ（Push）とモバイル（Over）モード間で動作を自動調整
• カスタムターゲティング：暗黙的または明示的なターゲティングにより、任意の HTML コンテナーにサイドバーを配置
• コンテンツ統合：リストビュー、ツリービュー、カスタム HTML コンテンツに対応

ナビゲーションガイド

タスクに応じて、適切なリファレンスファイルをお読みください。

はじめに

📄 参照： references/getting-started.md（約 150 行）

• パッケージのインストールと依存関係
• webpack を使用したプロジェクトのセットアップ
• HTML 構造と初期化
• CSS のインポートと設定
• 最初のサイドバーの実行

Target プロパティの動作（重要）

サイドバーが作用する要素を制御する、次の 2 つのモードがあります。

暗黙的なターゲティング（推奨・デフォルト）：

• サイドバーは自動的に次の兄弟 <div> をターゲットにします
• ラッパー要素は不要です
• シンプルで読みやすいコードです。ほとんどのアプリケーションで使用してください

明示的なターゲティング（上級者向け）：

• [target]="'#selector'" プロパティを使用します
• CSS トランスフォームのため、ターゲットコンテナー内に内側の <div> ラッパーが必要です
• 要素（ヘッダー、フッター）を除外する場合や、細かな制御が必要な場合に使用します

📄 参照： references/positioning-and-target.md（約 160 行）

• ターゲットセレクターと HTML 構造
• 暗黙的および明示的なターゲティングのパターン
• 固定配置とレイアウトに関する考慮事項
• 一般的なターゲット設定のシナリオ

サイドバーの種類と位置

📄 参照： references/sidebar-types-and-positions.md（目次付き、約 180 行）

• 4 種類の展開タイプの説明：Over、Push、Slide、Auto
• 位置のオプション：Left または Right
• タイプの比較表と使い分け
• タイプの切り替えとレスポンシブな動作

開閉メソッドとライフサイクルイベント

📄 参照： references/open-and-close.md（約 250 行）

• show()、hide()、toggle() メソッド
• 状態イベント：open、close、change と EventArgs プロパティ
• ライフサイクルイベント：created、destroyed
• プログラムによるサイドバーの状態管理
• args.cancel によるデフォルト動作の防止
• args.isInteracted によるユーザー操作の検出

自動クローズとレスポンシブな動作

📄 参照： references/auto-close-responsive.md（約 140 行）

• レスポンシブなブレークポイントのための mediaQuery プロパティ
• ドキュメントクリック時の自動クローズ動作
• 閉じるボタンの実装
• モバイルとデスクトップのビューポートへの対応

ドッキングサイドバー

📄 参照： references/docking-sidebar.md（目次付き、約 170 行）

• enableDock および dockSize プロパティ
• ドッキング状態でアイコンのみを表示
• テキストの表示を制御する CSS
• ドッキング状態のユースケース

アニメーションとジェスチャー

📄 参照： references/animations-and-gestures.md（目次付き、約 200 行）

• animate プロパティと時間設定
• ジェスチャーのサポート：スワイプとタッチ操作
• モバイル操作のパターン
• アニメーションのパフォーマンス最適化

コンテンツ統合

📄 参照： references/content-integration.md（目次付き、約 180 行）

• リストビューコンテンツを含むサイドバー
• ツリービューコンテンツを含むサイドバー
• 複数のサイドバーインスタンス
• 同じ位置に配置する複数のサイドバー
• カスタム HTML コンテンツのパターン

スタイリングとテーマ設定

📄 参照: references/styling-and-theming.md（約200行、目次付き）

• CSS クラスとセレクター（.e-sidebar、.e-open、.e-close、.e-dock）
• 種類と位置に応じたサイドバーのカスタマイズ
• 背景オーバーレイのスタイリングとカスタマイズ
• レスポンシブデザインとモバイル向けスタイリング

トラブルシューティング

📄 参照: references/troubleshooting.md（約120行）

• よくある問題と解決策
• Z-index とスタッキングコンテキストの問題
• パフォーマンス最適化のヒント
• ジェスチャーの競合とジェスチャーが機能しない問題
• モバイルのレスポンシブ対応のデバッグ

API メソッドとプロパティのリファレンス

📄 参照: references/api-methods-properties.md（約580行、包括的な API 解説）

• デフォルト値と型を含む、すべてのサイドバーのプロパティ：type、position、width、target、showBackdrop、animate、closeOnDocumentClick、enableGestures、enableDock、dockSize、mediaQuery、zIndex、isOpen、enableRtl、enablePersistence
• 動作する例を含む、すべてのメソッド：show()、hide()、toggle()、getRootElement()、destroy()、refresh()、dataBind()
• イベントリスナーの管理：addEventListener()、removeEventListener()
• レスポンシブ設定の例
• 永続化と状態管理
• RTL と国際化のサポート

クイックスタートの例

暗黙的なターゲット指定（推奨）

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

// Create sidebar - automatically targets next sibling div
let sidebar: Sidebar = new Sidebar({
    type: 'Push',
    width: '280px'
});
sidebar.appendTo('#sidebar');

// Toggle on button click
document.querySelector('#toggle')?.addEventListener('click', () => {
    sidebar.toggle();
});

<aside id="sidebar">
    <div class="title">Navigation Menu</div>
    <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
    </ul>
</aside>


<div id="main-content">
    <button id="toggle">Toggle Sidebar</button>
    <div class="content">Main content here</div>
</div>

明示的なターゲット指定（内側のラッパーを使用）

let sidebar: Sidebar = new Sidebar({
    type: 'Push',
    target: '#content-area',  // Explicit target selector
    width: '280px'
});
sidebar.appendTo('#sidebar');

<aside id="sidebar">
    <div class="title">Navigation</div>
</aside>

<div id="content-area">              
    <div>                             
        <button id="toggle">Toggle</button>
        <div class="content">Main content</div>
    </div>
</div>

よく使われるパターン

パターン 1：モバイル対応サイドバー

let sidebar: Sidebar = new Sidebar({
    type: 'Auto',  // Over on mobile, Push on desktop
    mediaQuery: window.matchMedia('(max-width: 768px)'),
    width: '280px'
});
sidebar.appendTo('#sidebar');

パターン 2：ドッキング可能なアイコンサイドバー

let sidebar: Sidebar = new Sidebar({
    enableDock: true,
    dockSize: '72px',
    width: '220px'
});
sidebar.appendTo('#sidebar');

// CSS for docked state
// .e-dock.e-close span.e-text { display: none; }
// .e-dock.e-open span.e-text { display: inline-block; }

パターン 3：イベントを使った切り替え

let sidebar: Sidebar = new Sidebar({
    open: (e) => console.log('Sidebar opened'),
    close: (e) => console.log('Sidebar closed'),
    showBackdrop: true
});
sidebar.appendTo('#sidebar');

// Programmatic control
document.querySelector('#open')?.addEventListener('click', () => sidebar.show());
document.querySelector('#close')?.addEventListener('click', () => sidebar.hide());
document.querySelector('#toggle')?.addEventListener('click', () => sidebar.toggle());

主要プロパティのリファレンス

プロパティ	型	デフォルト	用途
type	'Over' | 'Push' | 'Slide' | 'Auto'	'Auto'	展開時の動作
position	'Left' | 'Right'	'Left'	サイドバーの位置
width	string	'100%'	サイドバーの幅
target	string	null	ターゲット要素のセレクター（明示的）
enableDock	boolean	false	ドッキング／折りたたみ状態を有効にする
dockSize	string	'52px'	ドッキング時の幅
showBackdrop	boolean	false	オーバーレイの背景を表示する
animate	boolean	true	アニメーションを有効にする
mediaQuery	MediaQueryList	null	レスポンシブ対応のブレークポイント
isOpen	boolean	false	初期の開いた状態

よくあるユースケース

• ナビゲーションメニュー：折りたたみ可能なメニュー項目を含む、アプリのメインナビゲーション
• ドッキング可能なパネル：ホバー／クリックで展開する、アイコンベースのナビゲーション
• モバイルメニュー：ジェスチャーと Auto タイプを使用した、タッチ操作に適したサイドバー
• 複数階層のナビゲーション：リストまたはツリービュー形式の階層を備えたサイドバー
• 管理ダッシュボード：ロールベースのメニュー項目を含む、折りたたみ可能なサイドバー
• コンテンツドロワー：フィルター、設定、その他のコンテンツ用のサイドパネル

---

**次のステップ：**現在のタスクに応じてリファレンスファイルを選び、詳細なドキュメントを読んでください。Sidebar コンポーネントを初めて使用する場合は、「Getting Started」から始めてください。