syncfusion-blazor-buttons

Syncfusion Blazor Buttons コンポーネント

目次

• このスキルを使用する場面
• コンポーネントの概要
• 共通のセットアップとインストール
• ドキュメントとナビゲーションガイド
• コンポーネント共通のパターン
• 共通設定
• 一般的なユースケース

---

コンポーネントの概要

Syncfusion.Blazor.Buttons パッケージには、包括的なボタンコンポーネントが 11 種類用意されています。

コアボタン

1. Button (SfButton) - 複数のタイプ、スタイル、アイコン、状態を備えた標準的なボタン
2. ButtonGroup (SfButtonGroup) - 選択モードを備えたボタングループコントロール
3. CheckBox (SfCheckBox) - チェック済み、未チェック、未確定の状態を持つ 3 状態チェックボックス
4. RadioButton (SfRadioButton) - 相互に排他的な選択に使用するラジオボタン
5. ToggleSwitch (SfSwitch) - オン／オフを切り替えるトグルスイッチコントロール

インタラクティブボタン

6. DropdownMenu (SfDropDownButton) - ドロップダウンメニューのオプションを備えたボタン
7. SplitButton (SfSplitButton) - 主なアクションとドロップダウンメニューを備えたボタン
8. ProgressButton (SfProgressButton) - 進行状況を組み込みで表示するボタン

フローティングアクション

9. FloatingActionButton (SfFab) - 円形のフローティングアクションボタン
10. SpeedDial (SfSpeedDial) - 展開可能なアクション項目を備えた FAB（直線／放射状）

チップコンポーネント

11. Chip (SfChip) - タグ、フィルター、選択、アクション用のコンパクトな要素

パッケージ: Syncfusion.Blazor.Buttons および Syncfusion.Blazor.SplitButtons

---

共通のセットアップとインストール

すべてのボタンコンポーネントで、同じインストールとセットアップの手順を使用します。

NuGet パッケージ

コンポーネントの種類に応じて、必要なパッケージをインストールします。

# For Button, Chip, FAB, ToggleSwitch
dotnet add package Syncfusion.Blazor.Buttons

# For DropdownMenu, SplitButton, ProgressButton, ButtonGroup, SpeedDial
dotnet add package Syncfusion.Blazor.SplitButtons

# Required theme package
dotnet add package Syncfusion.Blazor.Themes

セットアップ手順（共通）

1. 名前空間を追加（~/_Imports.razor）：

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.SplitButtons

2. サービスを登録（~/Program.cs）：

using Syncfusion.Blazor;
builder.Services.AddSyncfusionBlazor();

3. テーマとスクリプトを追加（~/index.html または ~/App.razor）：

<head>
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js"></script>
</head>

---

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

Button コンポーネント

📄 参照: references/button-features.md

• はじめにとインストール
• 基本的なボタンの実装
• ボタンの種類（フラット、アウトライン、ラウンド、プライマリ、トグル）
• ボタンのスタイル（プライマリ、成功、情報、警告、危険、リンク）
• アイコンとアイコンの配置
• ボタンのサイズ（小、標準）
• リピートボタン
• ツールチップ
• HTML 属性のサポート
• ネイティブイベントの処理

📄 参照: references/button-styling.md

• CSS クラスのカスタマイズ
• 外観のカスタマイズ
• ブロックボタン
• 角丸
• RTL（右から左）サポート
• テーマの統合
• 配色とバリエーション
• レスポンシブデザインのパターン

📄 参照: references/button-advanced-features.md

• アクセシビリティ（WCAG 準拠、キーボードナビゲーション、ARIA 属性）
• スクリーンリーダーのサポート
• 無効状態の処理
• トグルボタンの機能
• サーバーと Web アプリの実装上の違い
• パフォーマンスの最適化
• ベストプラクティスとよくある落とし穴

---

RadioButton コンポーネント

📄 参照: references/radio-button-features.md

• はじめにとインストール
• ラジオボタンの基本的な実装
• Name プロパティによるラジオボタンのグループ化
• ラベルの設定と配置
• 状態と値の管理
• 双方向データバインディング（@bind-Checked）
• 識別用の Value プロパティ
• デフォルト値の事前選択
• フォームとの連携パターン

📄 参照: references/radio-button-styling.md

• カスタムスタイル用の CssClass
• HtmlAttributes ディクショナリの使用方法
• 右から左に記述するレイアウト用の EnableRtl
• 無効状態の設定
• 状態を保存する EnablePersistence
• カスタム CSS クラスのパターン
• テーマのカスタマイズ手法
• レスポンシブデザインのアプローチ

📄 参照: references/radio-button-advanced-features.md

• ValueChange イベントハンドラー
• ChangeArgs イベントデータ構造
• CheckedChanged コールバックの実装
• Created ライフサイクルイベント
• イベント処理のパターン
• アクセシビリティのための ARIA 属性
• キーボードナビゲーションのサポート
• ベストプラクティスと一般的なパターン

---

CheckBox コンポーネント

📄 参照: references/checkbox-features.md

• はじめにとインストール
• チェックボックスの基本的な実装
• チェックボックスの状態（チェック済み、未チェック、無効）
• ラベルの設定
• Change イベントの処理
• 双方向データバインディング（@bind-Checked）
• 複数のチェックボックスとチェックボックスグループ
• 中間（3 状態）状態

📄 参照: references/checkbox-styling.md

• CSS クラスのカスタマイズ
• 外観のカスタマイズ
• テーマとの連携（Bootstrap5、Material、Fabric、Tailwind）
• 色のバリエーション（プライマリ、成功、警告、危険）
• サイズのカスタマイズ
• RTL（右から左）への対応
• 無効状態の外観
• ラベルのスタイルと間隔

📄 参照: references/checkbox-advanced-features.md

• 無効状態の処理と条件付きでの無効化
• アクセシビリティ（WCAG、ARIA 属性、スクリーンリーダー）
• キーボードナビゲーション（Tab、Space）
• フォームとの連携と検証
• 状態管理のパターン
• ベストプラクティスと一般的なパターン

---

Button Group コンポーネント

📄 参照: references/button-group-features.md

• はじめにとインストール
• ボタングループの基本的な実装
• 水平方向と垂直方向の配置
• 選択モード（単一、複数、なし）
• ボタングループの入れ子
• ネイティブイベントの処理
• 項目の設定とデータバインディング

📄 参照: references/button-group-styling.md

• 外観のカスタマイズ
• グループ内のボタンの種類とスタイル
• ボタングループ内のアイコン
• サイズのバリエーション
• カスタム CSS クラス
• テーマとの連携

📄 参照: references/button-group-advanced-features.md

• アクセシビリティ機能
• キーボードナビゲーション
• 選択状態の管理
• イベント処理のパターン
• ボタングループのベストプラクティス

---

Chip コンポーネント

📄 参照: references/chip-features.md

• はじめにとインストール
• Chip の基本的な実装
• Chip の種類（入力、フィルター、選択、アクション）
• アイコンとの連携
• 削除機能
• 選択の処理
• イベント（click、delete、created、beforeItemRender）
• 動的な Chip コレクション
• データソースからのレンダリング

📄 参照: references/chip-styling.md

• 外観のカスタマイズ
• 色のバリエーション
• サイズのオプション
• カスタム CSS クラス
• アイコンとアバターのスタイル設定
• テーマとの連携
• レスポンシブデザイン

📄 参照: references/chip-advanced-features.md

• アクセシビリティのサポート
• キーボードナビゲーション
• カスタムテンプレートのサポート
• 状態管理のパターン
• イベント処理
• ベストプラクティス

ドロップダウンメニューコンポーネント

📄 参照： references/dropdown-menu-features.md

• はじめにとインストール
• 基本的なドロップダウンメニューの実装
• ポップアップ項目の設定（テキスト、ID、アイコン、区切り線）
• メニュー項目のアイコン
• 項目のクリックイベント
• 開閉動作
• 位置のカスタマイズ
• 項目の動的な追加と削除
• ListView と連携するグループ化されたポップアップ
• 項目クリック時のダイアログ表示
• DropdownList と DropdownButton の比較

📄 参照： references/dropdown-menu-styling.md

• 外観のカスタマイズ
• キャレットアイコンのカスタマイズ
• ドロップダウン矢印を非表示にする
• アイコンと幅のカスタマイズ
• ポップアップ幅のカスタマイズ
• 角丸
• RTL サポート
• アニメーション効果
• テンプレートのカスタマイズ
• テーマとの統合

📄 参照： references/dropdown-menu-advanced-features.md

• アクセシビリティ機能
• 無効状態の処理
• ネイティブイベントの処理
• キーボードナビゲーション
• フォーカス管理
• ベストプラクティスとパターン

---

フローティングアクションボタン（FAB）コンポーネント

📄 参照： references/fab-features.md

• はじめにとインストール
• 基本的な FAB の実装
• 位置のオプション（TopLeft、TopCenter、TopRight、MiddleLeft、MiddleCenter、MiddleRight、BottomLeft、BottomCenter、BottomRight）
• アイコンの設定
• コンテンツのカスタマイズ
• 対象要素のバインド
• クリックイベントの処理
• 表示／非表示の動作
• 表示状態の制御

📄 参照： references/fab-styling.md

• 外観スタイル（primary、success、info、warning、danger）
• サイズのバリエーション（small、medium、large）
• アイコンの配置
• 色のカスタマイズ
• CSS クラスのカスタマイズ
• 無効状態の外観
• テーマとの統合

📄 参照： references/fab-advanced-features.md

• アクセシビリティのサポート
• キーボードナビゲーション
• イベント処理のパターン
• 状態管理
• FAB を使用する際のベストプラクティス

---

プログレスボタンコンポーネント

📄 参照： references/progress-button-features.md

• はじめにとインストール
• 基本的なプログレスボタンの実装
• スピナーの種類と位置（左、右、上、下、中央）
• 進行状態（Begin、Progress、End、Fail）
• 期間の設定
• 進行中のコンテンツのカスタマイズ
• イベント（OnBegin、Progress、End、Fail）
• プログラムによる進行の停止
• スピナーの非表示
• 進行状況の追跡

📄 参照： references/progress-button-styling.md

• 外観のカスタマイズ
• ボタンの種類とアイコン
• 進行状態に応じた CSS クラスのカスタマイズ
• 進行状況インジケーターのスタイル設定
• スピナーのカスタマイズ
• 進行中のコンテンツの変更
• テーマとの統合

📄 参照： references/progress-button-advanced-features.md

• アクセシビリティ機能
• デバッグ用トレースイベント
• ネイティブイベントの処理
• 状態管理のパターン
• エラー処理
• プログレスボタンのベストプラクティス

---

スピードダイヤルコンポーネント

📄 参照： references/speeddial-features.md

• はじめにとインストール
• 基本的なスピードダイヤルの実装
• 表示モード（リニア、ラジアル）
• アクション項目の設定
• 位置オプション（9 か所）
• 開閉時の動作
• 項目クリックイベント
• 開くモード（ホバー、クリック）
• 方向オプション（上、下、左、右、自動）
• ラジアル設定（offset、direction、startAngle、endAngle）
• アイコン設定（開くアイコン、閉じるアイコン）

📄 参照： references/speeddial-styling.md

• 外観のカスタマイズ
• アイコン（開くアイコン、閉じるアイコン、項目アイコン）
• 色のバリエーション
• 項目テンプレート
• CSS クラスのカスタマイズ
• アニメーション効果
• テーマとの統合

📄 参照： references/speeddial-advanced-features.md

• アクセシビリティ対応
• キーボードナビゲーション
• イベント処理（すべてのイベント）
• 状態管理のパターン
• モーダルの背景
• ベストプラクティス

---

スプリットボタンコンポーネント

📄 参照： references/split-button-features.md

• はじめにとインストール
• 基本的なスプリットボタンの実装
• ドロップダウンメニュー項目の設定
• プライマリボタンのアクション
• 項目選択イベント
• 項目内のアイコン
• 区切り線のサポート
• 開閉時の動作
• イベント処理

📄 参照： references/split-button-styling.md

• 外観のカスタマイズ
• ボタンのスタイル
• アイコンとアイコンの配置
• サイズのバリエーション
• カスタム CSS クラス
• RTL のサポート
• テーマとの統合

📄 参照： references/split-button-advanced-features.md

• アクセシビリティ機能
• 無効状態の処理
• キーボードナビゲーション
• ネイティブイベントの処理
• ベストプラクティス

---

トグルスイッチコンポーネント

📄 参照： references/toggle-switch-features.md

• はじめにとインストール
• 基本的なトグルスイッチの実装
• チェック状態と未チェック状態
• 双方向データバインディング（@bind-Checked）
• オン／オフラベルの設定
• 変更イベント
• 値のバインディング
• フォームの Name 属性
• デフォルト状態の設定

📄 参照： references/toggle-switch-styling.md

• 外観のカスタマイズ
• サイズのバリエーション
• ラベルのカスタマイズ（OnLabel、OffLabel）
• カラースキーム
• カスタム CSS クラス
• RTL のサポート
• Material テーマに関する考慮事項（テキスト非対応）
• テーマとの統合

📄 参照： references/toggle-switch-advanced-features.md

• アクセシビリティ対応
• キーボードナビゲーション
• 無効状態の処理
• フォームとの統合
• 状態管理のパターン
• ベストプラクティス

---

コンポーネント共通のパターン

イベント処理のパターン

すべてのボタンコンポーネントは、標準的な Blazor のイベント処理に対応しています。

<SfButton OnClick="HandleClick">Click Me</SfButton>

@code {
    private void HandleClick()
    {
        // Handle button click
    }
}

スタイリングのパターン

すべてのコンポーネントで CSS クラスをカスタマイズできます。

<SfButton CssClass="e-primary custom-button">Styled Button</SfButton>

アイコン統合のパターン

ほとんどのコンポーネントは、アイコン用の CSS クラスに対応しています。

<SfButton IconCss="e-icons e-plus-icon">Add Item</SfButton>

無効状態のパターン

すべてのインタラクティブなコンポーネントは、無効状態に対応しています。

<SfButton Disabled="@isDisabled">Button</SfButton>

RTL サポートのパターン

すべてのコンポーネントは、右から左への描画に対応しています。

<SfButton EnableRtl="true">RTL Button</SfButton>

---

共通設定

テーマオプション

すべてのボタンコンポーネントは Syncfusion のテーマに対応しています。

• Bootstrap5（デフォルト）：bootstrap5.css
• Material：material.css
• Fabric：fabric.css
• Tailwind：tailwind.css
• Fluent：fluent.css

共通 CSS クラス

標準的な CSS ユーティリティクラスは、すべてのコンポーネントで使用できます。

• e-primary：プライマリアクションのスタイル
• e-success：成功／肯定アクション
• e-info：情報アクション
• e-warning：警告／注意アクション
• e-danger：危険／否定アクション
• e-link：ハイパーリンクのスタイル
• e-small：小さいサイズのバリエーション
• e-flat：フラットスタイル（背景なし）
• e-outline：アウトラインスタイル（枠線のみ）
• e-round：円形／角丸スタイル

アクセシビリティ機能

すべてのコンポーネントには、次の機能が含まれています。

• ARIA 属性
• キーボードナビゲーションのサポート
• スクリーンリーダーとの互換性
• フォーカスインジケーター
• WCAG 2.1 への準拠

---

一般的なユースケース

標準的なアクション

フォーム、ダイアログ、ページでの主要、二次、三次アクションには、Button を使用します。

複数選択

複数の独立した選択肢、リスト項目、設定には、CheckBox を使用します。

排他的な選択

複数の選択肢、設定、環境設定、アンケートの質問から 1 つを選択するには、RadioButton を使用します。

グループ化されたアクション

テキストの配置、表示モード、フィルターオプションなど、関連するアクションには、ButtonGroup を使用します。

タグとフィルター

タグ、連絡先リスト、フィルターの選択、削除可能な項目には、Chip を使用します。

メニューアクション

複数のオプションを含むコンテキストメニューには、DropdownMenu を使用します。

2 つのアクション

追加オプションを備えた主要アクションが必要な場合は、SplitButton を使用します。

時間のかかる操作

時間がかかる操作（ファイルのアップロード、フォームの送信、API 呼び出し）には、ProgressButton を使用します。

ページの主要アクション

モバイルページやダッシュボードページの主要アクションには、FloatingActionButton を使用します。

複数のクイックアクション

1 つの FAB からアクセスできる複数の関連アクションが必要な場合は、SpeedDial を使用します。

オン／オフ状態

二択の設定、機能の切り替え、環境設定には、ToggleSwitch を使用します。

---

クイックスタートの例

基本的なボタン

<SfButton CssClass="e-primary">Primary Action</SfButton>

基本的な CheckBox

<SfCheckBox TChecked="bool" Label="Accept Terms"></SfCheckBox>

双方向バインディングを使用した CheckBox

<SfCheckBox @bind-Checked="isEnabled" Label="Enable Feature"></SfCheckBox>

@code {
    private bool isEnabled = false;
}

複数の CheckBox

<SfCheckBox TChecked="bool"  Label="Option 1"></SfCheckBox>
<SfCheckBox TChecked="bool" Label="Option 2"></SfCheckBox>
<SfCheckBox TChecked="bool" Label="Option 3"></SfCheckBox>

3 状態の CheckBox

<SfCheckBox EnableTriState="true" Checked="null" Label="Select All" TChecked="bool?"></SfCheckBox>

基本的な RadioButton

<SfRadioButton Label="Option 1" Name="group" Value="option1" @bind-Checked="@selected"></SfRadioButton>
<SfRadioButton Label="Option 2" Name="group" Value="option2" @bind-Checked="@selected"></SfRadioButton>
<SfRadioButton Label="Option 3" Name="group" Value="option3" @bind-Checked="@selected"></SfRadioButton>

@code {
    private string selected = "option1";
}

RadioButton グループ

<h4>Choose Your Plan</h4>
<SfRadioButton Label="Free" Name="plan" Value="free" @bind-Checked="@plan"></SfRadioButton>
<SfRadioButton Label="Pro" Name="plan" Value="pro" @bind-Checked="@plan"></SfRadioButton>
<SfRadioButton Label="Enterprise" Name="plan" Value="enterprise" @bind-Checked="@plan"></SfRadioButton>

@code {
    private string plan = "free";
}

アイコン付きボタン

<SfButton IconCss="e-icons e-plus-icon" CssClass="e-primary">
    Add New
</SfButton>

トグルスイッチ

<SfSwitch @bind-Checked="isEnabled" OnLabel="On" OffLabel="Off"></SfSwitch>

@code {
    private bool isEnabled = true;
}

ドロップダウンメニュー

<SfDropDownButton Content="Actions">
    <DropDownMenuItems>
        <DropDownMenuItem Text="Edit"></DropDownMenuItem>
        <DropDownMenuItem Text="Delete"></DropDownMenuItem>
    </DropDownMenuItems>
</SfDropDownButton>

フローティングアクションボタン

<div id="target" style="min-height:200px; position:relative;">
    <SfFab Target="#target" IconCss="e-icons e-plus" Content="Add"></SfFab>
</div>

チップのコレクション

<SfChip EnableDelete="true">
    <ChipItems>
        <ChipItem Text="Tag 1"></ChipItem>
        <ChipItem Text="Tag 2"></ChipItem>
        <ChipItem Text="Tag 3"></ChipItem>
    </ChipItems>
</SfChip>

---

ナビゲーションのヒント

• インストールと基本設定については、各コンポーネントの機能ファイルを参照してください
• スタイルと外観については、各コンポーネントのスタイルファイルを参照してください
• アクセシビリティと高度な機能については、高度な機能のファイルを参照してください
• 特定のコンポーネントの機能については、上記の該当するコンポーネントのドキュメントセクションに移動してください

---

サポートとリソース

• 公式デモ： https://blazor.syncfusion.com/demos/buttons/
• API ドキュメント： https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.html
• GitHub のサンプル： https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/
• システム要件： https://blazor.syncfusion.com/documentation/system-requirements
• ライセンス： 本番環境での使用には商用ライセンスが必要です

---

ご注意： 実装方法を確認するには、まず該当するコンポーネントの機能ファイルを参照し、その後、必要に応じてスタイルや高度な機能を確認してください。