mcpField
S
syncfusion-maui-accordion

syncfusion-maui-accordion

github.com/syncfusion開発61210 回インストール2 週間前に更新
リポジトリ

syncfusion-maui-accordion について

Syncfusion の .NET MAUI Accordion で縦方向の折りたたみセクションを作る開発者向けのスキルです。単一・複数項目の展開、データバインディング、外観、イベント、プログラムによるスクロールを扱います。

主な機能

  1. 01単一・複数項目の展開
  2. 02BindableLayout によるデータバインディング
  3. 03アニメーションとイージングの設定
  4. 04色・アイコン・状態のカスタマイズ
  5. 05展開・折りたたみイベント
  6. 06プログラムによるスクロール制御

活用シーン

  1. 01展開式 FAQ の作成
  2. 02グループ化した設定の表示
  3. 03従業員や連絡先の表示
  4. 04階層コンテンツの省スペース表示

インストール

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

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

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

同梱ファイル

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

references/
advanced-features.md
appearance-customization.md
data-binding.md
events.md
getting-started.md

詳細

Syncfusion® .NET MAUI Accordion の実装

Syncfusion .NET MAUI Accordion（SfAccordion）を実装するための包括的なガイドです。SfAccordion は、ユーザーが 1 つまたは複数の項目を同時に展開したり折りたたんだりできる、垂直方向に折りたたみ可能なパネルコントロールです。

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

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

  • .NET MAUI で折りたたみ可能／展開可能なコンテンツセクションを実装する
  • 従業員名簿、連絡先一覧、または詳細なレコードを表示する
  • 回答を展開できる FAQ セクションを作成する
  • オプションをグループ化した設定パネルを構築する
  • 展開／折りたたみ動作で階層データを表示する
  • 垂直方向のエキスパンダーパネルを実装する
  • Accordion 項目を ObservableCollection データソースにバインドする
  • テーマや Visual State を使用して Accordion の外観をカスタマイズする
  • 検証を伴う展開／折りたたみイベントを処理する

コンポーネントの概要

.NET MAUI Accordion は、各項目がヘッダーとコンテンツセクションで構成される、垂直方向に積み重ねられたインターフェイスを提供します。ユーザーはヘッダーをタップしてコンテンツを展開／折りたたみできます。階層情報、FAQ、従業員名簿、またはグループ化したコンテンツを省スペースで表示する必要があるあらゆる場面に適しています。

  • 単一項目または複数項目の展開モード
  • .NET MAUI BindableLayout によるデータバインディング
  • カスタマイズ可能なアニメーション（期間とイージング）
  • 柔軟な外観のカスタマイズ（色、アイコン、Visual State）
  • 展開／折りたたみ操作のイベント処理
  • Liquid Glass Effect のサポート（iOS 26+、macOS 26+）
  • プログラムによるスクロール制御

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

はじめに

📄 参照： references/getting-started.md

  • Syncfusion.Maui.Expander NuGet パッケージのインストール
  • ConfigureSyncfusionCore() によるハンドラーの登録
  • XAML および C# での基本的な SfAccordion の設定
  • Header と Content を含む AccordionItem の作成
  • 展開モード：Single、Multiple、MultipleOrNone
  • アニメーションの期間とイージングのカスタマイズ
  • 項目の間隔の設定
  • 自動スクロール位置の設定
  • プログラムによるスクロールのための BringIntoView メソッド
BindableLayout によるデータバインディング

📄 参照： references/data-binding.md

  • INotifyPropertyChanged を実装したデータモデルの作成
  • Accordion 項目用 ObservableCollection の設定
  • BindingContext の設定
  • データバインディングでの BindableLayout.ItemsSource の使用
  • 項目の外観を定義する BindableLayout.ItemTemplate の設定
  • IsExpanded プロパティによる双方向バインディング
  • コレクションからの動的な項目生成
  • データバインディングを使った従業員一覧の完全な例
外観のカスタマイズ

📄 参照： references/appearance-customization.md

  • ヘッダーアイコンの位置（Start、End）
  • ヘッダーの背景色のカスタマイズ
  • アイコンの色のカスタマイズ
  • 状態に応じたスタイル設定に Visual State Manager を使用
    • Expanded 状態と Collapsed 状態
    • キーボード操作用の Focused 状態
    • ホバー効果用の PointerOver 状態
    • Normal 状態のスタイル設定
  • Visual State のスタイル設定の完全な例
イベントと操作

📄 参照： references/events.md

  • Expanding イベント（キャンセル可能）
  • Expanded イベント（完了通知）
  • Collapsing イベント（キャンセル可能）
  • Collapsed イベント（完了通知）
  • イベント引数：Cancel プロパティと Index プロパティ
  • 展開／折りたたみ前の検証
  • 一般的なイベント処理パターン
高度な機能

📄 参照： references/advanced-features.md

  • 自動スクロール位置（Top、MakeVisible）
  • プログラムによるスクロールのための BringIntoView
  • Liquid Glass Effect の統合
    • SfAccordion を SfGlassEffectView 内に配置
    • EnableLiquidGlassEffect プロパティ
    • 透明な背景の設定
    • プラットフォーム要件（iOS 26+、macOS 26+）
  • Height=Auto を使用する Grid レイアウトでの考慮事項
  • HorizontalOptions と VerticalOptions のベストプラクティス

コメント

Markdown 対応