mcpField
S
syncfusion-maui-toolkit-button

syncfusion-maui-toolkit-button

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

syncfusion-maui-toolkit-button について

Syncfusion の SfButton を実装・カスタマイズする .NET MAUI 開発者向けのスキルです。アイコン、ビジュアル状態、カスタムコンテンツ、RTL 対応、クリックイベントを扱います。

主な機能

  1. 01アウトライン、フラット、円形のスタイル
  2. 02アイコン、背景画像、カスタムビュー
  3. 03ホバー、押下、無効状態
  4. 04トグル・チェック可能なボタン
  5. 05RTL とキーボード操作
  6. 06クリックイベント処理

活用シーン

  1. 01アイコン付きのボタンを作成
  2. 02トグル・チェック可能なボタンを実装
  3. 03操作状態ごとにボタンをスタイリング
  4. 04RTL 対応の画面を構築

インストール

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

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

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

同梱ファイル

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

references/
advanced-features.md
customization.md
getting-started.md
troubleshooting.md
visual-states.md

詳細

.NET MAUI Button の実装

Syncfusion .NET MAUI Button(SfButton)コントロールを実装およびカスタマイズするための包括的なスキルです。SfButton には、アイコン、背景画像、ビジュアル状態、角の丸み、カスタムコンテンツのサポートなど、豊富なカスタマイズオプションが用意されています。

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

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

  • .NET MAUI プロジェクトに SfButton をインストールしてセットアップする
  • テキストやアイコンを含む基本的なボタンやカスタマイズしたボタンを作成する
  • ビジュアル状態(通常、ホバー、押下、チェック済み、無効)を実装する
  • ボタンに背景画像やカスタムコンテンツを追加する
  • ボタンのクリックイベントを処理する
  • トグルボタン/チェック可能なボタンを作成する
  • RTL(右から左)をサポートする
  • ボタンの外観(色、フォント、境界線、パディング)をカスタマイズする
  • ボタン関連の問題をトラブルシューティングする

コンポーネントの概要

Syncfusion .NET MAUI Button(SfButton)は、高度な UI カスタマイズ機能を備えた、標準の MAUI ボタンを拡張するカスタムボタンコントロールです。

主な機能:

  • 柔軟なスタイル設定: アウトライン、フラット、円形、アイコンボタンの種類
  • 豊富なコンテンツ: アイコン、背景画像、カスタムビュー
  • ビジュアル状態: ホバー、押下、チェック済み、無効の状態を標準でサポート
  • アクセシビリティ: RTL サポートとキーボードナビゲーション
  • 簡単な統合: シンプルな XAML または C# による実装

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

はじめに

📄 参照: references/getting-started.md

読むタイミング:インストール、初期セットアップ、初めての実装

  • NuGet パッケージのインストール(Syncfusion.Maui.Toolkit)
  • MauiProgram.cs でのハンドラー登録
  • XAML と C# による基本的なボタンの実装
  • ImageSource と ShowIcon を使ったボタンアイコンの追加
  • BackgroundImageSource による背景画像の設定
  • 最小限の動作例
カスタマイズとスタイル設定

📄 参照: references/customization.md

読むタイミング:外観のカスタマイズ、ボタンのスタイル設定、レイアウトの制御

  • テキストのカスタマイズ(色、サイズ、フォント、配置)
  • 背景色と境界線のスタイル設定
  • 角の丸みとパディングの調整
  • サイズの制御(幅、高さ)
  • 画像の幅と配置
  • 配置オプション(水平、垂直)
  • スタイル設定の完全な例
ビジュアル状態

📄 参照: references/visual-states.md

読むタイミング:状態に応じたスタイル設定、ホバー効果、トグルボタン、インタラクティブなフィードバック

  • ビジュアル状態の概要(Normal、Hovered、Pressed、Checked、Disabled)
  • VisualStateManager の実装
  • IsCheckable を使ったチェック可能/トグルボタンの作成
  • 各状態の外観のカスタマイズ
  • 状態遷移の処理
  • 完全な状態管理の例
高度な機能

📄 参照: references/advanced-features.md

読むタイミング:RTL サポート、最新のエフェクト、カスタムコンテンツ、イベント、移行

  • 右から左(RTL)の言語サポート
  • ボタン内へのカスタムコンテンツビューの追加
  • クリックイベントの処理(Clicked イベント)
  • 高度なシナリオと組み合わせ
  • 古いバージョンからの移行
トラブルシューティング

📄 参照: references/troubleshooting.md

読むタイミング:問題、エラー、予期しない動作、ベストプラクティス

  • よくある問題と解決策
  • ハンドラー登録エラー
  • 画像の読み込みに関する問題
  • レイアウトとサイズの問題
  • ビジュアル状態が更新されない問題
  • プラットフォーム固有の考慮事項

コメント