mcpField
S
syncfusion-maui-toolkit-popup

syncfusion-maui-toolkit-popup

github.com/syncfusionデザイン・UI3948 回インストール7 週間前に更新
リポジトリ

syncfusion-maui-toolkit-popup について

Syncfusion の SfPopup コントロールを .NET MAUI アプリで使うためのガイドスキルです。ダイアログやオーバーレイの位置、レイアウト、アニメーション、モーダル動作、イベント処理を開発者向けに解説します。

主な機能

  1. 01中央・絶対・相対・全画面の配置
  2. 02ヘッダー・コンテンツ・フッターのカスタムレイアウト
  3. 031 ボタンまたは 2 ボタンのフッターモード
  4. 04モーダル動作とオーバーレイ制御
  5. 05組み込みアニメーションと設定
  6. 06ライフサイクルおよびボタンイベント

活用シーン

  1. 01アラートや確認の表示
  2. 02ダイアログ内でのフォームやカスタムビュー表示
  3. 03コンテキストメニューやツールチップの作成
  4. 04ローディングまたは進捗ダイアログの表示

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/syncfusion/maui-toolkit-ui-components-skills --skill syncfusion-maui-toolkit-popup

インストール後、Claude Code で/syncfusion-maui-toolkit-popupを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
advanced-integration.md
events-and-modal.md
getting-started.md
layout-customization.md
positioning.md
sizing-and-animations.md
styling-and-appearance.md

詳細

.NET MAUI ポップアップの実装

Syncfusion .NET MAUI Popup（SfPopup）コントロールを実装して、アラートメッセージ、カスタムビュー、モーダルダイアログを表示するための包括的なスキルです。位置指定やカスタマイズの豊富なオプションを利用できます。

このスキルを使用するタイミング

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

  • .NET MAUI アプリでアラートメッセージ、確認メッセージ、通知を表示する
  • ユーザー操作が必要なモーダルダイアログを表示する
  • カスタムヘッダー、フッター、コンテンツを備えたポップアップを作成する
  • ポップアップを特定の場所（中央、絶対位置、ビューに対する相対位置）に配置する
  • 新しいページに移動せずに情報オーバーレイを表示する
  • ツールチップ、コンテキストメニュー、フライアウトコンテンツを実装する
  • 読み込みインジケーターや進行状況ダイアログを表示する
  • 全画面のモーダルエクスペリエンスを作成する
  • ポップアップ内にカスタムビュー（ListView、DataGrid、フォーム）を表示する
  • ボタンのコールバックでユーザーの承諾／拒否アクションを処理する

コンポーネントの概要

Syncfusion .NET MAUI Popup（SfPopup） は、次の機能を備えたカスタマイズ可能なポップアップを表示する、多用途のレイアウトコントロールです。

  • 柔軟な位置指定：中央、絶対座標、任意のビューに対する相対位置、または全画面
  • カスタマイズ可能なレイアウト：テンプレート対応とカスタムスタイル設定が可能なヘッダー、本文、フッター
  • 外観モード：フッターの1ボタンまたは2ボタンレイアウト
  • モーダル対応：ポップアップが閉じられるまで背景との操作を無効化
  • アニメーション：ズーム、フェード、スライドの組み込みアニメーション
  • 自動サイズ調整：コンテンツのサイズに合わせて自動調整
  • MVVM 対応：データバインディングとコマンドを全面的にサポート

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

はじめにとインストール

📄 参照： references/getting-started.md

  • NuGet パッケージのインストール（Syncfusion.Maui.Toolkit）
  • MauiProgram.cs でのハンドラー登録
  • ポップアップの基本的な初期化（XAML および C#）
  • ポップアップの表示と閉じる方法
  • 最初のポップアップの実装
  • ネイティブへの埋め込み（Android/iOS）
位置指定オプション

📄 参照： references/positioning.md

  • IsOpen または Show() による中央配置
  • x、y 座標による絶対位置への配置
  • 任意のビューに対する相対位置への配置
  • オフセットを指定した絶対相対位置指定
  • 全画面モード
  • MVVM での位置指定パターン
  • 表示時間を指定した自動クローズ
  • アクションバーの上への配置
  • ShowAsync() による結果の返却
レイアウトのカスタマイズ

📄 参照： references/layout-customization.md

  • 外観モード（OneButton、TwoButton）
  • ヘッダー、フッター、閉じるボタンの表示／非表示
  • カスタムヘッダーテンプレート
  • カスタムフッターテンプレート
  • カスタムコンテンツテンプレート
  • ヘッダーとフッターの高さ
  • ボタンのテキストのカスタマイズ
  • Message プロパティ
  • オーバーレイ背景の無効化
サイズ調整とアニメーション

📄 参照： references/sizing-and-animations.md

  • 幅と高さの設定
  • 自動サイズ調整モード（Height、Width、Both、None）
  • 全画面ポップアップモード
  • アニメーションの種類（Zoom、Fade、SlideOnLeft、SlideOnRight、SlideOnTop、SlideOnBottom）
  • アニメーションの時間とイージング
  • カスタムアニメーション効果
イベントとモーダル動作

📄 参照： references/events-and-modal.md

  • ポップアップのライフサイクルイベント（Opening、Opened、Closing、Closed）
  • イベント引数とキャンセル
  • モーダルモードの設定
  • オーバーレイ操作の設定
  • オーバーレイのタップ時に閉じる動作
  • 承諾／拒否ボタンのイベント
スタイルと外観

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

参照するタイミング： ポップアップのヘッダー、フッター、メッセージのスタイルを設定して外観をカスタマイズするとき。オーバーレイやストロークのカスタマイズ。

内容：

  • ヘッダーのスタイル設定
  • フッターのスタイル設定
  • メッセージ／コンテンツのスタイル設定
  • 境界線のカスタマイズ
  • オーバーレイ背景のスタイル設定
  • ぼかし効果
  • 背景のスタイル設定
  • 影の効果
  • スタイル設定の例
高度な統合と使用例

📄 参照： references/advanced-integration.md

  • ポップアップでの ListView の表示
  • DataGrid のセルタップとの統合
  • Switch コントロールのバインディング例
  • コマンドを使用した MVVM パターン
  • ローカライズのサポート
  • 旧バージョンからの移行
  • ベストプラクティスとパターン

コメント

Markdown 対応