syncfusion-react-popups

Syncfusion React ポップアップコンポーネント

Syncfusion React ダイアログコンポーネントの実装

DialogComponent は、モーダルモードとモードレスモードに対応したフローティングウィンドウにコンテンツを表示します。位置のカスタマイズ、ドラッグ、サイズ変更、アニメーション、テンプレート、および包括的なアクセシビリティ機能もサポートしています。

コンポーネントの概要

DialogComponent の機能：

• モーダル／モードレスモード：親要素とのインタラクションをブロックするかどうかを制御します
• 9 種類のプリセット位置＋カスタム X／Y：柔軟に配置できます
• ドラッグ：ヘッダーを使ったドラッグ＆ドロップ（allowDragging）
• サイズ変更：斜め方向のサイズ変更グリップ（enableResize）
• テンプレート：カスタムヘッダー、コンテンツ、フッター
• アニメーション：16 種類のエフェクト（Fade、Zoom、Flip、Slide、FadeZoom など）
• ボタン：クリックハンドラー付きの組み込みアクションボタン
• イベント：open、close、beforeOpen、beforeClose、drag、dragStart、dragStop、resize イベント
• キーボードナビゲーション：Tab、Escape（closeOnEscape）、Enter
• WCAG 2.2 アクセシビリティ：ARIA ロール、フォーカス管理
• ローカライズ：locale プロパティで 20 以上のロケールに対応
• RTL サポート：右から左への表示

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

はじめに

📄 参照： references/getting-started.md

• インストール（@syncfusion/ej2-react-popups）
• CSS／テーマのインポート（material、bootstrap、tailwind）
• DialogComponent の基本的な JSX 構造
• show()／hide() メソッドと refs
• フックを使った関数コンポーネントのパターン
• visible プロパティによる初期表示

モーダルとモードレス

📄 参照： references/modal-vs-modeless.md

• isModal のブール値プロパティ（true／false）
• モーダルオーバーレイの動作と親要素のブロック
• モードレスのフローティング動作
• フォーカス管理の違い
• 各モードを選ぶ場面
• 並べて比較

位置指定とドラッグ

📄 参照： references/positioning-and-dragging.md

• position オブジェクト（X: 'center'|'left'|'right'|number、Y: 'top'|'center'|'bottom'|number）
• 9 種類のプリセット位置の組み合わせ
• ピクセル単位のカスタム位置指定
• allowDragging のブール値プロパティ
• enableResize と resizeHandles の設定
• target プロパティによる対象要素の制約

テンプレートとコンテンツ

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

• content プロパティ（文字列、HTML、JSX 関数）
• header プロパティ（テキストまたはテンプレート）
• footerTemplate（カスタムフッター JSX）
• 動的なコンテンツ更新
• HTML のサニタイズ（enableHtmlSanitizer）
• コンテンツのスタイル設定と特殊なケース

ボタンとアクション

📄 参照： references/buttons-and-actions.md

• ButtonPropsModel[] を含む buttons 配列
• ButtonPropsModel の構造（buttonModel、click、isFlat、type）
• buttonModel のプロパティ（content、isPrimary、cssClass）
• クリックイベントハンドラー
• cssClass を使ったボタンのスタイル設定
• ボタンの種類（Button、Submit、Reset）

アニメーションエフェクト

📄 参照： references/animation-effects.md

• AnimationSettingsModel（effect、duration、delay）
• 16 種類のアニメーションエフェクト（Fade、FadeZoom、FlipLeftDown、FlipLeftUp など）
• ミリ秒単位の duration
• アニメーション開始までの delay
• アニメーションの無効化（effect: 'None'）
• パフォーマンスに関する考慮事項

ローカライズとアクセシビリティ

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

• 地域／言語を指定する locale プロパティ
• WCAG 2.2 への準拠
• キーボードナビゲーション（Tab、Enter、Escape）
• closeOnEscape の動作制御
• ARIA ロールと属性
• スクリーンリーダーのサポート
• enableRtl による RTL サポート
• フォーカス管理のパターン

高度なパターン

📄 読む： references/advanced-patterns.md

• イベント：open、close、beforeOpen、beforeClose、drag、dragStart、dragStop、resizeStart、resizeStop、resizing
• 入れ子およびスタックされたダイアログ
• バリデーション付きフォーム
• AJAX コンテンツの読み込み
• 閉じる動作の防止ロジック（beforeClose イベント）
• フルスクリーンダイアログ
• HTML のサニタイズとセキュリティ
• CSS クラスと z-index の管理
• 永続化の有効化（enablePersistence）
• よくあるエッジケースとトラブルシューティング

API リファレンス（完全版）

📄 読む： references/api-reference.md

• 24 個すべての DialogModel プロパティと型、デフォルト値
• 11 個すべてのイベントとイベント引数
• メソッド：show()、hide()、refresh()、destroy()
• ButtonPropsModel の構造（buttonModel、click、isFlat、type）
• 16 個すべてのエフェクトを含む AnimationSettingsModel
• 型と列挙型
• クイックリファレンスパターン

クイックスタートの例

⚠️ 依存関係のバージョン統一： ピア依存関係の競合やサプライチェーンの不整合を避けるため、すべての @syncfusion/ej2-* パッケージは同じメジャーバージョンにしてください。まとめてインストールします：

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

基本的なモーダルダイアログ：

import React, { useRef, useState } from 'react';
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import '@syncfusion/ej2-base/styles/material.css';
import '@syncfusion/ej2-buttons/styles/material.css';
import '@syncfusion/ej2-popups/styles/material.css';

export default function App() {
  const dialogRef = useRef(null);
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    dialogRef.current?.show();
    setIsOpen(true);
  };

  const handleClose = () => {
    dialogRef.current?.hide();
    setIsOpen(false);
  };

  const buttons = [
    {
      buttonModel: {
        content: 'OK',
        cssClass: 'e-flat',
        isPrimary: true,
      },
      click: handleClose,
    },
    {
      buttonModel: {
        content: 'Cancel',
        cssClass: 'e-flat',
      },
      click: handleClose,
    },
  ];

  return (
    <div id="dialog-target" style={{ position: 'relative', width: '100%', minHeight: '400px' }}>
      <button onClick={handleOpen} className="e-control e-btn e-primary">
        Open Dialog
      </button>

      <DialogComponent
        ref={dialogRef}
        header="Confirm Action"
        buttons={buttons}
        showCloseIcon={true}
        target="#dialog-target"
        width="400px"
        isModal={true}
        visible={false}
      >
        <p>Are you sure you want to proceed with this action?</p>
      </DialogComponent>
    </div>
  );
}

よく使われるパターン

パターン 1：確認ダイアログ

確認ボタン付きの削除操作：

const buttons = [
  {
    buttonModel: { content: 'Delete', cssClass: 'e-flat e-danger', isPrimary: true },
    click: () => { performDelete(); dialogRef.current?.hide(); }
  },
  {
    buttonModel: { content: 'Cancel', cssClass: 'e-flat' },
    click: () => dialogRef.current?.hide()
  }
];

パターン 2：フォームダイアログ

入力フィールドとバリデーションを備えたダイアログ：

<DialogComponent header="Edit Profile" buttons={buttons} isModal={true} width="500px">
  <div style={{ padding: '16px' }}>
    <input type="text" placeholder="Name" className="form-control" />
    <input type="email" placeholder="Email" className="form-control" />
    <textarea placeholder="Bio" className="form-control"></textarea>
  </div>
</DialogComponent>

パターン 3：中央配置のダイアログ

画面の中央にダイアログを配置します：

<DialogComponent
  header="Alert"
  position={{ X: 'center', Y: 'center' }}
  isModal={true}
  showCloseIcon={true}
  width="350px"
>
  This dialog is centered on the screen.
</DialogComponent>

パターン 4：ドラッグ可能なフローティングパネル

モーダルではなく、ドラッグ可能なプロパティパネル：

<DialogComponent
  header="Properties"
  isModal={false}
  allowDragging={true}
  position={{ X: 200, Y: 150 }}
  width="300px"
  enableResize={true}
  resizeHandles={['All']}
  showCloseIcon={true}
>
  Drag me around! I don't block the page.
</DialogComponent>

パターン 5：アニメーション付きダイアログ

Zoom アニメーション付きのダイアログ：

<DialogComponent
  header="Welcome"
  animationSettings={{ effect: 'Zoom', duration: 400, delay: 0 }}
  isModal={true}
  position={{ X: 'center', Y: 'center' }}
  width="400px"
>
  This dialog zooms in smoothly!
</DialogComponent>

パターン 6：カスタムフッターテンプレート

ボタンの代わりにカスタムフッターを使用します：

<DialogComponent
  header="Custom Footer"
  isModal={true}
  footerTemplate={
    <div style={{ padding: '12px', textAlign: 'right' }}>
      <button className="e-control e-btn e-primary" style={{ marginRight: '8px' }}>
        Save
      </button>
      <button className="e-control e-btn">Cancel</button>
    </div>
  }
>
  Dialog content with custom footer.
</DialogComponent>

パターン 7：入れ子のダイアログ

子ダイアログを含む親ダイアログ：

const childDialogRef = useRef(null);

<DialogComponent header="Parent" isModal={true} width="400px">
  <button onClick={() => childDialogRef.current?.show()} className="e-control e-btn">
    Open Child Dialog
  </button>
  
  <DialogComponent
    ref={childDialogRef}
    header="Child"
    isModal={true}
    width="300px"
    visible={false}
  >
    Nested dialog content
  </DialogComponent>
</DialogComponent>

主要なプロパティ（DialogModel）

プロパティ	型	説明	デフォルト	使用する場面
isModal	boolean	モーダルモードを有効にします（親要素との操作をブロックします）	false	確認、アラート、重要な操作
visible	boolean	初期表示状態	false	ダイアログの初期表示を制御する
header	string | JSX	ダイアログのヘッダー／タイトル	-	すべてのダイアログにタイトルが必要です
content	string | HTML | JSX	ダイアログの本文	-	ダイアログの主な情報
buttons	ButtonPropsModel[]	フッターのアクションボタン	-	OK／キャンセル、操作の確認
footerTemplate	JSX	カスタムのフッターコンテンツ	-	buttons プロパティが適さない場合
showCloseIcon	boolean	ヘッダーに閉じるボタンを表示します	false	ユーザーが閉じられるようにする
position	PositionData	X／Y の位置（中央、上部など）	{ X: 'center', Y: 'center' }	配置をカスタマイズする
allowDragging	boolean	ドラッグ機能を有効にします	false	移動可能なダイアログ、フローティングパネル
enableResize	boolean	グリップによるサイズ変更を有効にします	false	サイズ変更可能なダイアログ
resizeHandles	ResizeDirections[]	サイズ変更する辺／角	['All']	サイズ変更の動作を制御する
width	string | number	ダイアログの幅	'330px'	ダイアログのサイズを制御する
height	string | number	ダイアログの高さ	'auto'	ダイアログのサイズを制御する
minHeight	string | number	最小の高さ	-	サイズ変更で小さくなりすぎるのを防ぐ
animationSettings	AnimationSettingsModel	アニメーション効果／時間／遅延	-	スムーズな開閉の切り替え
closeOnEscape	boolean	Escape キーを押すと閉じます	true	キーボード操作
target	string (selector)	コンテナー要素	document.body	モーダルの配置
enableHtmlSanitizer	boolean	HTML コンテンツをサニタイズします	true	セキュリティ（XSS の防止）
cssClass	string	カスタム CSS クラス	-	スタイリングとテーマ設定
enableRtl	boolean	右から左への表示を有効にします	false	RTL 言語
locale	string	地域／言語コード	'en-US'	ローカライズ
zIndex	number	重なり順	-	ダイアログの重なりを管理する
enablePersistence	boolean	再読み込み時に状態を保持します	false	サイズ／位置を記憶する

よくある使用例

1. 確認ダイアログ - 削除、送信、または重要な操作を続行する前に確認します
2. アラート／情報ポップアップ - システムメッセージ、警告、通知を表示します
3. フォームダイアログ - モーダルフォームでプロフィールや設定を編集したり、新しいレコードを作成したりします
4. 入力プロンプト - 特定の操作に必要なユーザー入力を収集します（例：「ファイル名を入力」）
5. プロパティパネル - 設定やプロパティ用の、ドラッグ可能な非モーダルパネルです
6. 複数ステップのワークフロー - ステップごとのプロセスにネストされたダイアログを使用します
7. 読み込み／処理 - 進行状況インジケーターや読み込み状態を表示します
8. ヘルプ／ドキュメント - コンテキストに応じたヘルプ、ヒント、チュートリアルのオーバーレイを表示します
9. 画像ギャラリー - 画像やメディアのプレビューにライトボックスダイアログを使用します
10. 設定／環境設定 - タブ付きダイアログでアプリケーションの設定を整理します

---

次へ： 実装する内容に応じて、リファレンスを選択してください。すべてのリファレンスに、動作するコード例、ベストプラクティス、トラブルシューティングのガイダンスが含まれています。

Syncfusion React 定義済みダイアログコンポーネントの実装

目次

• 主要な概念
• クイックスタート
• ドキュメントガイド
• よくあるパターン

主要な概念

Syncfusion の定義済みダイアログはコンポーネントベースではありません（<ejs-dialog>）。DialogUtility ユーティリティクラスを使って命令的に開きます。

ダイアログの種類	メソッド
アラート	DialogUtility.alert({ ... })
確認	DialogUtility.confirm({ ... })
プロンプト（入力）	DialogUtility.confirm({ content: '<input .../>', ... })

インポート： import { DialogUtility } from '@syncfusion/ej2-react-popups';

---

クイックスタート

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from 'react';

function App() {
  function showAlert() {
    DialogUtility.alert({
      title: 'Low Battery',
      width: '250px',
      content: '10% of battery remaining',
    });
  }
  return <ButtonComponent cssClass="e-danger" onClick={showAlert}>Alert</ButtonComponent>;
}
export default App;

---

ドキュメントガイド

はじめに

📄 参照： references/getting-started.md

• インストール（@syncfusion/ej2-react-popups）
• CSS のインポート
• Alert、Confirm、Prompt の最小限の例
• 関数コンポーネントとクラスコンポーネントのパターン

アニメーション

📄 参照： references/animation.md

• effect、duration、delay を指定する animationSettings プロパティ
• Alert／Confirm／Prompt のアニメーション例

ドラッグ可能

📄 参照： references/draggable.md

• isDraggable のブール値プロパティ
• Alert／Confirm／Prompt のドラッグ例

位置

📄 参照： references/position.md

• position プロパティ：{ X, Y } — left|center|right ／ top|center|bottom、または数値オフセット
• Alert／Confirm／Prompt の位置指定例

寸法

📄 参照： references/dimension.md

• width および height プロパティ
• 最大幅／最小幅の制約に使用する cssClass
• Alert／Confirm／Prompt の寸法指定例

カスタマイズ

📄 参照： references/customization.md

• okButton ／ cancelButton — カスタムの text、icon、click ハンドラー
• showCloseIcon および closeOnEscape
• Prompt ダイアログのカスタム content

API リファレンス

📄 参照： references/api.md

• DialogUtility.alert() ／ confirm() のオプションプロパティ全般
• サポートされているすべてのフィールド：title、content、width、height、position、animationSettings、isDraggable、okButton、cancelButton、showCloseIcon、closeOnEscape、cssClass

---

一般的なパターン

OK コールバック付きの Alert：

const dialogObj = DialogUtility.alert({
  title: 'Info',
  content: 'Operation complete.',
  okButton: { click: () => { dialogObj.hide(); } }
});

Yes／No の Confirm：

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

Prompt（入力の取得）：

const dialogObj = 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: () => {
      const val = (document.getElementById('nameInput') as HTMLInputElement).value;
      dialogObj.hide();
    }
  },
  cancelButton: { click: () => dialogObj.hide() }
});

Syncfusion React Tooltip の実装

Syncfusion React の TooltipComponent を実装するための包括的なスキルです。セットアップ、コンテンツの設定方法、位置指定、オープンモード、アニメーション、カスタマイズ、アクセシビリティ、高度な実装パターンを網羅しています。

パッケージ： @syncfusion/ej2-react-popups
インポート： import { TooltipComponent } from '@syncfusion/ej2-react-popups';

クイックスタート

npm install @syncfusion/ej2-react-popups --save

/* src/App.css */
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-react-popups/styles/tailwind3.css";

import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import './App.css';

function App() {
  return (
    <TooltipComponent content="Tooltip Content" position="TopCenter">
      <button className="e-btn">Show Tooltip</button>
    </TooltipComponent>
  );
}
export default App;

ナビゲーションガイド

はじめにとセットアップ

📄 参照： references/getting-started.md

• インストールと CSS のインポート
• 単一の要素に基本的なツールチップを設定する
• コンテナー内の複数のターゲットにツールチップを設定する（target プロパティ）
• フォールバックコンテンツとして title 属性を使用する
• アプリケーションを実行する

コンテンツ

📄 参照： references/content.md

• 文字列コンテンツ
• テンプレートコンテンツ（JSX 関数）
• Fetch／Ajax で読み込む動的コンテンツ（beforeRender イベント）
• HTML コンテンツ（iframe、埋め込み要素）
• dataBind() でプログラムからコンテンツを更新する

位置指定

📄 参照： references/position.md

• 12 種類の固定位置（TopLeft、TopCenter、TopRight、BottomLeft、BottomCenter、BottomRight、LeftTop、LeftCenter、LeftBottom、RightTop、RightCenter、RightBottom）
• 矢印の表示／非表示（showTipPointer）と位置指定（tipPointerPosition：Auto、Start、Middle、End）
• refresh() メソッドによる動的な位置指定（ドラッグ可能なターゲット）
• マウスへの追従（mouseTrail）
• オフセット値（offsetX、offsetY）
• 位置衝突の処理（自動反転動作、windowCollision）

オープンモード

📄 参照： references/open-mode.md

• opensOn による Auto、Hover、Click、Focus、Custom モード
• 複数のモードを組み合わせる（opensOn="Hover Click"）
• 固定表示モード（isSticky）— 閉じるボタンが表示されます
• 開く／閉じるまでの遅延（openDelay、closeDelay）
• open() および close() メソッドによるカスタムオープンモード
• モバイルでの動作（タップして長押し）

アニメーション

📄 読む: references/animation.md

• animation プロパティ（開閉時の AnimationModel）
• 利用可能な15種類のアニメーション効果（FadeIn、ZoomIn、FlipX/Y など）
• カスタムの再生時間と遅延
• open() および close() メソッドによるプログラムからのアニメーション制御
• beforeRender と CSS トランジションを使用したトランジション効果

カスタマイズ

📄 読む: references/customization.md

• カスタムテーマやスタイルに使う cssClass
• ティップポインターのサイズ、背景、枠線のカスタマイズ
• ツールチップの外観全般（背景、透明度、フォント）
• 曲線型のティップと吹き出し型の矢印パターン
• サイズの制御（width、height）とスクロールモード
• RTL のサポート（enableRtl）

操作パターン

📄 読む: references/how-to.md

• 複数の対象にツールチップを表示（対象ごとに動的なコンテンツを設定）
• 無効化された要素にツールチップを表示
• destroy() と render() によるツールチップの有効化／無効化
• SVG および Canvas 要素にツールチップを表示
• ツールチップのコンテンツに iframe や HTML 要素を埋め込む
• カスタムの表示モード（ダブルクリック、右クリック）

アクセシビリティ

📄 読む: references/accessibility.md

• WCAG 2.2 および Section 508 に準拠
• WAI-ARIA 属性（role="tooltip"、aria-describedby、aria-hidden）
• キーボードショートカット（Escape、Tab）
• スクリーンリーダーの動作

API リファレンス

📄 読む: references/api.md

• すべてのプロパティ、メソッド、イベントとその型およびデフォルト値
• TooltipAnimationSettings、TooltipEventArgs の型
• Position および TipPointerPosition の列挙値

よく使われるパターン

ボタンにツールチップを表示

<TooltipComponent content="Submit the form" position="TopCenter">
  <button className="e-btn e-primary">Submit</button>
</TooltipComponent>

コンテナー内の複数対象にツールチップを表示

// Single TooltipComponent handles all .e-info targets; 
// each uses its own `title` attribute as content
<TooltipComponent target=".e-info" position="RightCenter">
  <form>
    <input className="e-info" type="text" title="Enter your name" />
    <input className="e-info" type="email" title="Enter a valid email" />
  </form>
</TooltipComponent>

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

<TooltipComponent
  content="Click the × to close me"
  opensOn="Click"
  isSticky={true}
  position="BottomCenter"
>
  <button className="e-btn">Click Me</button>
</TooltipComponent>

プログラムから開閉

import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';

function App() {
  let tooltipRef: TooltipComponent;
  const target = React.useRef<HTMLButtonElement>(null);

  return (
    <TooltipComponent
      ref={t => (tooltipRef = t)}
      content="Tooltip opened programmatically"
      opensOn="Custom"
    >
      <button
        ref={target}
        className="e-btn"
        onClick={() => {
          if (target.current.getAttribute('data-tooltip-id')) {
            tooltipRef.close();
          } else {
            tooltipRef.open(target.current);
          }
        }}
      >
        Toggle Tooltip
      </button>
    </TooltipComponent>
  );
}

マウスに追従するツールチップ

<TooltipComponent
  content="Following your mouse!"
  mouseTrail={true}
  showTipPointer={false}
>
  <div style={{ width: '200px', height: '100px', background: '#eee' }}>
    Hover over me
  </div>
</TooltipComponent>

主要な Props 一覧

Prop	型	デフォルト	用途
content	string | HTMLElement | Function	—	ツールチップのテキスト、HTML、または JSX テンプレート
target	string	—	複数対象モードで使用する CSS セレクター
position	Position	'TopCenter'	12 種類の配置値
opensOn	string	'Auto'	ホバー／クリック／フォーカス／カスタム
isSticky	boolean	false	ユーザーが閉じるまで表示し続ける
mouseTrail	boolean	false	マウスカーソルに追従する
showTipPointer	boolean	true	矢印型のティップを表示／非表示にする
tipPointerPosition	TipPointerPosition	'Auto'	Auto／Start／Middle／End
openDelay	number	0	表示開始までの遅延（ms）
closeDelay	number	0	非表示になるまでの遅延（ms）
offsetX / offsetY	number	0	対象からの距離（px）
width / height	string | number	'auto'	ツールチップのサイズ
cssClass	string	null	カスタム CSS クラス
animation	AnimationModel	FadeIn/FadeOut 150ms	開閉時のアニメーション
enableRtl	boolean	false	右から左への描画
enableHtmlSanitizer	boolean	true	HTML コンテンツをサニタイズする
container	string | HTMLElement	body	ポップアップの追加先
windowCollision	boolean	false	ビューポートとの衝突を判定する