syncfusion-aspnetcore-popups

Syncfusion ASP.NET Core ポップアップ

ダイアログ

このスキルでは、<ejs-dialog> Tag Helper API を使用して、ASP.NET Core アプリケーションで Syncfusion Dialog を実装、設定、カスタマイズする方法を説明します。セットアップ、モーダル表示、配置、アニメーション、テンプレート、イベント、アクセシビリティ、スタイル設定を扱います。

クイックリンク

• API リファレンス
• はじめに
• 基本機能
• 配置とサイズ設定
• アニメーションとトランジション
• テンプレート
• アクセシビリティとローカライズ
• イベントと操作
• スタイルとテーマ

クイックスタート（Tag Helper）

Razor ビューで次のように記述します。

@using Syncfusion.EJ2

<ejs-dialog id="dialog" header="Welcome" isModal="true" width="500px">
    <e-content-template>
        <p>This is a basic dialog with default settings.</p>
    </e-content-template>
</ejs-dialog>

<script>
    window.onload = function () {
        document.getElementById('openBtn').onclick = function () {
            document.getElementById('dialog').ej2_instances[0].show();
        };
    };
</script>

レイアウト（_Layout.cshtml）にスクリプトマネージャーとスタイルを含めてください。

<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-dialog id="confirmDialog" header="Confirm Action" isModal="true" width="400px">
    <e-dialog-buttons>
        <e-dialog-dialogbutton content="Yes" isPrimary="true" click="confirmAction"></e-dialog-dialogbutton>
        <e-dialog-dialogbutton content="No" click="closeDialog"></e-dialog-dialogbutton>
    </e-dialog-buttons>
    <e-content-template>
        <p>Are you sure you want to proceed?</p>
    </e-content-template>
</ejs-dialog>

ヘッダー付きのドラッグ可能なダイアログ

<ejs-dialog id="draggableDialog" 
    header="Drag Me" 
    allowDragging="true" 
    width="500px" 
    showCloseIcon="true">
    <e-content-template>
        <p>Grab the header to drag this dialog.</p>
    </e-content-template>
</ejs-dialog>

中央配置のダイアログ

<ejs-dialog id="centeredDialog" 
    header="Centered Position" 
    width="500px">
    <e-dialog-position x="center" y="center"></e-dialog-position>
    <e-content-template>
        <p>This dialog is centered on the page.</p>
    </e-content-template>
</ejs-dialog>

主なプロパティ

Tag Helper 属性	型	用途	例
header	string	ダイアログのタイトルバーのテキスト	header="Confirm Delete"
isModal	bool	ダイアログの背後にオーバーレイを表示	isModal="true"
width	string	ダイアログの幅（px、%）	width="500px"
height	string	ダイアログの高さ（px、%）	height="300px"
minHeight	string	ダイアログの最小の高さ	minHeight="150px"
allowDragging	bool	ドラッグによる位置変更を有効化	allowDragging="true"
enableResize	bool	ユーザーによるサイズ変更を有効化	enableResize="true"
showCloseIcon	bool	閉じる（X）ボタンを表示	showCloseIcon="true"
closeOnEscape	bool	Escape キーで閉じる	closeOnEscape="true"
visible	bool	初期表示状態	visible="false"
target	string	対象コンテナーのセレクター	target="#container"
cssClass	string	カスタム CSS クラス	cssClass="my-dialog"
enableRtl	bool	右から左への表示	enableRtl="true"
enablePersistence	bool	再読み込み後も状態を保持	enablePersistence="true"
zIndex	double	重なり順のレベル	zIndex="2000"
<e-dialog-position>	DialogPositionData	X/Y の位置指定	x="center" y="center"
<e-dialog-animationsettings>	DialogAnimationSettings	開閉アニメーション	effect="Zoom" duration="400"
footerTemplate	string	カスタムフッター HTML 文字列	footerTemplate="<span>...</span>"

削除された無効な API： is-hidden（visible="false" を使用）、position-x／position-y の単独属性（<e-dialog-position> を使用）、allow-resizing（enable-resize を使用）、max-height、max-width、min-width（サポート対象外）。

次のステップ

インストール手順、NuGet パッケージのセットアップ、設定の詳細については、getting-started.md をお読みください。

定義済みダイアログ

定義済みダイアログは、DialogUtility JavaScript ユーティリティクラスを使用して命令的に開きます。コンポーネントをセットアップすることなく、すぐに使えるアラート、確認、プロンプトのダイアログを提供します。簡単な通知やユーザー確認には、定義済みダイアログを使用してください。

主な概念

定義済みダイアログは、Tag Helper コンポーネントではありません。JavaScript を使って呼び出します。

ej.popups.DialogUtility.alert({ ... });
ej.popups.DialogUtility.confirm({ ... });

---

クイックスタート

<button class="e-btn e-danger" onclick="showAlert()">Alert</button>

<script>
    function showAlert() {
        ej.popups.DialogUtility.alert({
            title: 'Low Battery',
            width: '250px',
            content: '10% of battery remaining'
        });
    }
</script>

---

ドキュメントガイド

はじめに

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

• インストールとセットアップ
• Alert、Confirm、Prompt の基本例
• JavaScript による呼び出しパターン

位置

📄 参照： references/predefineddialog-position.md

• X/Y 値を指定する position プロパティ
• 中央、上、下、左、右への配置
• ピクセル単位のカスタムオフセット

アニメーション

📄 読む: references/predefineddialog-animation.md

• エフェクト、時間、遅延を指定する animationSettings
• Alert、Confirm、Prompt のアニメーション例

ドラッグ可能

📄 読む: references/predefineddialog-draggable.md

• ブール型プロパティ isDraggable
• ダイアログをドラッグして位置を変更する例

サイズ

📄 読む: references/predefineddialog-dimension.md

• width および height プロパティ
• サイズ制約（min-width、max-width）を指定する cssClass

カスタマイズ

📄 読む: references/predefineddialog-customization.md

• okButton / cancelButton のカスタマイズ
• showCloseIcon と closeOnEscape
• HTML 文字列を使ったカスタムコンテンツ

API リファレンス

📄 読む: references/predefineddialog-api.md

• DialogUtility.alert() / confirm() の全オプションプロパティ
• サポートされているすべてのフィールドと型

---

よく使われるパターン

アラートダイアログ：

ej.popups.DialogUtility.alert({
    title: 'Info',
    content: 'Operation complete.',
    width: '250px'
});

確認ダイアログ：

var dialogObj = ej.popups.DialogUtility.confirm({
    title: 'Delete?',
    content: 'Are you sure?',
    width: '300px',
    okButton: { text: 'Yes', click: function() { /* delete */ dialogObj.hide(); } },
    cancelButton: { text: 'No', click: function() { dialogObj.hide(); } }
});

プロンプトダイアログ：

var dialogObj = ej.popups.DialogUtility.confirm({
    title: 'Enter Name',
    content: '<p>Your name:</p><input id="nameInput" class="e-input" placeholder="Type here..." />',
    width: '300px',
    okButton: { text: 'Submit', click: function() { var val = document.getElementById('nameInput').value; dialogObj.hide(); } },
    cancelButton: { click: function() { dialogObj.hide(); } }
});

---

ツールチップ

ユーザーが要素にカーソルを合わせる、クリックする、またはフォーカスを当てたときに、役立つ情報やヒントを表示するツールチップコンポーネントです。<ejs-tooltip> タグヘルパーは、柔軟な位置指定、アニメーション、複数のトリガーモード、アクセシビリティ機能を提供します。

パッケージ： Syncfusion.EJ2.AspNet.Core
タグヘルパー： <ejs-tooltip>

クイックスタート

<ejs-tooltip id="tooltip" target="#target" position="TopCenter" content="Tooltip Content">
    <e-content-template>
        <button class="e-btn" id="target">Show Tooltip</button>
    </e-content-template>
</ejs-tooltip>

---

ドキュメントガイド

導入とセットアップ

📄 読む: references/tooltip-getting-started.md

• インストールと CSS のインポート
• 単一の要素に表示する基本的なツールチップ
• title 属性を使った複数ターゲットのツールチップ
• アプリケーションの実行

コンテンツ

📄 読む: references/tooltip-content.md

• 文字列コンテンツと HTML マークアップ
• <e-content-template> によるテンプレートコンテンツ
• beforeRender イベントによる動的コンテンツ
• セキュリティのための HTML サニタイズ

位置指定

📄 読む: references/tooltip-positioning.md

• 12 種類の静的な位置（TopLeft、TopCenter、TopRight、BottomLeft など）
• ヒントポインターの位置（Start、Middle、End）
• refresh() メソッドによる動的な位置指定
• オフセット値（offsetX、offsetY）
• 衝突処理（windowCollision）

表示モード

📄 読む: references/tooltip-open-mode.md

• opensOn を使った Auto、Hover、Click、Focus、Custom モード
• 複数モードの組み合わせ（例：opensOn="Hover Click"）
• 閉じるボタン付きの固定表示モード（isSticky）
• 表示／非表示の遅延（openDelay、closeDelay）

アニメーション

📄 読む: references/tooltip-animation.md

• 開閉エフェクトを指定する <e-tooltip-animationsettings>
• 7 種類以上のアニメーションエフェクト（FadeIn、ZoomIn、SlideUp など）
• 時間と遅延の設定
• effect: 'None' でアニメーションを無効化

カスタマイズ

📄 読む: references/tooltip-customization.md

• カスタムスタイルを指定する cssClass
• ヒントポインターの表示とカスタマイズ
• 寸法（width、height）
• RTL サポート（enableRtl）
• マウス追従（mouseTrail）

アクセシビリティ

📄 読む: references/tooltip-accessibility.md

• WCAG 2.2 および Section 508 への準拠
• ARIA 属性（role、aria-describedby、aria-hidden）
• キーボード操作（Tab、Escape）
• スクリーンリーダーのサポートとフォーカス管理
• アクセシブルなツールチップのベストプラクティス

API リファレンス

📄 読む: references/tooltip-api.md

• 型とデフォルト値を含むすべてのプロパティ
• メソッド：open()、close()、refresh()、destroy()、dataBind()
• イベント：BeforeRender、AfterOpen、AfterClose、Created、Destroyed
• Position と TipPointerPosition の列挙値

---

一般的なパターン

ボタンの基本的なツールチップ：

<ejs-tooltip id="tooltip" target="#target" position="TopCenter" content="Submit the form">
    <e-content-template>
        <button class="e-btn" id="target">Submit</button>
    </e-content-template>
</ejs-tooltip>

複数ターゲットのツールチップ：

<ejs-tooltip id="tooltip" target=".info-icon" position="TopCenter">
    <e-content-template>
        <button class="e-btn info-icon" title="Information">Info 1</button>
        <button class="e-btn info-icon" title="Details">Info 2</button>
        <button class="e-btn info-icon" title="Help">Info 3</button>
    </e-content-template>
</ejs-tooltip>

クリックで表示する固定ツールチップ：

<ejs-tooltip target="#target" content="Click the × to close me" 
    opensOn="Click" 
    isSticky="true" 
    position="BottomCenter">
    <e-content-template>
        <button id="target" class="e-btn">Click Me</button>
    </e-content-template>
</ejs-tooltip>

プログラムによる開閉：

<ejs-tooltip id="tooltip" target="#target" content="Tooltip opened programmatically" opensOn="Custom">
    <e-content-template>
        <button id="target" class="e-btn" onclick="toggleTooltip()">Toggle Tooltip</button>
    </e-content-template>
</ejs-tooltip>

<script>
    function toggleTooltip() {
        var tooltipObj = document.getElementById('tooltip').ej2_instances[0];
        var btn = document.querySelector('.e-btn');
        
        if (btn.getAttribute('data-tooltip-open') === 'true') {
            tooltipObj.close();
            btn.setAttribute('data-tooltip-open', 'false');
        } else {
            tooltipObj.open(btn);
            btn.setAttribute('data-tooltip-open', 'true');
        }
    }
</script>

---

主なプロパティの一覧

タグヘルパー属性	型	デフォルト	目的
content	string	—	ツールチップのテキストまたは HTML
target	string	—	複数ターゲットモード用の CSS セレクター
position	Position	'TopCenter'	12 種類の配置値
opensOn	string	'Auto'	ホバー／クリック／フォーカス／カスタム
isSticky	bool	false	ユーザーが閉じるまで表示を維持
mouseTrail	bool	false	マウスカーソルに追従
showTipPointer	bool	true	矢印の先端を表示／非表示
tipPointerPosition	TipPointerPosition	'Auto'	自動／開始／中央／終了
openDelay	number	0	表示開始までの遅延（ミリ秒）
closeDelay	number	0	閉じるまでの遅延（ミリ秒）
offsetX / offsetY	number	0	ターゲットからの距離（ピクセル）
width / height	string | number	'auto'	ツールチップの寸法
cssClass	string	null	カスタム CSS クラス
enableRtl	bool	false	右から左への描画
enableHtmlSanitizer	bool	true	HTML コンテンツをサニタイズ
windowCollision	bool	false	ビューポートとの衝突を検出