mcpField
S
syncfusion-maui-expander

syncfusion-maui-expander

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

syncfusion-maui-expander について

Syncfusion の SfExpander を実装・カスタマイズする .NET MAUI 開発者向けガイドです。アコーディオンなどに使う折りたたみコンテンツ、アニメーション、イベント、ヘッダーのスタイルを扱います。

主な機能

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

活用シーン

  1. 01折りたたみ式 FAQ の作成
  2. 02設定パネルの内容を整理
  3. 03請求書やレシートの項目を展開表示

インストール

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

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

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

同梱ファイル

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

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

詳細

.NET MAUI Expander（SfExpander）の実装

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

このスキルを使用する場面

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

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

コンポーネントの概要

  • ヘッダーを1回タップして展開／折りたたみを操作
  • ヘッダービューとコンテンツビューのレイアウトを自由にカスタマイズ可能
  • 時間とイージングを設定できるスムーズなアニメーション
  • Expanding、Expanded、Collapsing、Collapsed の各状態に対応するイベントシステム
  • IsExpanded プロパティによるプログラム制御
  • 動的なスタイル設定に対応する Visual State Manager
  • ヘッダーの外観をカスタマイズ（背景、アイコンの位置、色）
  • モダンなリキッドグラス効果（.NET 10+、macOS 26+、iOS 26+）
  • Expanding および Collapsing 操作をキャンセル可能
  • プラットフォームに最適化されたレンダリングとアニメーション

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

はじめに

📄 読む: references/getting-started.md

読むタイミング：初回セットアップ、インストール、基本的な実装

  • Syncfusion.Maui.Expander NuGet パッケージのインストール
  • Syncfusion ハンドラーの登録（ConfigureSyncfusionCore）
  • 基本的な 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 の完全な例
リキッドグラス効果

📄 参照： references/liquid-glass-effect.md

読むタイミング：色合いが周囲に合わせて変化する、現代的な半透明デザインを適用する場合

  • リキッドグラス効果を使用する場面（プレミアムな UX アプリケーション）
  • SfExpander を SfGlassEffectView 内に配置する方法
  • expander で EnableLiquidGlassEffect="True" を設定する方法
  • グラス効果に Background="Transparent" を使用する方法
  • リキッドグラスを使用した請求書の完全な例
  • プラットフォーム要件：.NET 10 以上、macOS 26 以上、iOS 26 以上
  • 複数の expander に一貫したグラス効果を適用する方法

コメント

Markdown 対応