syncfusion-aspnetcore-toolbar

ASP.NET Core ツールバーの実装

Syncfusion Toolbar は、ボタン、入力コントロール、カスタムテンプレートをレスポンシブな横型コンテナーにまとめる、コマンド駆動型のナビゲーションコンポーネントです。アプリケーションのヘッダー、ドキュメントエディター、スクロール可能モードやポップアップモードでレスポンシブなオーバーフローに対応する必要があるツールバーに最適です。

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

次のような場合に、このスキルを使用してください。

• エディター、ダッシュボード、アプリケーションヘッダー向けのコマンドバーを作成する
• スクロール可能モードやポップアップモードでオーバーフローに対応するレスポンシブなツールバーを構築する
• アイコン、テキスト、カスタムテンプレートを使ったボタンコントロールを統合する
• テキストボックス、ドロップダウン、ラジオボタンなどの入力コンポーネントをツールバーに追加する
• ツールチップ、配置、キーボードナビゲーションを使ってツールバーの動作をカスタマイズする
• オーバーフローの優先順位とポップアップのカスタマイズを使って項目の表示状態を管理する
• カスタムボタンとイベント処理を使って状態の切り替えやアクションを管理する

コンポーネントの概要

Toolbar コントロールが提供する機能は次のとおりです。

• 項目の種類：ボタン（既定）、区切り線、入力コンテナー
• レスポンシブモード：スクロール可能（ナビゲーション矢印付きの既定モード）とポップアップオーバーフロー
• テンプレートのサポート：項目ごとにカスタマイズできる HTML ベースのレンダリング
• スタイル設定：CSS クラス、アイコン（接頭辞／接尾辞）、幅の制御、テーマ
• イベント処理：クリックイベント、作成／破棄イベント、キーボードナビゲーション
• キーボードのサポート：設定可能な tabIndex による Tab ナビゲーションと、矢印キーのサポート

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

以下のリファレンスファイルを参照して、各機能と実装パターンを確認してください。

はじめに

📄 参照： references/getting-started.md

• NuGet パッケージのインストールとセットアップ
• TagHelper の登録と設定
• CSS とスクリプトリソースの追加
• 項目を使った基本的なツールバーの作成
• アイコンとテキストを使った最初に動作する例

項目の設定

📄 参照： references/item-configuration-guide.md

• テキスト、アイコン、幅のプロパティを持つボタン項目
• 区切り線項目と動作上の制約
• 統合コンポーネント（NumericTextBox、DropDownList、RadioButton）用の入力項目
• tabIndex プロパティを使った Tab キーナビゲーション
• プロパティの一覧表と使用例

レスポンシブモードとオーバーフロー

📄 参照： references/responsive-modes-and-overflow.md

• ナビゲーション矢印とスワイプをサポートするスクロール可能モード
• コマンドの優先順位システムを備えたポップアップモード
• オーバーフローのプロパティオプション（show、hide、none）
• 常にポップアップに表示する項目の ShowAlwaysInPopup
• ボタンテキストの表示を設定する ShowTextOn プロパティ
• 実際の利用場面を想定したレスポンシブな使用例

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

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

• HTML ベースのテンプレートレンダリングの構造
• 文字列とクエリセレクターを使った項目テンプレート
• e-overflow-show クラスと e-overflow-hide クラスを使ったポップアップのカスタマイズ
• ボタンのテキストモード（e-popup-text、e-toolbar-text）
• Menu コンポーネントとの統合
• CSS クラスのカスタマイズパターン

高度な機能

📄 参照： references/advanced-features.md

• トグルボタンの実装と状態管理
• tooltipText プロパティを使ったツールチップの統合
• htmlAttributes と cssClass を使ったコマンドのカスタマイズ
• ナビゲーションのスクロールステップのカスタマイズ
• 複雑なコントロールを使った項目ごとのカスタムテンプレート
• イベント引数とハンドラーの実装

API リファレンス

📄 参照： references/api-reference.md

• Toolbar のすべてのプロパティと既定値
• サポートされているすべてのイベントとシグネチャ
• 項目設定プロパティ
• オーバーフローと配置の列挙値
• プログラム制御用メソッドのシグネチャ
• 各 API の TagHelper 対応コード例

クイックスタートの例

ボタンと区切り線を使った基本的なツールバー：

@addTagHelper *, Syncfusion.EJ2


<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>


<ejs-scripts></ejs-scripts>


<ejs-toolbar id="toolbar" width="600px">
    <e-toolbar-items>
        <e-toolbar-item text="Cut" prefixIcon="e-cut-icon tb-icons" tooltipText="Cut"></e-toolbar-item>
        <e-toolbar-item text="Copy" prefixIcon="e-copy-icon tb-icons" tooltipText="Copy"></e-toolbar-item>
        <e-toolbar-item text="Paste" prefixIcon="e-paste-icon tb-icons" tooltipText="Paste"></e-toolbar-item>
        <e-toolbar-item type="Separator"></e-toolbar-item>
        <e-toolbar-item text="Bold" prefixIcon="e-bold-icon tb-icons" tooltipText="Bold"></e-toolbar-item>
        <e-toolbar-item text="Italic" prefixIcon="e-italic-icon tb-icons" tooltipText="Italic"></e-toolbar-item>
    </e-toolbar-items>
</ejs-toolbar>

よく使われるパターン

ツールチップ付きのアイコンのみのボタン： prefixIcon と tooltipText を使用すると、操作できることを示しながら、表示領域を最小限に抑えられます。

優先度を考慮したレスポンシブなオーバーフロー： 常に表示するボタンには overflow="show" を設定し、ポップアップに移動する補助的な操作には overflow="hide" を設定します。

ツールバー内の入力コントロール： type="Input" を使用すると、フィルタリングや設定用に DropDownList や NumericTextBox などのコンポーネントを埋め込めます。

カスタムテンプレート： 複雑なカスタムコントロールには、HTML 文字列またはクエリーセレクターを指定した template プロパティを使用します。

タブナビゲーション： 項目に tabIndex を設定すると、矢印キーに加えて Tab／Shift+Tab キーによるキーボードナビゲーションが有効になります。

主なプロパティ

• width：ツールバーコンテナーの幅を設定します（ピクセルまたはパーセンテージ）。
• overflowMode：レスポンシブ動作を制御します。Scrollable（既定）または Popup を指定します。
• scrollStep：ナビゲーション矢印をクリックしたときにスクロールする距離です。
• allowKeyboard：キーボードナビゲーションを有効にします（既定値：true）。
• enableCollision：ポップアップの衝突検出を有効にします。
• cssClass：ツールバーのルートにカスタム CSS クラスを適用します。

項目設定クイックリファレンス

項目の種類	用途	主なプロパティ
Button	コマンド操作	text、prefixIcon、suffixIcon、width、tooltipText
Separator	視覚的な区切り	type: "Separator"
Input	コンポーネントの埋め込み	type: "Input"、template
Custom	複雑なコントロール	type: "Button"、template

よくあるユースケース

• テキストエディターのツールバー：区切りを含む、切り取り、コピー、貼り付け、書式設定ボタン
• ダッシュボードのフィルターバー：データのフィルタリングに使う DropDownList と DatePicker
• アプリケーションのヘッダー：ブランド表示＋ナビゲーションボタン＋ユーザーメニュー
• メディアプレーヤーのコントロール：カスタムテンプレートを使った再生、一時停止、停止、音量調整
• ドキュメントツール：レスポンシブなオーバーフロー処理を備えた保存、印刷、エクスポート

---

最初のツールバーを設定するには、スタートガイドから始めてください。