syncfusion-aspnetcore-switch

Syncfusion ASP.NET Core Switch コンポーネントの実装

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

ユーザーが次のことを必要としている場合に、このスキルを使用します。

• ブール値入力用のトグルボタン／スイッチを作成する（オン／オフ、有効／無効、はい／いいえ）
• フォームに Switch コントロールを追加する（ユーザーが状態を選択するため）
• Switch の外観を設定する（ラベル、サイズ、色）
• イベントハンドラーで Switch の状態変更を処理する
• Switch コンポーネントのスタイルを設定し、カスタマイズする
• Switch を ASP.NET Core のモデルやバックエンドロジックと連携させる
• Switch の値を使った検証やフォーム送信を実装する

Switch コンポーネントについて

Syncfusion Switch（トグルボタン）は、2 つの状態を切り替えるための軽量でアクセシブルな入力コントロールです。TypeScript／JavaScript で構築されており、ASP.NET Core の Razor マークアップや C# のバックエンドコードとシームレスに連携します。

主な機能：

• 2 値の状態切り替え（チェック済み／未チェック）
• オン／オフのカスタムラベル
• キーボードナビゲーションに対応
• イベント駆動型の変更検出
• CSS によるカスタマイズ
• WCAG アクセシビリティガイドラインに準拠
• 軽量で応答性に優れる

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

Switch の使用を開始する

📄 参照： references/getting-started.md

• TagHelper の登録とセットアップ
• NuGet パッケージのインストールと確認
• 最初の Switch コントロールの作成
• オン／オフラベルの設定
• 基本的な初期化とレンダリング

Switch のプロパティと設定

📄 参照： references/switch-properties.md

• Switch のプロパティ（checked、disabled、name、value）の理解
• ASP.NET Core モデルを使ったプロパティのバインド
• フォームでのデータモデル連携
• Switch の状態を C# プロパティにバインド
• デフォルト値と初期状態

Switch のイベントと状態管理

📄 参照： references/switch-events.md

• 変更イベントハンドラーの実装
• 状態遷移の検出
• Switch の値を使ったフォーム送信
• サーバー側の検証
• ユーザー操作の追跡

スタイル設定とカスタマイズ

📄 参照： references/styling-customization.md

• カスタマイズ用 CSS クラス（wrapper、handle、inner）
• テーマの適用（Material、Fabric、Bootstrap）
• CSS による外観のカスタマイズ
• Theme Studio との連携
• 高度なスタイル設定テクニック

高度な操作パターン

📄 参照： references/advanced-how-to.md

• Switch のサイズを変更する（デフォルトと小サイズ）
• 右から左への表示（RTL）に対応する
• 状態変更を防止または捕捉する
• 条件に応じて無効状態を設定する
• フォームから Switch の値を送信する

クイックスタートの例

基本的な Switch の実装

@addTagHelper *, Syncfusion.EJ2


<div class="switch-container">
    <label>Enable Notifications</label>
    <ejs-switch id="switchId"></ejs-switch>
</div>

ラベル付き Switch

<ejs-switch id="switchWithLabels" 
            onLabel="ON" 
            offLabel="OFF">
</ejs-switch>

イベント処理付き Switch

<ejs-switch id="switchWithEvent" 
            change="onChange">
</ejs-switch>

<script>
    function onChange(args) {
        console.log('Switch state changed:', args.checked);
        // Update UI or call server
    }
</script>

よく使われるパターン

パターン 1：Switch をフォームモデルにバインドする

<ejs-switch id="notificationSwitch" 
            checked="@Model.NotificationEnabled"
            change="onNotificationChange">
</ejs-switch>

<script>
    function onNotificationChange(args) {
        // Update form data for submission
        document.getElementById('notificationValue').value = args.checked;
    }
</script>

パターン 2：条件ロジックによる無効状態

<ejs-switch id="premiumSwitch" 
            disabled="@(!Model.IsPremiumUser)">
</ejs-switch>

パターン 3：複数の Switch をグループ化する

<div class="preferences">
    <div class="preference-item">
        <label>Email Notifications</label>
        <ejs-switch id="emailSwitch"></ejs-switch>
    </div>
    <div class="preference-item">
        <label>SMS Notifications</label>
        <ejs-switch id="smsSwitch"></ejs-switch>
    </div>
</div>

主なプロパティ

プロパティ	型	説明	使用場面
checked	boolean	初期状態（true = オン、false = オフ）	ページ読み込み時のスイッチのデフォルト位置を設定する
disabled	boolean	操作を無効にする（true／false）	表示はするが変更を防ぐ（権限、読み込み中など）
name	string	HTML フォームの name 属性	フォーム送信やサーバー側のバインド
value	string	HTML フォームの value	サーバーに送信するカスタム値
onLabel	string	「オン」状態で表示するテキスト	有効な選択肢を明確にする
offLabel	string	「オフ」状態で表示するテキスト	無効な選択肢を明確にする
change	function	状態変更時のイベントハンドラー	ユーザー操作に応じた処理を行う
cssClass	string	スタイル設定用のカスタム CSS クラス	テーマやカスタム外観を適用する

一般的なユースケース

1. ユーザー設定 - 通知、メール、分析トラッキングの有効化／無効化
2. 機能の切り替え - 実験的な機能、ベータ版、メンテナンスモードの切り替え
3. フォームのオプション - 利用規約への同意、データ共有への同意、同意フォーム
4. 管理者コントロール - ユーザー、機能、システム設定の有効化／無効化
5. サブスクリプションの状態 - サブスクリプション、試用版、ライセンスの有効化／無効化

次のステップ

1. ここから開始： 初期設定についてははじめにをご確認ください
2. 設定： ユースケースに合わせてスイッチのプロパティをご確認ください
3. イベントの処理： インタラクティブな操作についてはイベント処理をご覧ください
4. カスタマイズ： 外観についてはスタイル設定をご確認ください

完全なリファレンスについては、Syncfusion ASP.NET Core Switch Documentationをご覧ください。