mcpField
S
syncfusion-maui-switch

syncfusion-maui-switch

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

syncfusion-maui-switch について

.NET MAUI アプリで Syncfusion SfSwitch を実装するためのガイドです。状態管理や外観のカスタマイズに加え、RTL レイアウトとテーマ設定を扱います。

主な機能

  1. 01オン、オフ、不確定状態
  2. 02キャンセル可能な状態変更イベント
  3. 03色、サイズ、枠線、アイコンのカスタマイズ
  4. 04Visual State Manager による状態別スタイル
  5. 05RTL レイアウトと複数のテーマ

活用シーン

  1. 01.NET MAUI の画面にスイッチを追加
  2. 02不確定状態と無効状態の実装
  3. 03状態遷移の検証や抑止
  4. 04アプリに合わせたスイッチの外観設定

インストール

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

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

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

同梱ファイル

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

references/
advanced-features.md
customization.md
events.md
getting-started.md
switch-states.md
visual-state-manager.md

詳細

Syncfusion .NET MAUI Switch（SfSwitch）の実装

Syncfusion .NET MAUI Switch（SfSwitch）コントロールを使用すると、豊富なカスタマイズオプション、複数の状態への対応、高度なビジュアルスタイル機能を活用して、状態を効率的に切り替えられます。

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

次のことが必要な場合に、このスキルを使用してください。

  • .NET MAUI アプリケーションにトグルスイッチやオン／オフコントロールを実装する
  • 視覚的なフィードバックを備えた二値状態コントロールを作成する
  • 作業中のシナリオで不確定状態を実装する
  • スイッチの外観（色、サイズ、角の丸み、境界線）をカスタマイズする
  • スイッチのつまみの内側にカスタムアイコンやパスを追加する
  • 検証やキャンセルのロジックを伴う状態変更イベントを処理する
  • Visual State Manager を使用して高度なスタイルを適用する
  • 国際化に対応するため、右から左（RTL）のレイアウトをサポートする
  • リキッドグラスモーフィズムなど、モダンな UI 効果を実装する
  • 状態を視覚的にフィードバックする、アクセシブルなトグルコントロールを提供する

コンポーネントの概要

SfSwitch コントロールの機能は次のとおりです。

  • 複数の状態： オン、オフ、不確定、およびそれぞれの無効状態
  • 豊富なカスタマイズ： 色、サイズ、境界線、角の丸み、カスタムアイコン
  • イベント処理： キャンセルに対応した StateChanged イベントと StateChanging イベント
  • Visual State Manager： ホバー時、押下時、無効時の状態に応じた高度なスタイル設定
  • モダンな機能： 上質な UI 体験を実現するリキッドグラス効果
  • RTL サポート： グローバルアプリケーション向けの双方向レイアウトに対応
  • テーマ： Material、Cupertino、Fluent のデザインテーマ

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

はじめに

📄 参照： references/getting-started.md

次のことが必要な場合に使用してください。

  • Syncfusion.Maui.Buttons NuGet パッケージをインストールする
  • ConfigureSyncfusionCore を使用してハンドラーを登録する
  • 最初の基本的なスイッチを実装する
  • XAML と C# の両方でスイッチを設定する
  • 状態変更に応じたアクションを実行する
スイッチの状態

📄 参照： references/switch-states.md

次のことが必要な場合に使用してください。

  • 使用可能なすべてのスイッチの状態を理解する
  • オン、オフ、デフォルトの状態を実装する
  • 不確定状態（IsOn = null）を有効にして使用する
  • 無効状態のバリエーション（無効なオン／オフ／不確定状態）を作成する
  • プログラムから状態遷移を制御する
  • 初期状態の値を設定する
イベント

📄 参照： references/events.md

次のことが必要な場合に使用してください。

  • 状態変更の通知を処理する（StateChanged イベント）
  • 状態遷移を検証またはキャンセルする（StateChanging イベント）
  • イベントハンドラーで変更前と変更後の状態値を取得する
  • 条件付きの状態変更を実装する
  • スイッチの状態変更時にアクションを実行する
  • 意図しない状態遷移を防止する
カスタマイズ

📄 参照： references/customization.md

次のことが必要な場合に使用してください。

  • トラックとつまみの色をカスタマイズする
  • スイッチの寸法（幅、高さ）を調整する
  • 境界線の色と太さを設定する
  • 角の丸みを設定して、丸みのある外観にする
  • つまみにカスタムアイコンやパスを追加する
  • 状態ごとに異なる色を適用する
  • ブランドやテーマに合わせたスイッチのデザインを作成する
Visual State Manager

📄 参照： references/visual-state-manager.md

次のことが必要な場合に使用してください。

  • 状態に応じた高度なスタイルを適用する
  • ホバー時の外観をカスタマイズする（OnHovered、OffHovered、IndeterminateHovered）
  • 押下時の状態をスタイル設定する（OnPressed、OffPressed、IndeterminatePressed）
  • 無効状態の表示を設定する（OnDisabled、OffDisabled、IndeterminateDisabled）
  • 複雑なビジュアルトランジションを実装する
  • インタラクティブなホバー効果と押下効果を作成する
高度な機能

📄 読む： references/advanced-features.md

次のような場合に使用します：

  • モダンな UI でリキッドグラス効果を有効にする（EnableLiquidGlassEffect）
  • 右から左（RTL）へのレイアウトをサポートする
  • 国際化のために双方向レイアウトをサポートする
  • 鮮やかな背景にグラスモーフィズム効果を適用する
  • プラットフォーム固有の機能に対応する（.NET 10+、iOS 26、macOS 26）

コメント

Markdown 対応