mcpField
S
syncfusion-maui-busy-indicator

syncfusion-maui-busy-indicator

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

syncfusion-maui-busy-indicator について

アプリに読み込みや処理中の表示を加える開発者向けに、Syncfusion の .NET MAUI Busy Indicator の実装方法を解説するスキルです。アニメーション、スタイル、タイトル、オーバーレイ、状態制御を扱います。

主な機能

  1. 017 種類の組み込みアニメーション
  2. 02色・サイズ・速度のカスタマイズ
  3. 03タイトルとフォントの設定
  4. 04アニメーションのプログラム制御
  5. 05背景オーバーレイの設定

活用シーン

  1. 01データ取得中の表示
  2. 02ファイルアップロード中の案内
  3. 03処理中のユーザー操作の抑止
  4. 04ブランドに合わせた読み込み画面

インストール

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

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

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

同梱ファイル

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

references/
animation-types.md
controlling-state.md
customization.md
getting-started.md
title-configuration.md

詳細

ビジーインジケーターの実装

Syncfusion .NET MAUI Busy Indicator（SfBusyIndicator）は、アプリの読み込み、データ処理、その他の時間のかかる操作中に視覚的なフィードバックを提供します。7 種類の組み込みアニメーション、幅広いカスタマイズオプション、読み込み状態を制御するためのシンプルな API を備えています。

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

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

  • 読み込み状態を表示する：データ取得、API 呼び出し、初期化の最中
  • 処理状況のフィードバックを表示する：長時間実行される操作に対して
  • アクティビティインジケーターを実装する：カスタムアニメーションやスタイルを適用して
  • ビジーオーバーレイを追加する：処理中のユーザー操作を防ぐため
  • ブランドイメージに合わせた読み込み画面を作成する：カスタムカラー、サイズ、タイトルを設定して
  • アニメーション状態を制御する：アプリケーションロジックに応じて動的に
  • 視覚的なフィードバックを提供する：体感パフォーマンスの向上に役立つものを

一般的なシナリオ： ログイン画面、データ同期、ファイルのアップロード、検索操作、レポート生成、非同期操作、ユーザーに待機してもらう必要のあるあらゆるタスク。

コンポーネントの概要

主な機能：

  • 7 種類のアニメーション： CircularMaterial、LinearMaterial、Cupertino、SingleCircle、DoubleCircle、Globe、HorizontalPulsingBox
  • 幅広いカスタマイズ： カラー、サイズ、速度、オーバーレイの背景
  • タイトルのサポート： フォントのカスタマイズや配置オプションを設定できるテキスト
  • 状態制御： IsRunning プロパティを使用してアニメーションをプログラムから開始／停止
  • レスポンシブデザイン： フォントの自動スケーリングと適応型サイズ設定
  • オーバーレイのサポート： グラデーションを適用できるオプションの背景オーバーレイ

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

はじめに

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

参照するタイミング： 初めて実装する場合、プロジェクトのセットアップ、パッケージのインストール

学習できる内容：

  • Syncfusion.Maui.Core NuGet パッケージのインストール
  • MauiProgram.cs でのハンドラーの登録
  • 最初のビジーインジケーターの作成
  • XAML と C# による基本的な実装
アニメーションの種類

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

参照するタイミング： ビジュアルスタイルの選択、特定のアニメーション種類の実装

学習できる内容：

  • 7 種類すべての組み込みアニメーションと使用例
  • CircularMaterial（Android Material Design スタイル）
  • LinearMaterial（横方向のプログレスバー風スタイル）
  • Cupertino（iOS スタイルのスピナー）
  • SingleCircle、DoubleCircle（同心円アニメーション）
  • Globe（3D 地球儀の回転効果）
  • HorizontalPulsingBox（ボックスのパルスアニメーション）
  • ビジュアルの比較と使用例
カスタマイズ

📄 参照先： references/customization.md

参照するタイミング： インジケーターのスタイル設定、カラーやサイズの調整、アニメーション速度の設定

学習できる内容：

  • インジケーターのカラーのカスタマイズ（IndicatorColor）
  • オーバーレイ背景のスタイル設定（OverlayFill）
  • Brush 型を使用したグラデーション背景
  • アニメーション時間の制御（DurationFactor：0～1）
  • インジケーターのサイズ設定（SizeFactor：0～1）
  • スタイル設定の完全な例
タイトルの設定

📄 参照先： references/title-configuration.md

参照するタイミング： テキストラベルの追加、フォントのカスタマイズ、タイトルの配置

学習できる内容：

  • タイトルテキストの設定（Title プロパティ）
  • テキストカラーのカスタマイズ（TextColor）
  • タイトルの配置（Top、Bottom、None）
  • 間隔の制御（TitleSpacing）
  • フォントのカスタマイズ（サイズ、属性、ファミリー）
  • 自動スケーリングのサポート
アニメーション状態の制御

📄 参照先： references/controlling-state.md

参照するタイミング： アニメーションの開始／停止、表示状態の管理、動的な制御

学習できる内容：

  • IsRunning プロパティの使い方
  • アニメーションの開始と停止
  • 既定の動作（false）
  • ViewModel プロパティへのバインド
  • イベント駆動型の状態管理

コメント

Markdown 対応