mcpField
S
syncfusion-maui-toolkit-expander

syncfusion-maui-toolkit-expander

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

syncfusion-maui-toolkit-expander について

.NET MAUI の画面に Syncfusion SfExpander を実装するためのスキルです。折りたたみセクションやアコーディオンを作る開発者向けに、レイアウト、アニメーション、状態イベント、外観設定を説明します。

主な機能

  1. 01ヘッダー操作によるコンテンツの開閉
  2. 02ヘッダーとコンテンツビューのカスタマイズ
  3. 03アニメーション時間とイージングの設定
  4. 04開閉イベントの処理とキャンセル
  5. 05Visual State Manager による状態別スタイル

活用シーン

  1. 01FAQ のアコーディオン画面の構築
  2. 02展開可能な設定パネルの作成
  3. 03請求書や領収書の折りたたみ表示
  4. 04展開状態に応じた外観変更

インストール

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

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

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

同梱ファイル

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

references/
animation-events.md
appearance-styling.md
getting-started.md
header-content-customization.md

詳細

.NET MAUI Expander（SfExpander）の実装

Syncfusion .NET MAUI Expander コントロールは、省スペースなレイアウトを作成するための、折りたたみ可能および展開可能なコンテンツセクションを提供します。ユーザーはヘッダーをタップして、スムーズなアニメーションでコンテンツを表示または非表示にできます。アコーディオンレイアウト、FAQ、整理されたデータの表示に最適です。

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

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

  • 省スペースなレイアウトと整理されたコンテンツ表示のために、折りたたみ可能なセクションを実装する
  • FAQ、設定パネル、グループ化されたデータ向けに、アコーディオン形式のインターフェイスを作成する
  • 展開可能なセクション（日時、項目、支払い、住所）を備えた、請求書やレシートのビューを構築する
  • ユーザーがタップして詳細情報を表示する、動的なヘッダー／コンテンツのレイアウトを設計する
  • 時間やイージングをカスタマイズできる、展開／折りたたみのアニメーション機能を追加する
  • ユーザー操作や状態管理を制御するために、展開／折りたたみイベントを処理する
  • 背景、アイコンの位置、Visual State Manager のスタイルを使用して、ヘッダーの外観をカスタマイズする

コンポーネントの概要

  • ヘッダーをタップするだけで、展開／折りたたみを操作できます
  • ヘッダーとコンテンツのレイアウトを自在にカスタマイズできます
  • 時間とイージングを設定できる、スムーズなアニメーション
  • 展開中、展開後、折りたたみ中、折りたたみ後の状態に対応するイベントシステム
  • IsExpanded プロパティによるプログラムでの制御
  • 動的なスタイル設定に対応する Visual State Manager
  • ヘッダーの外観をカスタマイズ（背景、アイコンの位置、色）
  • 展開および折りたたみ操作のキャンセルに対応
  • プラットフォームに最適化されたレンダリングとアニメーション

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

はじめに

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

参照するタイミング：初回のセットアップ、インストール、基本的な実装

  • Syncfusion.Maui.Toolkit NuGet パッケージのインストール
  • Syncfusion ハンドラーの登録（ConfigureSyncfusionToolkit）
  • 基本的な SfExpander インスタンスの作成
  • Header ビューと Content ビューの定義
  • 初期状態の制御に使用する IsExpanded プロパティ
  • 複数の Expander を使用した請求書の完全なサンプル
  • 最初の Expander アプリケーションの実行
ヘッダーとコンテンツのカスタマイズ

📄 参照先： references/header-content-customization.md

参照するタイミング：レイアウトとビューを使ってヘッダーおよびコンテンツのセクションをカスタマイズする場合

  • Header プロパティと Content プロパティで任意の UI ビューを読み込む
  • アイコンとラベルを含む Grid レイアウトの使用
  • フォントファミリーを使用したアイコンの統合
  • 複数の Expander を使用したレイアウト（複数のセクションがある請求書）
  • コンテンツ構成のベストプラクティス
  • よくある問題を回避する（コンテナー内での Label の折り返し）
アニメーションとイベント

📄 参照先： references/animation-events.md

参照するタイミング：アニメーションの動作を制御し、展開／折りたたみイベントを処理する場合

  • AnimationDuration プロパティ（既定値：300ms）
  • AnimationEasing プロパティ（Linear、SinOut など）
  • IsExpanded プロパティによるプログラムでの制御
  • Expanding イベント：展開前に発生（キャンセル可能）
  • Expanded イベント：展開の完了後に発生
  • Collapsing イベント：折りたたみ前に発生（キャンセル可能）
  • Collapsed イベント：折りたたみの完了後に発生
  • キャンセル処理を含むイベントハンドラーのサンプル
外観とスタイル

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

参照するタイミング：ヘッダーの外観、色、アイコン、Visual State Manager のスタイルをカスタマイズする場合

  • HeaderIconPosition プロパティ（Start、End）
  • HeaderBackground の色のカスタマイズ
  • HeaderIconColor のカスタマイズ
  • Visual State Manager（VSM）の状態：Expanded、Collapsed、PointerOver、Normal
  • Expander の状態に応じた外観の動的な変更
  • 色の遷移を含む VSM の完全なサンプル

コメント

Markdown 対応