syncfusion-blazor-popups

Syncfusion Blazor ポップアップの実装

ダイアログ

Syncfusion Blazor Dialog コンポーネントは、Blazor アプリケーションでモーダルおよびモードレスのダイアログを作成するための、柔軟で機能豊富なソリューションを提供します。ダイアログは、アラート、確認、フォーム、インタラクティブなコンテンツをアプリケーションのメイン画面に重ねて表示するために欠かせない UI 要素です。

コンポーネントの概要

Dialog コンポーネントは、次の機能をサポートしています。

• テンプレートベースのレイアウト（ヘッダー、コンテンツ、カスタム HTML／コンポーネントを含むフッター）
• 複数のインタラクションモード（モーダルおよびモードレス）
• 豊富なイベントシステム（ライフサイクル、ドラッグ、サイズ変更、オーバーレイ操作）
• 高度な配置（固定、絶対、相対、中央揃え）
• インタラクティブな機能（ドラッグ可能、サイズ変更可能、最小化／最大化ボタン、全画面モード）
• アクセシビリティ対応（WCAG 準拠、キーボードナビゲーション、ARIA 属性）
• アニメーション（開閉時のトランジション）
• 状態管理（表示状態のバインド、状態の永続化）

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

はじめに

📄 参照： references/getting-started.md

• インストールと NuGet パッケージのセットアップ
• Blazor WebAssembly および Server プロジェクトの構成
• 名前空間と Syncfusion サービスの追加
• 基本的なダイアログの実装
• CSS のインポートとテーマの構成
• ヘッダー、コンテンツの表示と表示状態の設定

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

📄 参照： references/templates.md

• カスタム HTML とアイコンを使ったヘッダーテンプレート
• フォームと Blazor コンポーネントを使ったコンテンツテンプレート
• フッターテンプレートとカスタムボタン
• DialogTemplates の構造
• ダイアログへの複雑な UI 要素の埋め込み

ダイアログのボタン

📄 参照： references/dialog-buttons.md

• DialogButton コンポーネントの構成
• ボタンの配置とクリックハンドラー
• DialogButtons と FooterTemplate の使い分け
• 標準的なボタンパターンと一般的なユースケース

イベントと操作

📄 参照： references/events.md

• ライフサイクルイベント（Created、Destroyed）
• 開閉イベント（OnOpen、Opened、OnClose、Closed）
• ドラッグイベント（OnDragStart、OnDrag、OnDragStop）
• サイズ変更イベント（OnResizeStart、Resizing、OnResizeStop）
• モーダルオーバーレイの操作（OnOverlayModalClick）

配置と表示状態

📄 参照： references/positioning-visibility.md

• Position プロパティ（固定、絶対、相対）
• 表示／非表示を制御する Visible バインド
• ターゲット要素の構成
• ページ上でのダイアログの中央揃え
• 幅と高さの構成
• Z-index の管理

ダイアログの動作と機能

📄 参照： references/dialog-behavior.md

• モーダルとモードレスのダイアログ
• AllowDragging および EnableResize プロパティ
• パフォーマンス最適化のための AllowPrerender
• ShowCloseIcon の構成
• ネストされたダイアログの作成
• アニメーションのサポート
• IsModal とオーバーレイの動作

メソッドとプログラムによる制御

📄 参照： references/methods.md

• ShowAsync() によるプログラムからのダイアログ表示
• ShowAsync(true) による全画面モードでのダイアログ表示
• HideAsync() によるプログラムからのダイアログ非表示
• GetDimension() によるダイアログサイズの取得
• ボタンにアクセスするための GetButton(index) と GetButtonItems()
• 位置を再計算する RefreshPositionAsync()
• 制御の完全な例

高度なカスタマイズとスタイル設定

📄 参照： references/advanced-customization.md

• CSS クラスのカスタマイズとスタイル設定
• 外観のカスタマイズ
• アクセシビリティ機能（WCAG 準拠、キーボードナビゲーション）
• アニメーションの構成
• EnablePersistence を使った状態の永続化戦略
• 最小化／最大化ボタンの実装
• ローカライズのサポート
• レスポンシブなダイアログのデザイン

クイックスタート

基本的なダイアログ

@using Syncfusion.Blazor.Popups

<SfDialog Width="300px" Header="Welcome">
    <DialogTemplates>
        <Content>This is a basic dialog with content.</Content>
    </DialogTemplates>
</SfDialog>

表示／非表示を制御するダイアログ

@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons

<div id="target">
    <SfButton OnClick="@OpenDialog">Open Dialog</SfButton>
    
    <SfDialog Target="#target" Width="400px" Header="Confirmation" 
              ShowCloseIcon="true" @bind-Visible="IsVisible">
        <DialogTemplates>
            <Content>Are you sure you want to proceed?</Content>
        </DialogTemplates>
        <DialogButtons>
            <DialogButton Content="OK" IconCss="e-icons e-ok-icon" IsPrimary="true" OnClick="@OnOkClick" />
            <DialogButton Content="Cancel" IconCss="e-icons e-close-icon" OnClick="@OnCancelClick" />
        </DialogButtons>
    </SfDialog>
</div>

@code {
    private bool IsVisible { get; set; } = false;
    
    private void OpenDialog() => IsVisible = true;
    
    private void OnOkClick()
    {
        // Handle OK action
        IsVisible = false;
    }
    
    private void OnCancelClick()
    {
        // Handle Cancel action
        IsVisible = false;
    }
}

一般的なパターン

アラートダイアログ

<SfDialog Width="350px" IsModal="true" Header="Alert">
    <DialogTemplates>
        <Content>This action cannot be undone.</Content>
    </DialogTemplates>
</SfDialog>

フォームダイアログ

<SfDialog Width="400px" Header="User Information">
    <DialogTemplates>
        <Content>
            <div class="form-group">
                <input type="text" placeholder="Enter name" />
            </div>
        </Content>
    </DialogTemplates>
</SfDialog>

ドラッグおよびサイズ変更可能なダイアログ

<SfDialog Width="400px" Header="Features" AllowDragging="true" EnableResize="true">
    <DialogTemplates>
        <Content>You can drag and resize this dialog.</Content>
    </DialogTemplates>
</SfDialog>

フルスクリーンダイアログ

@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons

<SfButton OnClick="@OpenFullScreenDialog">Open Fullscreen Dialog</SfButton>

<SfDialog @ref="DialogRef" Width="250px" ShowCloseIcon="true" Visible="false">
    <DialogTemplates>
        <Header>Dialog</Header>
        <Content>This is a fullscreen dialog</Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="OK" IsPrimary="true" OnClick="@CloseDialog" />
        <DialogButton Content="Cancel" OnClick="@CloseDialog" />
    </DialogButtons>
</SfDialog>

@code {
    SfDialog DialogRef;

    private async Task OpenFullScreenDialog()
    {
        await this.DialogRef.ShowAsync(true);
    }

    private async Task CloseDialog()
    {
        await this.DialogRef.HideAsync();
    }
}

主なプロパティ

プロパティ	型	目的
Width	string	ダイアログの幅を設定します（例："400px"、"50%"）。デフォルト："100%"
Height	string	ダイアログの高さを設定します（例："300px"、"70%"）。デフォルト："auto"
Header	string	ダイアログのヘッダーテキストを設定します
Content	string	ダイアログのコンテンツテキストを設定します
Visible	bool	ダイアログの表示状態を制御します。@bind-Visible に対応しています。デフォルト：true
IsModal	bool	ダイアログをモーダルにします（オーバーレイで操作をブロックします）。デフォルト：false
ShowCloseIcon	bool	ヘッダーに閉じるボタンを表示します。デフォルト：false
AllowDragging	bool	ヘッダーを使ったダイアログのドラッグを有効にします。デフォルト：false
EnableResize	bool	ダイアログのサイズ変更を有効にします。デフォルト：false
CloseOnEscape	bool	Escape キーが押されたときにダイアログを閉じます。デフォルト：true
AnimationSettings	DialogAnimationSettings	開閉アニメーション（効果、時間、遅延）を設定します。デフォルト：フェード効果、400ms
Position	string	配置モード："fixed"（画面上の位置を維持）、"absolute"（対象要素を基準）、または "relative"（ドキュメントフロー内）。デフォルト："fixed"
Left	string	X 座標の位置を設定します（例："100px"、"20%"）。Position プロパティと併用します。デフォルト："auto"
Top	string	Y 座標の位置を設定します（例："50px"、"10%"）。Position プロパティと併用します。デフォルト："auto"
ID	string	ダイアログの一意の識別子です。EnablePersistence="true" の場合に必須です
MinHeight	string	サイズ変更時の最小高さを設定します（例："150px"）。デフォルト：null
MaxHeight	string	サイズ変更時の最大高さを設定します（例："600px"）。デフォルト：null
ResizeHandles	ResizeDirection[]	サイズ変更方向の配列です（例：SouthEast、NorthEast）。デフォルト：[SouthEast]
Buttons	List<DialogButtonModel>	プログラムによるボタン設定（DialogButtons コンポーネントの代替）
CssClass	string	スタイル設定用のカスタム CSS クラス
EnableRtl	bool	右から左へのレイアウトを有効にします。デフォルト：false
EnablePersistence	bool	位置、幅、高さをブラウザーのローカルストレージに保存します。デフォルト：false。ID プロパティが必要です
Target	string	ダイアログの対象／コンテナー要素を指定する CSS セレクターです（例："#container"、".target-div"）
FooterTemplate	RenderFragment	カスタムフッターコンテンツ（DialogButtons コンポーネントの代替）
AllowPrerender	bool	非表示時も DOM 要素を保持し、再表示を高速化します。デフォルト：false
ZIndex	double	他の要素に対する重なり順を設定します。デフォルト：1000

主な列挙型と型

DialogEffect 列挙型

ダイアログの開閉時のアニメーション効果：

値	説明
None	アニメーションなし
Fade	フェードイン／アウト効果（デフォルト）
Zoom	中央からズームイン／アウト
SlideLeft	左から／左へスライド
SlideRight	右から／右へスライド
SlideTop	上から／上へスライド
SlideBottom	下から／下へスライド
FlipX	水平方向の反転効果
FlipY	垂直方向の反転効果

ResizeDirection 列挙型

ダイアログのサイズ変更が可能な方向：

値	説明
South	下端
North	上端
East	右端
West	左端
SouthEast	右下隅（デフォルト）
SouthWest	左下隅
NorthEast	右上隅
NorthWest	左上隅
All	全方向

ButtonType 列挙型

ダイアログボタンの HTML ボタン type 属性：

値	説明
Button	標準ボタン（デフォルト）
Submit	フォーム送信ボタン
Reset	フォームリセットボタン

DialogAnimationSettings クラス

ダイアログアニメーションの設定：

プロパティ	型	説明	デフォルト
Effect	DialogEffect	アニメーション効果	DialogEffect.Fade
Duration	int	アニメーションの時間（ミリ秒）	400
Delay	int	アニメーションの遅延時間（ミリ秒）	0

• 最大限のフォーカスと画面領域が必要な場合は、フルスクリーンダイアログに ShowAsync(true) を使用します
• ShowAsync() でプログラム制御する場合は、初期値として Visible="false" を設定します 例：

var animSettings = new DialogAnimationOptions 
{ 
    Effect = DialogEffect.Zoom, 
    Duration = 300, 
    Delay = 0 
};

DialogDimension クラス

GetDimension() メソッドによって返されます：

プロパティ	型	説明
Width	string	現在のダイアログの幅
Height	string	現在のダイアログの高さ

重要な制約事項と注意点

⚠️ 重要な要件：

• ID プロパティ：EnablePersistence="true" を使用する場合は設定が必須です。ID は localStorage のキーとして機能します。
• 相互排他性：FooterTemplate と DialogButtons は同時に使用できません。どちらか一方を選択してください。
• ターゲットセレクター：Target プロパティには、既存の DOM 要素に対する有効な CSS セレクターを指定する必要があります。
• リサイズの依存関係：ResizeHandles は EnableResize="true" の場合のみ機能します。
• 位置のコンテキスト：Position プロパティは、Left と Top の座標の解釈に影響します。

📋 ベストプラクティス：

• ユーザーの注意を必要とする重要な操作には、IsModal="true" を使用します
• 頻繁に表示を切り替えるダイアログでは、パフォーマンスを向上させるために AllowPrerender="true" を設定します
• 常に閉じる方法（ボタン、閉じるアイコン、または Escape キー）を用意します
• ネストされたダイアログでは、ZIndex の値を段階的に増やして使用します（1000、1001、1002）
• パーセンテージベースの Width／Height 値を使って、レスポンシブな動作をテストします

関連スキル

• implementing-buttons - ダイアログのボタンのスタイルと動作について
• implementing-dropdown-list - ダイアログ内の選択コントロールについて
• implementing-text-inputs - ダイアログ内のフォームフィールドについて

---

関連項目

• Syncfusion Blazor Dialog ドキュメント
• Dialog イベントリファレンス
• Blazor テーマ

ツールチップ

Syncfusion Blazor Tooltip コンポーネントは、ユーザーがホバー、クリック、フォーカスを通じて対象要素を操作したときにメッセージを表示し、状況に応じた情報を提供します。リッチコンテンツ、柔軟な配置、複数のトリガーモード、包括的なカスタマイズオプションに対応しています。

コンポーネントの概要

Blazor Tooltip コンポーネントには、次の機能があります。

• 複数のコンテンツタイプ：シンプルなテキスト、HTML title 属性、テンプレート、RenderFragment、MarkupString
• 柔軟な配置：12 種類の固定位置（TopLeft、TopCenter、TopRight、BottomLeft など）、マウス追従、カスタムオフセット
• オープンモードのオプション：Hover、Click、Focus、Auto、Custom、およびそれらの組み合わせ
• スティッキーモード：閉じるボタンを使ってツールチップを開いたままにします
• カスタマイズ：ラッパー、コンテンツ、ポインターの CSS を全面的に制御できます
• 動的なターゲット：コンポーネントの初期化後に追加された要素に対応します
• アクセシビリティ：ARIA 属性とキーボード操作に対応し、WCAG 2.2 に準拠します
• 衝突処理：ツールチップがビューポートの境界に達したとき、自動的に位置を調整します

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

はじめに

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

• 前提条件とシステム要件
• パッケージのインストール（Syncfusion.Blazor.Popups と Themes）
• 名前空間のインポートとサービスの登録
• スタイルシートとスクリプトリソースの設定
• Button を使った基本的な Tooltip の実装
• WebAssembly App の設定
• Web App の設定（Server、Client、Auto のレンダーモード）
• インタラクティブレンダーモードの設定
• 最初の Tooltip の例

コンテンツ管理

📄 参照: references/content.md

• Content プロパティを使用したシンプルなテキストコンテンツ
• HTML の title 属性をツールチップのコンテンツとして使用
• カスタム HTML レイアウト向けの ContentTemplate
• RenderFragment を使用した動的コンテンツ
• MarkupString を使用した HTML 文字列のレンダリング
• ツールチップ内のインタラクティブ要素
• ツールチップコンテンツ内の画像、書式付きテキスト、リンク
• 複数のセクションを含む複雑なツールチップレイアウト

位置と配置

📄 参照: references/positioning.md

• 12 種類の静的なオプションを持つ Position プロパティ（TopLeft、TopCenter、TopRight、BottomLeft、BottomCenter、BottomRight、LeftTop、LeftCenter、LeftBottom、RightTop、RightCenter、RightBottom）
• マウス追従動作（MouseTrail プロパティ）
• オフセット設定（OffsetX と OffsetY）
• 衝突検出と自動再配置
• ビューポート境界の処理に使用する WindowCollision
• 位置とオフセットの組み合わせ
• 位置選択のベストプラクティス

表示モードとトリガー

📄 参照: references/open-modes.md

• OpensOn プロパティの値（Auto、Hover、Click、Focus、Custom）
• デスクトップとモバイルの動作の違い
• 複数のトリガーの組み合わせ（例：「Hover Click」）
• 閉じるボタン付きのスティッキーモード（IsSticky）
• 表示と非表示の遅延（OpenDelay、CloseDelay）
• パブリックメソッドを使用したカスタムトリガーの実装
• モバイルでのタップおよび長押し動作
• トリガー選択のベストプラクティス

カスタマイズとスタイル設定

📄 参照: references/customization-and-styling.md

• カスタムスタイル用の CssClass プロパティ
• ツールチップのポインターのカスタマイズ（サイズ、色、形状）
• ツールチップのラッパーとポップアップのスタイル設定
• コンテンツのスタイル設定（フォント、色、パディング）
• 4 方向すべての矢印のスタイル設定
• 内側および外側のポインターの CSS 構造
• CSS クラスの完全なリファレンス
• テーマ連携の例

寸法とサイズ

📄 参照: references/dimensions.md

• Width および Height プロパティ
• 自動サイズ設定と固定サイズ設定の方法
• コンテンツがあふれる場合のスクロールモード
• Height と IsSticky を組み合わせたスクロール可能なツールチップ
• レスポンシブなサイズ設定に関する考慮事項
• コンテンツのはみ出し処理

ターゲット設定

📄 参照: references/target-configuration.md

• CSS セレクターを使用する Target プロパティ
• 単一または複数のターゲット要素
• レンダリング後に追加される動的なターゲット要素
• 自動登録用の TargetContainer
• GUID ID の制約（数字で始めることはできません）
• ターゲット選択のベストプラクティス
• ボタン、リンク、入力欄、カスタム要素を使用した例

アクセシビリティ

📄 参照: references/accessibility.md

• WCAG 2.2 および Section 508 への準拠
• ARIA 属性（role="tooltip"、aria-describedby、aria-hidden）
• キーボード操作（フォーカスには Tab、閉じるには Escape）
• スクリーンリーダーのサポート
• 右から左へ記述する（RTL）言語のサポート
• 色のコントラスト要件
• モバイルデバイスのアクセシビリティ
• Axe-core による検証
• アクセシブルなツールチップのベストプラクティス

クイックスタートの例

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

@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons

<SfTooltip ID="Tooltip" Target="#btn" Content="@Content">
    <SfButton ID="btn" Content="Show Tooltip"></SfButton>
</SfTooltip>

@code
{
    string Content = "Click to save your changes!";
}

カスタム位置のツールチップ

@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons

<SfTooltip Target="#saveBtn" Content="Save changes" Position="Position.RightCenter">
    <SfButton ID="saveBtn" Content="Save"></SfButton>
</SfTooltip>

クラスセレクターを使用した複数のツールチップ

@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons

<SfTooltip ID="Tooltip" Target=".action-btn" Content="Click to perform action">
    <div id="container">
        <SfButton ID="btn1" CssClass="action-btn" Content="Save" title="Save your work"></SfButton>
        <SfButton ID="btn2" CssClass="action-btn" Content="Cancel" title="Discard changes"></SfButton>
        <SfButton ID="btn3" CssClass="action-btn" Content="Delete" title="Remove item permanently"></SfButton>
    </div>
</SfTooltip>

よくあるパターン

クリックで表示するスティッキーツールチップ

<SfTooltip Target="#helpBtn" Content="Need help? Contact support at [email protected]" 
           OpensOn="Click" IsSticky="true">
    <SfButton ID="helpBtn" Content="Help" IconCss="e-icons e-help"></SfButton>
</SfTooltip>

HTML テンプレートを使用したツールチップ

<SfTooltip Target="#infoBtn" OpensOn="Click">
    <ContentTemplate>
        <div style="padding: 10px;">
            <h4 style="margin: 0 0 10px 0;">User Information</h4>
            <p><strong>Name:</strong> John Doe</p>
            <p><strong>Email:</strong> [email protected]</p>
            <p><strong>Status:</strong> Active</p>
        </div>
    </ContentTemplate>
    <ChildContent>
        <SfButton ID="infoBtn" Content="Info" IsPrimary="true"></SfButton>
    </ChildContent>
</SfTooltip>

マウス追従型ツールチップ

<SfTooltip MouseTrail="true" Content="Follow the cursor" Target="#trackArea">
    <div id="trackArea" style="width: 300px; height: 200px; border: 2px dashed #ccc; padding: 20px;">
        Hover over this area - the tooltip follows your mouse!
    </div>
</SfTooltip>

カスタムスタイルのツールチップ

<SfTooltip Target="#customBtn" Content="Custom styled tooltip" CssClass="custom-tooltip">
    <SfButton ID="customBtn" Content="Hover Me"></SfButton>
</SfTooltip>

<style>
    .custom-tooltip.e-tooltip-wrap {
        background-color: #2196F3;
        border-radius: 8px;
    }
    
    .custom-tooltip.e-tooltip-wrap .e-tip-content {
        color: white;
        font-weight: 600;
        padding: 8px 12px;
    }
    
    .custom-tooltip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
        border-bottom: 10px solid #2196F3;
    }
</style>

TargetContainer を使用した動的ターゲット

<SfTooltip ID="dynamicTooltip" Target=".dynamic-item" TargetContainer="#app-container" Content="Dynamic content item">
</SfTooltip>

<div id="app-container">
    <button class="dynamic-item" title="Static button">Static</button>
    @if (showDynamic)
    {
        <button class="dynamic-item" title="Dynamically added button">Dynamic</button>
    }
</div>

@code {
    private bool showDynamic = false;
}

主なプロパティ

必須プロパティ

プロパティ	型	既定値	説明
Content	string	null	ツールチップに表示するテキストコンテンツ
Target	string	null	対象要素の CSS セレクター
Position	Position	TopCenter	ツールチップの配置位置
OpensOn	string	"Auto"	トリガーモード（Auto、Hover、Click、Focus、Custom）
IsSticky	bool	false	閉じるボタン付きでツールチップを開いたままにします
Animation	AnimationModel	null	開閉時のトランジションに関するアニメーション設定

コンテンツプロパティ

プロパティ	型	説明
ContentTemplate	RenderFragment	カスタム HTML コンテンツテンプレート。既定値：null
Content	string	シンプルなテキストまたは HTML 文字列のコンテンツ。既定値：null
ChildContent	RenderFragment	対象要素をツールチップコンポーネント内にラップします。既定値：null

位置指定プロパティ

プロパティ	型	既定値	説明
Position	Position	TopCenter	対象の周囲における固定位置
MouseTrail	bool	false	マウスポインターに追従します
OffsetX	double	0	水平方向のオフセット（ピクセル単位）
OffsetY	double	0	垂直方向のオフセット（ピクセル単位）
WindowCollision	bool	false	衝突検出に親要素ではなくビューポートを使用します

タイミングプロパティ

プロパティ	型	既定値	説明
OpenDelay	double	0	開くまでの遅延時間（ミリ秒）
CloseDelay	double	0	閉じるまでの遅延時間（ミリ秒）

イベントコールバック

イベント	型	説明
Created	EventCallback<object>	ツールチップコンポーネントの作成後に発生します
Destroyed	EventCallback<object>	ツールチップコンポーネントの破棄時に発生します
OnOpen	EventCallback<TooltipEventArgs>	ツールチップの表示前に発生します（キャンセル可能）
Opened	EventCallback<TooltipEventArgs>	ツールチップが開いた後に発生します
OnClose	EventCallback<TooltipEventArgs>	ツールチップを閉じる前に発生します（キャンセル可能）
Closed	EventCallback<TooltipEventArgs>	ツールチップが閉じた後に発生します
OnRender	EventCallback<TooltipEventArgs>	ツールチップが DOM に追加される前に発生します（キャンセル可能）
OnCollision	EventCallback<TooltipEventArgs>	衝突検出の計算中に発生します

パブリックメソッド

メソッド	戻り値の型	説明
OpenAsync(ElementReference?, TooltipAnimationSettings)	Task	対象とアニメーション設定を任意で指定し、プログラムからツールチップを開きます
CloseAsync(TooltipAnimationSettings)	Task	アニメーション設定を任意で指定し、プログラムからツールチップを閉じます
RefreshAsync()	Task	動的な DOM の変更と対象の更新に合わせてツールチップを同期します
RefreshPositionAsync(ElementReference?)	Task	現在の対象の位置に基づいてツールチップの位置を再計算し、更新します

外観プロパティ

プロパティ	型	説明
CssClass	string	スタイル設定用のカスタム CSS クラス。既定値：null
Width	string	ツールチップの幅（auto またはピクセル単位）。既定値："auto"
Height	string	ツールチップの高さ（auto またはピクセル単位）。既定値："auto"
ShowTipPointer	bool	矢印ポインターを表示／非表示にします。既定値：true
TipPointerPosition	TipPointerPosition	矢印ポインターの位置（Auto、Start、Middle、End）。既定値：Auto
EnableRtl	bool	右から左への方向を有効にします。既定値：false
HtmlAttributes	Dictionary<string, object>	ツールチップ要素に追加する HTML 属性。既定値：null
ID	string	ツールチップコンポーネントの一意な識別子。既定値：自動生成

ターゲットのプロパティ

プロパティ	型	説明
Target	string	対象要素の CSS セレクターです。デフォルト：null
Container	string	ツールチップのポップアップを追加するコンテナー要素です。デフォルト："body"
TargetContainer	string	動的なターゲット登録に使用するコンテナーセレクターです。デフォルト：null

主な型とクラス

AnimationModel クラス

ツールチップの開閉アニメーションの設定です。

プロパティ	型	説明
Open	TooltipAnimationSettings	ツールチップを開くときのアニメーション設定
Close	TooltipAnimationSettings	ツールチップを閉じるときのアニメーション設定

TooltipAnimationSettings クラス

アニメーションの詳細設定です。

プロパティ	型	デフォルト	説明
Effect	Effect	Fade	アニメーション効果（FadeIn、FadeOut、ZoomIn、ZoomOut、None）
Duration	int	150	アニメーションの時間（ミリ秒）
Delay	int	0	アニメーションの遅延時間（ミリ秒）

Effect Enum

ツールチップの遷移に使用するアニメーション効果です。

値	説明
None	アニメーションなし
FadeIn	開くときのフェードイン効果
FadeOut	閉じるときのフェードアウト効果
ZoomIn	開くときのズームイン効果
ZoomOut	閉じるときのズームアウト効果

Position Enum

ツールチップの配置位置です。

値	説明
TopLeft	ターゲットの上、左端に揃えます
TopCenter	ターゲットの上、中央に配置します（デフォルト）
TopRight	ターゲットの上、右端に揃えます
BottomLeft	ターゲットの下、左端に揃えます
BottomCenter	ターゲットの下、中央に配置します
BottomRight	ターゲットの下、右端に揃えます
LeftTop	ターゲットの左、上端に揃えます
LeftCenter	ターゲットの左、垂直方向の中央に配置します
LeftBottom	ターゲットの左、下端に揃えます
RightTop	ターゲットの右、上端に揃えます
RightCenter	ターゲットの右、垂直方向の中央に配置します
RightBottom	ターゲットの右、下端に揃えます

TipPointerPosition Enum

ツールチップ上の矢印ポインターの配置位置です。

値	説明
Auto	ポインターの位置を自動調整します（デフォルト）
Start	ツールチップの辺の始点にポインターを配置します
Middle	ツールチップの辺の中央にポインターを配置します
End	ツールチップの辺の終点にポインターを配置します

一般的な使用例

フォームフィールドのヘルプテキスト

フォーム入力に関連するヘルプを表示します。

• 基本的なセットアップについては、references/getting-started.md を参照してください
• Focus トリガーについては、references/open-modes.md を参照してください
• 入力欄にフォーカスが当たったときにツールチップを表示するには、OpensOn="Focus" を使用します
• 入力欄が隠れないようにツールチップの位置を設定します

アイコンボタンの説明

アイコンのみのボタンに説明テキストを追加します。

• 短い説明にはシンプルな Content プロパティを使用します
• すぐに反応させるには、OpensOn="Hover" を設定します
• 一貫性を保つため、Position.TopCenter または Position.BottomCenter を検討してください

リッチコンテンツカード

ホバー時に詳細情報を表示します。

• テンプレートのオプションについては、references/content.md を参照してください
• 書式付き HTML を指定した ContentTemplate を使用します
• 画像、リンク、書式付きテキストを含めます
• 複雑なコンテンツには、OpensOn="Click" と IsSticky="true" の使用を検討してください

ステータスインジケーター

ホバー時にステータスの詳細を表示します。

• CssClass を使って色分けされたツールチップを使用します
• スタイル設定については、references/customization-and-styling.md を参照してください
• コンテンツは簡潔で、ひと目で確認できるようにします

動的なダッシュボード要素

動的に追加されるウィジェットにツールチップを追加します。

• 動的なセットアップについては、references/target-configuration.md を参照してください
• 初期化後に追加される要素を処理するには、TargetContainer を使用します
• ツールチップのコンテンツにはデータ属性を使用します

アクセシビリティの強化

ツールチップがアクセシブルであることを確認します。

• 準拠要件については、references/accessibility.mdを参照してください
• テンプレートでセマンティック HTML を使用します
• キーボードナビゲーションが機能することを確認します
• スクリーンリーダーでテストします
• 色のコントラスト比を維持します

定義済みダイアログ

コンポーネントの概要

Syncfusion Blazor の定義済みダイアログは、次の2つの主要コンポーネントを使用するサービスベースのアーキテクチャを採用しています。

• SfDialogService - ダイアログをプログラムから開くために登録するサービス
• SfDialogProvider - ダイアログを表示できるようにレイアウトに追加するコンポーネント

主な機能：

• 3種類のダイアログ：アラート、確認、プロンプト
• アプリ内のどこからでもサービス経由で呼び出し可能
• 位置、寸法、アニメーションをカスタマイズ可能
• ダイアログのドラッグに対応
• アイコン付きのボタンをカスタマイズ可能
• カスタムコンテンツのレンダリング
• アクセシビリティを標準でサポート

パッケージ： Syncfusion.Blazor.Popups
名前空間： Syncfusion.Blazor.Popups

---

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

はじめに（セットアップと基本的な使い方）

📄 参照： references/getting-started.md

• 前提条件とシステム要件
• Blazor WebAssembly、Server App、Web App へのインストール
• NuGet パッケージのインストール（Syncfusion.Blazor.Popups）
• 名前空間のインポート（_Imports.razor）
• サービスの登録（SfDialogService、AddSyncfusionBlazor）
• MainLayout への SfDialogProvider の追加
• スタイルシートとスクリプトの参照
• アラートダイアログの基本（AlertAsync メソッド）
• 確認ダイアログの基本（ConfirmAsync メソッド）
• プロンプトダイアログの基本（PromptAsync メソッド）
• 3種類すべてのダイアログの基本的なコード例

ダイアログの配置

📄 参照： references/positioning.md

• DialogOptions.Position プロパティ
• PositionDataModel の設定（X と Y）
• 位置の値：left、center、right、top、bottom、offset
• アラート、確認、プロンプトの各ダイアログの位置をカスタマイズ
• 上部中央に配置する例

ドラッグ可能なダイアログ

📄 参照： references/dragging.md

• DialogOptions.AllowDragging プロパティ
• ダイアログのヘッダーによるドラッグ操作の有効化
• ヘッダーの表示が必要
• ドラッグ可能なアラート、確認、プロンプトの各ダイアログの例

ダイアログの寸法

📄 参照： references/dimensions.md

• DialogOptions.Width および Height プロパティ
• デフォルトの自動サイズ調整動作
• ピクセルまたはパーセンテージでの寸法指定
• CssClass を使用した最大幅と最大高さの設定
• CssClass を使用した最小幅と最小高さの設定
• レスポンシブなサイズ調整の方法
• カスタム寸法の例

カスタマイズオプション

📄 参照： references/customization.md

• DialogOptions.PrimaryButtonOptions（OK ボタン）
• DialogOptions.CancelButtonOptions（キャンセルボタン）
• DialogButtonOptions.Content（ボタンのテキスト）
• DialogButtonOptions.IconCss（ボタンのアイコン）
• DialogOptions.ShowCloseIcon プロパティ
• カスタムコンテンツのレンダリング用 DialogOptions.ChildContent
• アラート、確認、プロンプトの各ダイアログのカスタマイズ
• 高度なコンテンツカスタマイズの例

アニメーション効果

📄 参照： references/animation.md

• DialogOptions.AnimationSettings プロパティ
• DialogAnimationOptions の設定
• アニメーションの遅延、時間、効果
• DialogEffect の列挙値
• ズーム、フェード、スライドの効果
• ズームアニメーションの例

---

クイックスタートの例

基本的なアラートダイアログ

@page "/alert-example"
@inject SfDialogService DialogService

<SfButton @onclick="ShowAlert">Show Alert</SfButton>

@code {
    private async Task ShowAlert()
    {
        await DialogService.AlertAsync("This is an alert message!");
    }
}

基本的な確認ダイアログ

@page "/confirm-example"
@inject SfDialogService DialogService

<SfButton @onclick="ShowConfirm">Show Confirm</SfButton>
<p>@result</p>

@code {
    private string result = "";
    
    private async Task ShowConfirm()
    {
        bool isConfirmed = await DialogService.ConfirmAsync("Do you want to proceed?");
        result = isConfirmed ? "User clicked OK" : "User clicked Cancel";
    }
}

基本的なプロンプトダイアログ

@page "/prompt-example"
@inject SfDialogService DialogService

<SfButton @onclick="ShowPrompt">Show Prompt</SfButton>
<p>@userInput</p>

@code {
    private string userInput = "";
    
    private async Task ShowPrompt()
    {
        string input = await DialogService.PromptAsync("Enter your name:");
        userInput = input ?? "User cancelled";
    }
}

---

よく使われるパターン

パターン 1：削除前の確認

private async Task DeleteItem(int itemId)
{
    var options = new DialogOptions()
    {
        PrimaryButtonOptions = new DialogButtonOptions()
        {
            Content = "Delete",
            IconCss = "e-icons e-delete"
        },
        CancelButtonOptions = new DialogButtonOptions()
        {
            Content = "Cancel"
        }
    };
    
    bool confirmed = await DialogService.ConfirmAsync(
        "Are you sure you want to delete this item?", 
        "Confirm Delete", 
        options
    );
    
    if (confirmed)
    {
        // Perform delete operation
    }
}

パターン 2：配置を指定したダイアログ

private async Task ShowPositionedAlert()
{
    var options = new DialogOptions()
    {
        Position = new PositionDataModel()
        {
            X = "center",
            Y = "top"
        },
        Width = "400px",
        Height = "200px"
    };
    
    await DialogService.AlertAsync(
        "This dialog appears at the top center!",
        "Alert",
        options
    );
}

パターン 3：カスタムコンテンツのプロンプト

private async Task ShowCustomPrompt()
{
    string username = "";
    
    var options = new DialogOptions()
    {
        ChildContent = @<div>
            <label>Username:</label>
            <input type="text" @bind="username" class="e-input" />
        </div>,
        PrimaryButtonOptions = new DialogButtonOptions() { Content = "Connect" },
        CancelButtonOptions = new DialogButtonOptions() { Content = "Close" }
    };
    
    await DialogService.PromptAsync("Enter your credentials:", "Login", options);
}

パターン 4：アニメーション付きのドラッグ可能なダイアログ

private async Task ShowAnimatedDialog()
{
    var options = new DialogOptions()
    {
        AllowDragging = true,
        ShowCloseIcon = true,
        AnimationSettings = new DialogAnimationOptions()
        {
            Effect = DialogEffect.Zoom,
            Duration = 300,
            Delay = 0
        },
        Width = "500px"
    };
    
    await DialogService.AlertAsync(
        "Drag me around! I have zoom animation too!",
        "Draggable Dialog",
        options
    );
}

---

主なプロパティ

SfDialogService のメソッド

メソッド	パラメーター	戻り値	説明
AlertAsync	title, content, options	Task	OK ボタン付きのアラートダイアログを表示します
ConfirmAsync	title, content, options	Task<bool>	確認ダイアログを表示し、true または false を返します
PromptAsync	title, defaultValue, options	Task<string>	プロンプトダイアログを表示し、入力値または null を返します

DialogOptions のプロパティ

プロパティ	型	既定値	説明
Position	PositionDataModel	center/center	ダイアログの位置（X、Y 座標）
Width	string	"auto"	ダイアログの幅（px、%、em）
Height	string	"auto"	ダイアログの高さ（px、%、em）
AllowDragging	bool	false	ヘッダーをドラッグできるようにします
ShowCloseIcon	bool	false	閉じるアイコンボタンを表示します
AnimationSettings	DialogAnimationOptions	default	アニメーションの設定
PrimaryButtonOptions	DialogButtonOptions	null	プライマリ（OK）ボタンのカスタマイズ
CancelButtonOptions	DialogButtonOptions	null	キャンセルボタンのカスタマイズ
ChildContent	RenderFragment	null	ダイアログ本文のカスタムコンテンツ
CssClass	string	null	カスタム CSS クラス
CloseOnEscape	bool	true	Escape キーで閉じます
ZIndex	int	1000	ダイアログの z-index

PositionDataModel のプロパティ

プロパティ	型	値	説明
X	string	left, center, right, offset	水平方向の位置
Y	string	top, center, bottom, offset	垂直方向の位置

DialogButtonOptions のプロパティ

プロパティ	型	説明
Content	string	ボタンのテキスト
IconCss	string	ボタンアイコンの CSS クラス
IsPrimary	bool	プライマリボタンのスタイル

DialogAnimationSettings のプロパティ

プロパティ	型	説明
Effect	DialogEffect	アニメーション効果（Zoom、Fade など）
Duration	int	アニメーション時間（ミリ秒）
Delay	int	アニメーションの遅延時間（ミリ秒）

---

一般的な使用例

使用例 1：エラー／警告／情報メッセージ

アラートダイアログを使用して、ユーザーの確認が必要なシステムメッセージ、エラー、警告、情報を表示します。

使用例 2：重要な操作の確認

確認ダイアログを使用して、削除、ログアウト、データ損失を伴う操作など、破壊的な操作の前にユーザーの確認を取得します。

使用例 3：ユーザー入力の収集

プロンプトダイアログを使用して、ユーザー名、検索クエリ、設定値などの簡単なテキスト入力を収集します。

使用例 4：フォーム検証のフィードバック

フォーム項目を覆わない位置に配置したダイアログで、検証エラーや成功メッセージを表示します。

使用例 5：カスタムのインタラクティブダイアログ

カスタムコンテンツ、複数の入力欄、カスタマイズしたボタンを備えた、複雑なインタラクティブダイアログを作成します。

使用例 6：通知システム

画面上の特定の領域に表示される、アニメーション付きで位置を指定できるダイアログを使って通知システムを構築します。

---

セットアップ要件

前提条件：

1. Blazor WebAssembly、Server、または Web App プロジェクト
2. .NET SDK がインストールされていること
3. Visual Studio、VS Code、または .NET CLI

必要なパッケージ：

• Syncfusion.Blazor.Popups
• Syncfusion.Blazor.Themes

必要なセットアップ：

1. Program.cs に SfDialogService を登録します
2. AddSyncfusionBlazor() サービスを登録します
3. MainLayout.razor に SfDialogProvider を追加します
4. head に Syncfusion テーマのスタイルシートを含めます
5. body に Syncfusion スクリプトへの参照を含めます
6. _Imports.razor に Syncfusion.Blazor.Popups 名前空間をインポートします

すべての Blazor アプリの種類に対応したセットアップ手順については、references/getting-started.md を参照してください。