syncfusion-javascript-toolbar

Syncfusion TypeScript Toolbar の実装

概要

Syncfusion TypeScript Toolbar は、横方向に配置されたコマンドボタンのグループを表示するナビゲーションコンポーネントです。Essential JS 2 を基盤としており、レスポンシブな動作、テンプレートのサポート、豊富なカスタマイズオプションを備えたプロフェッショナル品質のツールバー機能を提供します。

主な機能の概要

• 複数のオーバーフローモード：柔軟にコンテンツを管理できる Scrollable、Popup、MultiRow、Extended モード
• レスポンシブデザイン：複数のレイアウトオプションで、さまざまな画面サイズに自動的に適応
• 複数の項目タイプ：ボタン、区切り線、入力コンポーネント（NumericTextBox、DropDownList など）
• テンプレートのサポート：HTML 要素または項目コレクションからツールバーを描画
• 豊富なカスタマイズ：CSS スタイル、アイコン、ツールチップ、テンプレート
• キーボードのサポート：完全なキーボードナビゲーションとアクセシビリティへの準拠
• RTL のサポート：右から左に記述する言語を標準でサポート
• イベント処理：包括的なイベント引数を備えた beforeCreate、clicked、keyDown イベント
• テーマとの連携：Fluent2 などのテーマシステムに対応
• セキュリティ機能：ユーザーが提供するコンテンツの HTML サニタイズと XSS 保護

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

次のような場合は Syncfusion Toolbar を選択してください。

• エディター、ドキュメントツール、アプリケーションメニュー向けのコマンドボタンインターフェースが必要な場合
• モバイルやデスクトップの画面サイズに適応するレスポンシブなナビゲーションが必要な場合
• アイコンやスタイルをカスタマイズできる、プロフェッショナル品質のツールバーが必要な場合
• アクセシビリティに準拠したナビゲーションコンポーネントが必要な場合
• テンプレートベースのツールバー描画が必要な場合
• 項目の状態管理（有効化／無効化、トグル状態）が必要な場合
• ツールバー項目のツールチップが必要な場合

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

はじめに

📄 参照： references/getting-started.md

Toolbar を初めて実装する場合は、ここから始めてください。

• インストールと NPM パッケージのセットアップ
• TypeScript の依存関係の設定
• CSS のインポートとテーマのセットアップ
• 項目を使った Toolbar の基本的な初期化
• 最初の動作するコード例
• webpack 設定の使用

項目の設定

📄 参照： references/item-configuration.md

個々のツールバー項目の構成方法と設定方法を学びます。

• テキスト、アイコン、prefixIcon／suffixIcon を指定したボタン項目
• 視覚的にグループ化する区切り線項目
• 統合コンポーネント（NumericTextBox、DropDownList）向けの入力項目
• 項目の配置と位置指定
• 項目 ID と動的な項目へのアクセス
• 幅とサイズのプロパティ

レスポンシブモードとポップアップモード

📄 参照： references/responsive-and-popup.md

ツールバーのオーバーフローとレスポンシブ動作を処理します。

• ナビゲーション矢印とタッチスワイプに対応した Scrollable モード
• コンパクトなレイアウト向けの Popup モード
• 利用可能なスペースに応じた表示モードの切り替え
• 矢印によるスクロールのスクロールステップのカスタマイズ
• タッチ操作とキーボード操作のパターン
• レスポンシブな幅の設定

テンプレートとカスタマイズ

📄 参照： references/template-and-customization.md

カスタムのツールバーレイアウトとスタイルを作成します。

• HTML テンプレートベースのツールバー描画
• 項目単位のテンプレートのカスタマイズ
• スタイル設定への CSS クラスの適用
• HTML コンテンツを含むカスタムボタンテンプレート
• 高度なレイアウトパターンと例
• テーマとのスタイル連携

インタラクティブ操作とコマンド

📄 参照： references/interactivity-and-commands.md

ユーザー操作とコマンドの実行を処理します。

• クリックイベントの処理パターン
• コマンドのカスタマイズと実行
• トグルボタンの実装
• プログラムによる項目の有効化／無効化
• イベントのバインドとイベント引数
• 項目の状態管理

高度な機能

📄 参照： references/advanced-features.md

高度なツールバー機能を実装します。

• Font Awesome アイコンの統合
• ツールバー項目のツールチップ設定
• 右から左に記述する（RTL）言語のサポート
• キーボードナビゲーションのパターン
• アクセシビリティ（WAI-ARIA）への準拠
• ツールバー項目内のリンク
• 複数行のツールバーレイアウト

スタイル設定とアクセシビリティ

📄 参照： references/styling-and-accessibility.md

スタイル設定とアクセシビリティの実装を習得します。

• ツールバーのカスタマイズに使う CSS 構造
• テーマクラス（toolbar、items、buttons、icons）
• 色と外観のカスタマイズ
• WCAG 準拠の要件
• キーボードナビゲーションの実装
• スクリーンリーダーのサポートと ARIA 属性
• アクセシブルなツールバーのベストプラクティス

API リファレンス全編

📄 参照： references/api-reference.md

すべての Toolbar API を網羅したリファレンスです。

• ToolbarModel のプロパティ表（12 件以上のプロパティと使用例）
• ItemModel のプロパティ表（15 件以上のプロパティと使用例）
• イベントのリファレンス（beforeCreate、clicked、created、destroyed、keyDown）
• イベント引数のドキュメント（BeforeCreateArgs、ClickEventArgs、KeyDownEventArgs）
• 列挙型のリファレンス（ItemType、ItemAlign、OverflowOption、OverflowMode、DisplayMode）
• よくあるシナリオ向けの簡単な設定パターン

クイックスタートの例

すぐに始められる、最小限の動作例を紹介します。

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

// Create a basic toolbar with button items
let toolbar: Toolbar = new Toolbar({
    items: [
        { text: 'Cut' },
        { text: 'Copy' },
        { text: 'Paste' },
        { type: 'Separator' },
        { text: 'Bold' },
        { text: 'Italic' },
        { text: 'Underline' }
    ]
});

// Render to DOM element
toolbar.appendTo('#element');

HTML コンテナー：

<!DOCTYPE html>
<html>
<head>
    <link href="url" rel="stylesheet" />
</head>
<body>
    <div id="element"></div>
    <script src="app.js"></script>
</body>
</html>

よくあるパターン

パターン 1：アイコン付きツールバー

let toolbar: Toolbar = new Toolbar({
    items: [
        { prefixIcon: 'e-icons e-cut', text: 'Cut' },
        { prefixIcon: 'e-icons e-copy', text: 'Copy' },
        { prefixIcon: 'e-icons e-paste', text: 'Paste' },
        { type: 'Separator' },
        { prefixIcon: 'e-icons e-bold', text: 'Bold' }
    ]
});
toolbar.appendTo('#element');

パターン 2：レスポンシブなツールバー（スクロール可能）

let toolbar: Toolbar = new Toolbar({
    width: 600,
    overflowMode: 'Scrollable',
    items: [
        { text: 'Cut', prefixIcon: 'e-cut-icon' },
        { text: 'Copy', prefixIcon: 'e-copy-icon' },
        { text: 'Paste', prefixIcon: 'e-paste-icon' },
        // ... more items
    ]
});
toolbar.appendTo('#element');

パターン 3：項目の配置制御

let toolbar: Toolbar = new Toolbar({
    items: [
        { text: 'Cut' },
        { text: 'Copy' },
        { type: 'Separator' },
        { text: 'Save', align: 'Right' },  // Push to right side
        { text: 'Help', align: 'Right' }
    ]
});
toolbar.appendTo('#element');

パターン 4：イベント処理

let toolbar: Toolbar = new Toolbar({
    items: [
        { id: 'cut-btn', text: 'Cut' },
        { id: 'copy-btn', text: 'Copy' }
    ],
    clicked: (args: ClickEventArgs) => {
        console.log(`Item ${args.item.id} clicked`);
    }
});
toolbar.appendTo('#element');

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

プロパティ	型	用途
items	ItemModel[]	表示するツールバー項目の配列
width	Number/String	ツールバーの幅（px またはパーセンテージ）
overflowMode	'Scrollable' | 'Popup'	オーバーフローしたコンテンツの処理方法
scrollStep	Number	矢印クリック時にスクロールするピクセル数（Scrollable モード）
enableRtl	Boolean	RTL 言語向けに右から左へのレイアウトを有効にする
clicked	Function	項目クリック時のイベントハンドラー

よくあるユースケース

ユースケース 1：テキストエディターのツールバー

• 切り取り、コピー、貼り付け、太字、斜体、下線のボタンを表示する
• prefixIcon プロパティでアイコンを使用する
• 視覚的にグループ化するため、区切り線を追加する
• 各コマンドのクリックハンドラーを実装する

ユースケース 2：モバイル対応ツールバー

• モバイルでは Popup overflowMode を設定する
• デスクトップではスクロール可能モードを設定する
• レスポンシブな幅（パーセンテージベース）を使用する
• さまざまな画面サイズでテストする

ユースケース 3：外観のカスタマイズ

• テーマカラーを使った CSS クラスを適用する
• モダンな外観にするため、Font Awesome アイコンを使用する
• アクセシビリティ向上のため、ツールチップを追加する
• 特定のツールバー項目に異なるスタイルを適用する

インストールの前提条件

必須パッケージ：

npm install @syncfusion/ej2-navigations
npm install @syncfusion/ej2-base
npm install @syncfusion/ej2-buttons
npm install @syncfusion/ej2-popups

TypeScript プロジェクトの場合、webpack と TypeScript が適切に設定されていることを確認してください（node v14.15.0 以降を推奨）。

---

注： 各トピックの詳細については、上記のナビゲーションガイドにある該当するリファレンスファイルを参照してください。各リファレンスには、完全なコード例、エッジケース、トラブルシューティングのガイダンスが記載されています。