mcpField
S
syncfusion-maui-badge-view

syncfusion-maui-badge-view

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

syncfusion-maui-badge-view について

Syncfusion の SfBadgeView を実装・カスタマイズする .NET MAUI 開発者向けガイドです。テキストやアイコン、配置、スタイル、アニメーション、アクセシビリティを扱います。

主な機能

  1. 01テキスト件数とステータスアイコン
  2. 02コンテンツ周囲の8つの配置位置
  3. 03色、フォント、形状のカスタマイズ
  4. 04テキスト変更時の拡大縮小アニメーション
  5. 05スクリーンリーダー対応

活用シーン

  1. 01ボタンやアバターに未読数を追加
  2. 02オンラインやビジー状態を表示
  3. 03バッジの位置と外観を調整

インストール

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

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

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

同梱ファイル

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

references/
animation.md
customization.md
getting-started.md
positioning.md
predefined-symbols.md

詳細

.NET MAUI でのバッジビューの実装

Syncfusion の .NET MAUI Badge View（SfBadgeView）コントロールを実装、カスタマイズするための包括的なガイドです。バッジビューを使うと、ボタン、画像、アバターなどのコンテンツに通知数、ステータスインジケーター、アラートを重ねて表示できます。

このスキルを使う場面

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

  • ボタン、アイコン、プロフィール画像に通知バッジを追加する
  • 未読メッセージ数や通知数を表示する
  • ステータスインジケーター（オンライン、取り込み中、離席中）を表示する
  • 位置をカスタマイズした通知オーバーレイを実装する
  • アニメーション付きの通知バッジを追加する
  • 定義済みの記号やアイコンを使ったバッジを作成する
  • バッジの外観（色、フォント、形状）をカスタマイズする
  • コンテンツ要素の周囲にバッジを配置する
  • スクリーンリーダー対応のアクセシブルな通知バッジを実装する

コンポーネントの概要

Badge View（SfBadgeView）は、コンテンツ要素にバッジを重ねて表示する通知コントロールです。次の機能に対応しています。

  • テキストバッジ： 通知数や短いテキストを表示します
  • アイコンバッジ： 定義済みのステータス記号（オンライン、離席中、取り込み中など）を表示します
  • 配置： コンテンツの周囲にある 8 つの位置（TopRight、TopLeft、BottomRight など）にバッジを配置します
  • カスタマイズ： フォント、色、線、背景、角の丸みを設定できます
  • アニメーション： バッジのテキストが変わったときに拡大縮小アニメーションを表示します
  • 定義済みのスタイル： 8 種類の色タイプ（Primary、Error、Success、Warning など）を使用できます
  • アクセシビリティ： バッジの内容をスクリーンリーダーで読み上げられます

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

はじめに

📄 参照： references/getting-started.md

次のような場合は、このリファレンスを参照してください。

  • Syncfusion.Maui.Core NuGet パッケージをインストールする
  • MauiProgram.cs で Syncfusion ハンドラーを登録する
  • 初めてのバッジビューを作成する
  • バッジにテキストやコンテンツを追加する
  • 基本的な通知バッジを実装する
  • ScreenReaderText でアクセシビリティに対応する
バッジのカスタマイズ

📄 参照： references/customization.md

次のような場合は、このリファレンスを参照してください。

  • フォントのプロパティ（サイズ、ファミリー、属性）をカスタマイズする
  • 枠線を追加して太さを調整する
  • テキストの色とパディングを変更する
  • 定義済みのバッジタイプ（Primary、Error、Success、Warning、Info、Dark、Light、Secondary）を適用する
  • カスタム背景色を設定する
  • 角の丸みを設定してバッジを丸くする
  • バッジの配置（Center、Start、End）を設定する
  • サイズが異なる場合のバッジの配置を調整する
  • AutoHide を使って複数のバッジを均一に配置する
  • アクセシビリティのためにフォントの自動スケーリングを有効にする
  • バッジの表示状態を制御する
位置のカスタマイズ

📄 参照： references/positioning.md

次のような場合は、このリファレンスを参照してください。

  • コンテンツの周囲にバッジを配置する（TopRight、TopLeft、BottomRight、BottomLeft、Left、Top、Right、Bottom）
  • Offset プロパティでバッジの配置を微調整する
  • X、Y 座標を調整して正確に配置する
  • 画像、ボタン、カスタムコントロールにバッジを配置する
アニメーション

📄 参照： references/animation.md

次のような場合は、このリファレンスを参照してください。

  • バッジのアニメーションを有効または無効にする
  • バッジのテキストが変わったときの拡大縮小アニメーションを設定する
  • アニメーションの時間を調整して、効果を速くしたり遅くしたりする
  • 動的な通知バッジを作成する
定義済みの記号

📄 参照： references/predefined-symbols.md

次のような場合は、このリファレンスを参照してください。

  • テキストの代わりにバッジアイコン（Add、Available、Away、Busy、Delete、Dot、Prohibit）を使用する
  • 定義済みの記号でステータスインジケーターを表示する
  • アイコンとテキストの優先順位を理解する
  • アバターや画像にアイコンベースのバッジを実装する

コメント

Markdown 対応