syncfusion-aspnetcore-buttons について
syncfusion-aspnetcore-buttonsは、Syncfusion EJ2のボタン系コンポーネントを実装するASP.NET Core開発者向けのリファレンススキルです。ボタン、ボタングループ、チェックボックス、ラジオボタン、ドロップダウンボタンを扱い、導入、設定、API、アクセシビリティ別に説明します。
主な機能
- 01ボタンとフォーム部品を幅広く掲載
- 02インストールと導入手順
- 03スタイル、状態、イベントの説明
- 04APIとTag Helperのリファレンス
- 05キーボードとスクリーンリーダー対応
活用シーン
- 01ASP.NET Coreページに操作ボタンを追加
- 02フォームのチェック項目や選択肢を設定
- 03ツールバーやセグメントボタンを作成
- 04イベントやアクセシビリティの実装方法を確認
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ syncfusion/ aspnetcore-ui-components-skills --skill syncfusion-aspnetcore-buttonsインストール後、Claude Code で/syncfusion-aspnetcore-buttonsを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/button-accessibility.mdbutton-api.mdbutton-getting-started.mdbutton-how-to.mdbutton-types-and-styles.mdbuttongroup-accessibility.mdbuttongroup-getting-started.mdbuttongroup-how-to.mdbuttongroup-selection-and-nesting.mdbuttongroup-style-and-appearance.mdcheckbox-accessibility.mdcheckbox-api.mdcheckbox-customization.mdcheckbox-features-and-state.mdcheckbox-getting-started.mdcheckbox-label-and-size.mdchips-accessibility.mdchips-api.mdchips-customization.mdchips-drag-and-drop.mdchips-getting-started.mdchips-style.mdchips-types-and-selection.mddropdownbutton-accessibility.mddropdownbutton-api.mddropdownbutton-events-and-interactivity.mddropdownbutton-getting-started.mddropdownbutton-popup-items.mdfloating-action-button-accessibility.mdfloating-action-button-api.md詳細
Syncfusion ASP.NET Core Buttons の実装
Button
Button コンポーネントは、クリックすると応答を実行する基本的なアクションコントロールです。カラーのバリエーション(primary、success、danger、warning、info、link)、フラット/アウトライン/ラウンドスタイル、アイコンのサポート、サイズ、トグル動作、リップル効果、フォームとの完全な連携に対応しています。
ナビゲーションガイド
はじめに
📄 参照: references/button-getting-started.md
- 前提条件と NuGet パッケージのインストール
_ViewImports.cshtmlでのタグヘルパーの登録_Layout.cshtmlでのスタイルシートとスクリプトの CDN 設定<ejs-scripts>によるスクリプトマネージャーの登録<ejs-button>による基本的なボタンの表示- リップル効果の有効化
onclick属性によるクリックイベントの処理- フォームでのボタンの使用(
type="submit"/type="reset")
種類とスタイル
📄 参照: references/button-types-and-styles.md
- カラーのバリエーション(
e-primary、e-success、e-danger、e-warning、e-info、e-link) - フラット、アウトライン、ラウンドのボタンタイプ
- アイコンボタンとアイコンの配置(
iconPosition:Left / Top / Right / Bottom) isToggleとtoggled状態によるトグルボタン- ボタンのサイズ(
e-small、e-bigger)
使用方法
📄 参照: references/button-how-to.md
- ブロックボタン(全幅)の作成
- 角丸ボタン
- ボタンとしてスタイル設定したナビゲーションリンク
- CSS による外観のカスタマイズ
- 無効状態
enableRtlによる RTL サポート- ボタンのツールチップ
- フォーム送信のパターン
API リファレンス
📄 参照: references/button-api.md
- 型と既定値を含むプロパティの完全なリファレンス
- メソッド(
click、focusIn、destroy) - イベントシグネチャ
- CSS クラスのリファレンステーブル
- タグヘルパー属性の構文
アクセシビリティ
📄 参照: references/button-accessibility.md
- WCAG 2.2 AA への準拠
- セマンティック HTML と WAI-ARIA 属性
- キーボードナビゲーション(Tab、Enter、Space)
- フォーカス管理と視認可能なフォーカスインジケーター
- アイコンのみのボタンのアクセシビリティ(
aria-label)
クイックスタート
1. NuGet パッケージをインストール:
Install-Package Syncfusion.EJ2.AspNet.Core
2. ~/Pages/_ViewImports.cshtml でタグヘルパーを登録:
@addTagHelper *, Syncfusion.EJ2
3. ~/Pages/Shared/_Layout.cshtml に CSS とスクリプトを追加:
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
4. <body> の末尾にスクリプトマネージャーを追加:
<ejs-scripts></ejs-scripts>
5. ボタンを表示:
<ejs-button id="btn" cssClass="e-primary" content="Click Me"></ejs-button>
よく使われるパターン
プライマリアクションボタン
<ejs-button id="submit" cssClass="e-primary" type="submit" content="Save Changes"></ejs-button>
危険な操作のアクションボタン
<ejs-button id="delete" cssClass="e-danger" onclick="confirmDelete()" content="Delete"></ejs-button>
アイコンボタン
<ejs-button id="edit" cssClass="e-small" iconCss="e-icons e-edit-icon"></ejs-button>
無効なボタン
<ejs-button id="btn" disabled="true" content="Cannot Click"></ejs-button>
フォーム送信
<form>
<ejs-switch id="switch1" name="wifi" value="on" checked="true"></ejs-switch>
<ejs-button id="submit" content="Submit"></ejs-button>
</form>
ButtonGroup
ButtonGroup コンポーネントは、関連するボタンを視覚的にグループ化し、単一のコントロールとして表示します。セグメントコントロール、ツールバー、関連するアクションのまとまりを作成する際に使用します。これは純粋な CSS によるグループ化(タグヘルパーは不要)です。複数のボタンを e-btn-group クラスを持つ要素の内側に配置するだけです。
ナビゲーションガイド
はじめに
📄 参照: references/buttongroup-getting-started.md
- 純粋な CSS コンポーネントのセットアップ
e-btn-groupラッパーによる基本的なボタンのグループ化- 関連するボタンの視覚的な整理
選択とネスト
📄 参照: references/buttongroup-selection-and-nesting.md
- ラジオボタングループの動作(相互排他的な選択)
- チェックボックスグループの動作(複数選択)
- DropDownButton および SplitButton とのネスト
- グループ選択のサーバー側状態管理
使用方法
📄 参照: references/buttongroup-how-to.md
- セグメントコントロールの作成
- 複数のグループを含むツールバーの構築
- 縦方向のボタングループ
- ボタン間のセパレーター
- グループの有効化/無効化のロジック
スタイルと外観
📄 参照: references/buttongroup-style-and-appearance.md
- グループのカスタムスタイル
- CSS クラスのリファレンス
- グループ内のカラーバリエーション
- 縦方向のレイアウト
アクセシビリティ
📄 参照: references/buttongroup-accessibility.md
- セマンティックな HTML 構造
- ARIA 属性(
role="group"、aria-label) - キーボード操作
- フォーカスインジケーター
クイックスタート
1. NuGet パッケージをインストールします:
Install-Package Syncfusion.EJ2.AspNet.Core
2. Tag Helper を登録します:~/Pages/_ViewImports.cshtml:
@addTagHelper *, Syncfusion.EJ2
3. CSS とスクリプトを追加します:~/Pages/Shared/_Layout.cshtml:
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
4. <body> の末尾に Script Manager を追加します:
<ejs-scripts></ejs-scripts>
5. ButtonGroup をレンダリングします:
<div class="e-btn-group">
<ejs-button id="btn1" content="HTML"></ejs-button>
<ejs-button id="btn2" content="CSS"></ejs-button>
<ejs-button id="btn3" content="JavaScript"></ejs-button>
</div>
一般的なパターン
縦方向の ButtonGroup
<div class="e-btn-group e-vertical">
<ejs-button id="btn1" content="Top"></ejs-button>
<ejs-button id="btn2" content="Middle"></ejs-button>
<ejs-button id="btn3" content="Bottom"></ejs-button>
</div>
セグメントコントロール
<div class="e-btn-group">
<ejs-button id="left" cssClass="e-outline" content="Left"></ejs-button>
<ejs-button id="center" cssClass="e-outline" content="Center"></ejs-button>
<ejs-button id="right" cssClass="e-outline" content="Right"></ejs-button>
</div>
複数のグループを含むツールバー
<div class="e-toolbar">
<div class="e-btn-group">
<ejs-button id="bold" iconCss="e-icons e-bold-icon"></ejs-button>
<ejs-button id="italic" iconCss="e-icons e-italic-icon"></ejs-button>
<ejs-button id="underline" iconCss="e-icons e-underline-icon"></ejs-button>
</div>
<div class="e-btn-group">
<ejs-button id="left" iconCss="e-icons e-align-left-icon"></ejs-button>
<ejs-button id="center" iconCss="e-icons e-align-center-icon"></ejs-button>
</div>
</div>
チェックボックス
Checkbox コンポーネントは、フォームで選択するためのブール値入力コントロールです。チェック済み、未チェック、未確定(親チェックボックス用)の状態、ラベルの位置、サイズのバリエーション、カスタムカラー、および完全なアクセシビリティに対応しています。
ナビゲーションガイド
はじめに
📄 参照: references/checkbox-getting-started.md
- 前提条件と NuGet パッケージのインストール
_ViewImports.cshtmlでの Tag Helper の登録_Layout.cshtmlでのスタイルシートとスクリプトの CDN 設定- Script Manager の登録
<ejs-checkbox>による基本的なチェックボックスのレンダリング- ラベル付きチェックボックス
- リップル効果の有効化
機能と状態
📄 参照: references/checkbox-features-and-state.md
- チェック済みと未チェックの状態
- 親チェックボックス用の未確定状態
- 無効状態
name属性とvalue属性を使用したフォーム連携change属性による変更イベントの処理- 状態の概要表
ラベルとサイズ
📄 参照: references/checkbox-label-and-size.md
- ラベルの設定
- ラベル位置の制御(
Before/After) - サイズのバリエーション(
e-small) - ラベルとサイズを組み合わせた例
カスタマイズ
📄 参照: references/checkbox-customization.md
- CSS クラスのオーバーライド(
e-frame、e-label) - カラーバリエーション(primary、success、warning、danger、info)
- フレーム形状のカスタマイズ(円形チェックボックス)
enableRtlによる RTL サポート
API リファレンス
📄 参照: references/checkbox-api.md
- プロパティのリファレンス表(
id、label、checked、disabled、indeterminate、name、value、cssClass、labelPosition、enableRtl、enableHtmlSanitizer、enablePersistence、htmlAttributes) - メソッド(
click、focusIn、destroy) - イベントシグネチャ(
created、beforeChange、change) - Tag Helper 属性の構文
- エンドツーエンドのフォーム例
アクセシビリティ
📄 参照: references/checkbox-accessibility.md
- WCAG 2.2 AA 準拠
- セマンティックな HTML と WAI-ARIA 属性
- キーボード操作(Tab / Space)
- Fieldset/Legend のパターン
- スクリーンリーダーのサポート
クイックスタート
1. NuGet パッケージをインストールします:
Install-Package Syncfusion.EJ2.AspNet.Core
2. Tag Helper を登録します:~/Pages/_ViewImports.cshtml:
@addTagHelper *, Syncfusion.EJ2
3. CSS とスクリプトを追加します:~/Pages/Shared/_Layout.cshtml:
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
4. <body> の末尾に Script Manager を追加します:
<ejs-scripts></ejs-scripts>
5. Checkbox をレンダリングします:
<ejs-checkbox id="chk1" label="I agree to the terms"></ejs-checkbox>
一般的なパターン
フォーム送信に使用するチェックボックス
<form method="post">
<ejs-checkbox id="terms" name="agreeTerms" value="agreed" label="I agree to terms"></ejs-checkbox>
<ejs-button id="submit" type="submit" cssClass="e-primary" content="Submit"></ejs-button>
</form>
public async Task<IActionResult> OnPostAsync()
{
bool agreeTerms = Request.Form["agreeTerms"] == "agreed";
// Process the form data
return Page();
}
未確定状態のチェックボックス(親)
<ejs-checkbox id="selectAll" label="Select All" indeterminate="true" change="onSelectAllChange"></ejs-checkbox>
<ejs-checkbox id="opt1" name="options" value="1" label="Option 1"></ejs-checkbox>
<ejs-checkbox id="opt2" name="options" value="2" label="Option 2"></ejs-checkbox>
小さいサイズのチェックボックス
<ejs-checkbox id="compact" label="Compact option" cssClass="e-small"></ejs-checkbox>
RadioButton
RadioButton コンポーネントは、相互に排他的なオプションの選択機能を提供します。単一選択のフォームフィールドに使用します。name 属性でラジオボタンをグループ化すると、一度に選択できる項目を 1 つにできます。ラベル、サイズ、フォーム連携、アクセシビリティに対応しています。
ナビゲーションガイド
はじめに
📄 参照: references/radiobutton-getting-started.md
- 前提条件と NuGet パッケージのインストール
_ViewImports.cshtmlでのタグヘルパーの登録_Layout.cshtmlでのスタイルシートとスクリプトの CDN 設定- スクリプトマネージャーの登録
<ejs-radiobutton>による基本的なラジオボタンのレンダリング- 相互排他にするための
nameを使ったラジオボタンのグループ化
機能と状態
📄 参照: references/radiobutton-features-and-state.md
- 無効状態
name属性とvalue属性によるフォーム連携Request.Form["name"]から選択値を取得- 変更イベントの処理
ラベルとサイズ
📄 参照: references/radiobutton-label-and-size.md
- ラベルの配置(
Before/After) - サイズのバリエーション(
e-small) - 組み合わせた例
API リファレンス
📄 参照: references/radiobutton-api.md
- プロパティのリファレンス表
- メソッド(
click、focusIn、destroy) - イベントシグネチャ
- タグヘルパー属性の構文
アクセシビリティ
📄 参照: references/radiobutton-accessibility.md
- WCAG 2.2 AA 準拠
fieldset/legendによるセマンティック HTML- WAI-ARIA 属性
- キーボード操作(グループ内の移動には矢印キーを使用)
- スクリーンリーダーのサポート
クイックスタート
1. NuGet パッケージをインストール:
Install-Package Syncfusion.EJ2.AspNet.Core
2. ~/Pages/_ViewImports.cshtml でタグヘルパーを登録:
@addTagHelper *, Syncfusion.EJ2
3. ~/Pages/Shared/_Layout.cshtml で CSS とスクリプトを追加:
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
4. <body> の末尾にスクリプトマネージャーを追加:
<ejs-scripts></ejs-scripts>
5. RadioButton をレンダリング:
<ul>
<li><ejs-radiobutton id="r1" name="group1" label="Option 1"></ejs-radiobutton></li>
<li><ejs-radiobutton id="r2" name="group1" label="Option 2"></ejs-radiobutton></li>
</ul>
よく使われるパターン
フォーム送信用の RadioButton グループ
<form method="post">
<ejs-radiobutton id="r1" name="choice" value="a" label="Option A"></ejs-radiobutton>
<ejs-radiobutton id="r2" name="choice" value="b" label="Option B" checked="true"></ejs-radiobutton>
<ejs-radiobutton id="r3" name="choice" value="c" label="Option C"></ejs-radiobutton>
<ejs-button id="submit" type="submit" cssClass="e-primary" content="Submit"></ejs-button>
</form>
public async Task<IActionResult> OnPostAsync()
{
string choice = Request.Form["choice"];
// Process the selected value
return Page();
}
無効化された RadioButton
<ejs-radiobutton id="r1" name="group2" label="Disabled" disabled="true" checked="true"></ejs-radiobutton>
DropDownButton
DropDownButton コンポーネントは、クリックするとポップアップメニューを開くボタンです。アイコン付きの項目、区切り線、無効化された項目、ナビゲーション URL に対応し、項目選択時のイベントを処理できます。
ナビゲーションガイド
はじめに
📄 参照: references/dropdownbutton-getting-started.md
- 前提条件と NuGet パッケージのインストール
_ViewImports.cshtmlでのタグヘルパーの登録_Layout.cshtmlでのスタイルシートとスクリプトの CDN 設定- スクリプトマネージャーの登録
<ejs-dropdownbutton>による基本的なドロップダウンボタンのレンダリングList<object>を使ったコントローラーからの項目のバインド
ポップアップ項目
📄 参照: references/dropdownbutton-popup-items.md
- アイコン付き項目(
iconCss) - 区切り項目(
separator: true) - 無効化された項目(
disabled: true) - ナビゲーション URL(
urlプロパティ) - 項目構造のリファレンス
イベントとインタラクション
📄 参照: references/dropdownbutton-events-and-interactivity.md
- メインボタンのクリックイベント
- ポップアップのライフサイクルにおける開閉イベント
selectイベントによる項目選択の処理beforeOpen/beforeCloseイベント
API リファレンス
📄 参照: references/dropdownbutton-api.md
- プロパティのリファレンス表
- イベントシグネチャ
- タグヘルパー属性の構文
アクセシビリティ
📄 参照: references/dropdownbutton-accessibility.md
- WCAG 2.2 AA 準拠
- WAI-ARIA 属性(
aria-haspopup、aria-expanded) - キーボード操作
- スクリーンリーダーのサポート
クイックスタート
コントローラー(HomeController.cs):
public ActionResult Index()
{
List<object> items = new List<object>();
items.Add(new { text = "Cut" });
items.Add(new { text = "Copy" });
items.Add(new { text = "Paste" });
ViewBag.items = items;
return View();
}
ビュー(Index.cshtml):
<ejs-dropdownbutton id="ddb" content="Edit" items="ViewBag.items"></ejs-dropdownbutton>
よく使われるパターン
アイコン付き DropDownButton
@{
List<object> items = new List<object>();
items.Add(new { text = "Cut", iconCss = "e-icons e-cut-icon" });
items.Add(new { text = "Copy", iconCss = "e-icons e-copy-icon" });
items.Add(new { text = "Paste", iconCss = "e-icons e-paste-icon" });
}
<ejs-dropdownbutton id="ddb" content="Edit" items="items"></ejs-dropdownbutton>
項目選択の処理
<ejs-dropdownbutton id="ddb" content="Actions" items="ViewBag.items"
select="onItemSelect"></ejs-dropdownbutton>
<script>
function onItemSelect(args) {
console.log('Selected:', args.item.text);
}
</script>
フローティングアクションボタン(FAB)
フローティングアクションボタン(FAB) コンポーネントは、UI 上に浮かぶ円形のボタンです。通常、画面上の主要な操作や最も一般的な操作に使用されます。アイコンのみ、またはテキストとアイコンのコンテンツに対応し、対象コンテナーに対する9種類の位置と、色のバリエーションを指定できます。
ナビゲーションガイド
はじめに
📄 参照: references/floating-action-button-getting-started.md
- 前提条件と NuGet パッケージのインストール
_ViewImports.cshtmlでのタグヘルパーの登録_Layout.cshtmlでのスタイルシートとスクリプトの CDN 設定- スクリプトマネージャーの登録
<ejs-fab>を使った基本的な FAB のレンダリング- アイコン付き FAB(
iconCss) targetを使ったコンテナーへの配置
位置
📄 参照: references/floating-action-button-positions.md
- 9種類の位置(
TopLeft、TopCenter、TopRight、MiddleLeft、Center、MiddleRight、BottomLeft、BottomCenter、BottomRight) - 位置の例と使用例
アイコン
📄 参照: references/floating-action-button-icons.md
- アイコンのみの FAB
- 一般的なアイコン(
e-plus-icon、e-edit-icon、e-delete-icon、e-search-icon、e-call-icon、e-chat-icon、e-email-icon) - アイコンの配置
スタイル
📄 参照: references/floating-action-button-styles.md
- 組み込みの色のバリエーション(
e-primary、e-success、e-danger) - CSS によるカスタムスタイル
API リファレンス
📄 参照: references/floating-action-button-api.md
- プロパティのリファレンス表
- タグヘルパー属性の構文
アクセシビリティ
📄 参照: references/floating-action-button-accessibility.md
- WCAG 2.2 AA 準拠
- アイコンのみのボタンに対する
aria-label - キーボードナビゲーション
- スクリーンリーダーのサポート
クイックスタート
1. NuGet パッケージをインストールします:
Install-Package Syncfusion.EJ2.AspNet.Core
2. ~/Pages/_ViewImports.cshtml でタグヘルパーを登録します:
@addTagHelper *, Syncfusion.EJ2
3. ~/Pages/Shared/_Layout.cshtml に CSS とスクリプトを追加します:
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
4. <body> の末尾にスクリプトマネージャーを追加します:
<ejs-scripts></ejs-scripts>
5. FAB をレンダリングします:
<ejs-fab id="fab" content="Add" cssClass="e-primary"></ejs-fab>
一般的なパターン
アイコン付き FAB
<ejs-fab id="fab" iconCss="e-icons e-plus-icon" cssClass="e-primary"></ejs-fab>
配置した FAB
<div id="container" style="position: relative; height: 400px;">
<ejs-fab id="fab" content="Add" position="BottomRight" target="#container"></ejs-fab>
</div>
FAB のクリックハンドラー
<ejs-fab id="fab" iconCss="e-icons e-plus-icon" cssClass="e-primary" onclick="onFabClick"></ejs-fab>
<script>
function onFabClick() {
console.log('FAB clicked');
}
</script>
ProgressButton
ProgressButton コンポーネントは、非同期処理中に進行状況インジケーターを表示するボタンです。長時間実行されるタスクの進行中に、スピナーアニメーション、プログレスバー(0~100%)、完了時の進行状況フィードバックを表示できます。
ナビゲーションガイド
はじめに
📄 参照: references/progressbutton-getting-started.md
- 前提条件と NuGet パッケージのインストール
_ViewImports.cshtmlでのタグヘルパーの登録_Layout.cshtmlでのスタイルシートとスクリプトの CDN 設定- スクリプトマネージャーの登録
<ejs-progressbutton>を使った基本的な ProgressButton のレンダリングsetIntervalによる進行状況アニメーション
スピナーと進行状況
📄 参照: references/progressbutton-spinner-and-progress.md
- 進行状況の表示(0~100)
enableProgress="true"プロパティ- スピナーの設定
- スピナーを非表示にする方法
progressプロパティによるリアルタイムの進行状況更新
スタイルと外観
📄 参照: references/progressbutton-style-and-appearance.md
- 色のバリエーション(
e-primary、e-success、e-danger) - カスタムスタイル
- サイズのバリエーション(
e-small)
API リファレンス
📄 参照: references/progressbutton-api.md
- プロパティのリファレンス表
- タグヘルパー属性の構文
アクセシビリティ
📄 参照: references/progressbutton-accessibility.md
- WCAG 2.2 AA 準拠
aria-busyおよびaria-valuenow属性- キーボード操作
- スクリーンリーダーのサポート
クイックスタート
1. NuGet パッケージをインストールします:
Install-Package Syncfusion.EJ2.AspNet.Core
2. ~/Pages/_ViewImports.cshtml でタグヘルパーを登録します:
@addTagHelper *, Syncfusion.EJ2
3. ~/Pages/Shared/_Layout.cshtml で CSS とスクリプトを追加します:
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
4. <body> の末尾にスクリプトマネージャーを追加します:
<ejs-scripts></ejs-scripts>
5. ProgressButton をレンダリングします:
<ejs-progressbutton id="progress" content="Submit" enableProgress="true"></ejs-progressbutton>
よく使われるパターン
クリックハンドラー付き ProgressButton
<ejs-progressbutton id="upload" content="Upload" cssClass="e-primary"
enableProgress="true" begin="onBegin" progress="onProgress" end="onEnd"></ejs-progressbutton>
<script>
function onBegin(args) {
// Start the operation
}
function onProgress(args) {
// args.percent contains the progress (0-100)
console.log('Progress:', args.percent + '%');
}
function onEnd(args) {
// Operation complete
}
</script>
スピナー付き ProgressButton
<ejs-progressbutton id="spin" content="Loading" cssClass="e-primary" spinSettings="ViewBag.spin"></ejs-progressbutton>
Speed Dial
Speed Dial コンポーネントは、クリックすると関連するアクション項目のメニューに展開するフローティングアクションボタンです。リニアおよびラジアルの表示モード、9 種類の位置指定、アイコンやタイトルを含む項目の詳細な設定に対応しています。
ナビゲーションガイド
はじめに
📄 参照: references/speeddial-getting-started.md
- 前提条件と NuGet パッケージのインストール
_ViewImports.cshtmlでのタグヘルパーの登録_Layout.cshtmlでのスタイルシートとスクリプトの CDN 設定- スクリプトマネージャーの登録
- position-relative コンテナーの要件
<ejs-speeddial>を使った基本的な SpeedDial のレンダリング- 項目を指定した SpeedDial
項目
📄 参照: references/speeddial-items.md
- 項目の構造(
text、iconCss、titleプロパティ) - アイコンとタイトル
- 項目の設定
表示モード
📄 参照: references/speeddial-display-modes.md
- リニアモード(
Linear) - ラジアルモード(
Radial) - 方向のオプション(
Up、Down、Left、Right)
位置
📄 参照: references/speeddial-positions.md
- 9 種類の位置指定(
TopLeftからBottomRightまで) - 位置の例
API リファレンス
📄 参照: references/speeddial-api.md
- プロパティのリファレンステーブル
- イベントシグネチャ
- タグヘルパー属性の構文
アクセシビリティ
📄 参照: references/speeddial-accessibility.md
- WCAG 2.2 AA 準拠
aria-haspopupおよびaria-expanded属性- キーボード操作
- メニューの操作パターン
クイックスタート
コントローラー(HomeController.cs):
public ActionResult Index()
{
List<SpeedDialItem> items = new List<SpeedDialItem>();
items.Add(new SpeedDialItem
{
Text = "Cut"
});
items.Add(new SpeedDialItem
{
Text = "Copy"
});
items.Add(new SpeedDialItem
{
Text = "Paste"
});
return View();
}
ビュー(Index.cshtml):
<div id="container" style="position: relative; height: 400px;">
<ejs-speeddial id="sd" content="Action" items="ViewBag.items" target="#container"></ejs-speeddial>
</div>
よく使われるパターン
ラジアルモード
<ejs-speeddial id="sd" content="Edit" items="ViewBag.items"
mode="Syncfusion.EJ2.Buttons.SpeedDialMode.Radial"
direction="Syncfusion.EJ2.Buttons.SpeedDialDirection.Up">
</ejs-speeddial>
方向を指定したリニアモード
<ejs-speeddial id="sd" content="More" items="ViewBag.items"
mode="Syncfusion.EJ2.Buttons.SpeedDialMode.Linear"
direction="Syncfusion.EJ2.Buttons.SpeedDialDirection.Left">
</ejs-speeddial>
SplitButton
SplitButton コンポーネントは、メインのアクションボタンと、クリックすると副次的なアクション項目のポップアップリストを表示するドロップダウン矢印を組み合わせたものです。メインボタンをクリックするとデフォルトのアクションが実行され、ドロップダウン矢印をクリックするとポップアップが開きます。
ナビゲーションガイド
はじめに
📄 参照: references/split-button-getting-started.md
- NuGet パッケージのインストールとタグヘルパーの登録
- スタイルシートとスクリプトの CDN 設定
- ポップアップ項目(
content、items)を含む基本的な SplitButton - 初回のアプリケーション実行
ViewBag.itemsにデータを設定するコントローラーのアクション
アイコンと外観
📄 参照: references/split-button-icons-and-appearance.md
iconCssプロパティを使ったアイコンの追加- アイコンの位置の変更(
iconPosition:Left / Top) cssClass="e-vertical"を使った縦型のボタンレイアウト- ポップアップのアクション項目に表示するアイコン
- ポップアップ項目間の区切り線(
separator: true) - スタイルと外観の CSS クラスリファレンス(
.e-dropdown-btn、.e-split-btnなど) - Theme Studio によるカスタマイズ
ポップアップ項目とテンプレート
📄 参照: references/split-button-popup-items.md
text、iconCss、separator、id、url、disabledを使用したポップアップ項目の定義beforeItemRenderイベントを使用した項目のテンプレート化targetプロパティを使用したポップアップのテンプレート化- ListView を
targetとして使用した項目のグループ化
操作手順
📄 参照: references/split-button-how-to.md
disabledプロパティを使用した無効状態の設定enableRtlによる右から左へのレイアウトの有効化selectイベントを使用したポップアップ項目のクリック時の Dialog の表示beforeItemRenderを使用した項目テキスト内の文字への下線の追加- ListView を使用したポップアップ項目のグループ化
イベントとインタラクティブ機能
📄 参照: references/split-button-events.md
click— メインボタンのクリックselect— ポップアップのアクション項目の選択beforeOpen/open/close/beforeClose— ポップアップのライフサイクルbeforeItemRender— レンダリング時の各ポップアップ項目のカスタマイズcreated— コンポーネントの初期化完了- 実用的なイベントハンドラーの例
アクセシビリティ
📄 参照: references/split-button-accessibility.md
- WCAG 2.2 AA 準拠
- WAI-ARIA 属性(
role、aria-haspopup、aria-expanded、aria-owns、aria-disabled) - キーボード操作のショートカット
- スクリーンリーダーのサポート
- アクセシビリティチェッカーによる検証
API リファレンス
📄 参照: references/split-button-api.md
- 型とデフォルト値を含むプロパティの一覧
- イベントシグネチャ
- メソッドリファレンス(
toggle、destroy) - EJ1 から EJ2 への移行マッピング
クイックスタート
コントローラー(HomeController.cs):
public ActionResult Index()
{
List<object> items = new List<object>();
items.Add(new { text = "Cut" });
items.Add(new { text = "Copy" });
items.Add(new { text = "Paste" });
ViewBag.items = items;
return View();
}
ビュー(Index.cshtml):
<ejs-splitbutton id="element" content="Paste" items="ViewBag.items"></ejs-splitbutton>
一般的なパターン
アイコン付き SplitButton
<ejs-splitbutton id="element" content="Paste" items="ViewBag.items"
iconCss="e-icons e-paste"></ejs-splitbutton>
上部にアイコンを配置した SplitButton(縦型スタイル)
<ejs-splitbutton id="element" content="Paste" items="ViewBag.items"
iconCss="e-icons e-paste" iconPosition="Top"
cssClass="e-vertical"></ejs-splitbutton>
無効状態の SplitButton
<ejs-splitbutton id="element" content="Paste" items="ViewBag.items"
disabled="true"></ejs-splitbutton>
RTL の SplitButton
<ejs-splitbutton id="rtl" content="Message" items="ViewBag.items"
enableRtl="true"></ejs-splitbutton>
メインボタンのクリックと項目の選択を処理する
<ejs-splitbutton id="element" content="Paste" items="ViewBag.items"
click="onPrimaryClick" select="onItemSelect"></ejs-splitbutton>
<script>
function onPrimaryClick(args) {
// Primary button clicked
}
function onItemSelect(args) {
// args.item contains the selected popup item
console.log(args.item.text);
}
</script>
Switch
Switch コンポーネントは、ユーザーが ON と OFF の状態を切り替えられるトグルコントロールです。ブール値の設定、機能の切り替え、すばやい状態変更に使用します。ON/OFF ラベル、サイズ、RTL、カスタムスタイル、フォーム連携に対応しています。
ナビゲーションガイド
はじめに
📄 参照: references/switch-getting-started.md
- 前提条件と NuGet パッケージのインストール
_ViewImports.cshtmlでのタグヘルパーの登録_Layout.cshtmlでのスタイルシートとスクリプトの CDN 設定- スクリプトマネージャーの登録
<ejs-switch>による基本的な Switch のレンダリングonLabelとoffLabelによる ON/OFF ラベルの設定checkedによる初期状態の設定
機能
📄 参照: references/switch-features.md
- 無効状態
- サイズのバリエーション(
e-small) enableRtlによる RTL のサポートnameとvalueによるフォーム連携
イベント
📄 参照: references/switch-events.md
- Change イベントの処理
BeforeChangeイベントによる状態変更の防止Createdイベント
カスタマイズ
📄 参照: references/switch-customization.md
- カスタムスタイル
- バーとハンドルのカスタマイズ
- 色のカスタマイズ
API リファレンス
📄 参照: references/switch-api.md
- プロパティのリファレンステーブル
- イベントシグネチャ
- タグヘルパー属性の構文
アクセシビリティ
📄 参照: references/switch-accessibility.md
- WCAG 2.2 AA 準拠
- ARIA 属性(
role="switch"、aria-checked) - キーボード操作(Space キーで切り替え)
- スクリーンリーダーのサポート
クイックスタート
1. NuGet パッケージをインストールします:
Install-Package Syncfusion.EJ2.AspNet.Core
2. Tag Helper を登録します(~/Pages/_ViewImports.cshtml):
@addTagHelper *, Syncfusion.EJ2
3. CSS とスクリプトを追加します(~/Pages/Shared/_Layout.cshtml):
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
4. <body> の末尾に Script Manager を追加します:
<ejs-scripts></ejs-scripts>
5. Switch をレンダリングします:
<ejs-switch id="switch1" onLabel="ON" offLabel="OFF" checked="true"></ejs-switch>
一般的なパターン
フォーム送信付きの Switch
<form>
<ejs-switch id="wifi" name="wifi" value="on" checked="true"></ejs-switch>
<ejs-switch id="bluetooth" name="bluetooth" value="on"></ejs-switch>
<ejs-button id="submit" type="submit" content="Save"></ejs-button>
</form>
状態変更の防止
<ejs-switch id="switch1" beforeChange="onBeforeChange"></ejs-switch>
<script>
function onBeforeChange(args) {
args.cancel = true; // Prevents toggle
}
</script>
変更イベント付きの小さな Switch
<ejs-switch id="notify" cssClass="e-small" change="onNotifyChange"></ejs-switch>
<script>
function onNotifyChange(args) {
console.log('Notifications:', args.checked ? 'ON' : 'OFF');
}
</script>
Chips
Chips コンポーネントは、入力、属性、またはアクションを表すコンパクトな要素を表示します。タグ、フィルター、連絡先、削除可能な入力値に使用できます。選択モード(なし、単一、複数)、先頭/末尾のアイコン、アバターのテキスト/画像、削除機能、アウトラインのバリエーション、定義済みの色スタイル、ドラッグ&ドロップによる並べ替えに対応しています。
ナビゲーションガイド
はじめに
📄 参照: references/chips-getting-started.md
- 前提条件と NuGet パッケージのインストール
_ViewImports.cshtmlでの Tag Helper の登録_Layout.cshtmlでのスタイルシートとスクリプトの CDN 設定<ejs-scripts>による Script Manager の登録<ejs-chiplist text="...">を使った単一チップのレンダリング<e-chips>と<e-chip>を使ったチップリストのレンダリング
種類と選択
📄 参照: references/chips-types-and-selection.md
- 入力チップ(削除可能、単一選択)
- 選択チップ(単一選択、ラジオボタンのような動作)
- フィルターチップ(複数選択、チェックボックスのような動作)
- アクションチップ(クリック時に操作を実行)
selected-chipsによるチップの事前選択- クリックイベントと削除イベントの処理
- 無効なチップ
カスタマイズ
📄 参照: references/chips-customization.md
- 定義済みスタイル(
e-primary、e-success、e-info、e-warning、e-danger) - 先頭のアイコン(CSS クラスと URL)
- アバター画像とテキスト
- 末尾のアイコン
e-outlineを使ったアウトラインチップ- カスタムテンプレート
- HTML 属性
- RTL サポート
スタイル
📄 参照: references/chips-style.md
- チップのテキストスタイル
- アイコンのスタイル
- 削除ボタンのスタイル
- 選択状態のスタイル
- アバターテキストのスタイル
- 高さ/サイズのカスタマイズ
- CSS クラスの階層
ドラッグ&ドロップ
📄 参照: references/chips-drag-and-drop.md
allowDragAndDropによるドラッグ&ドロップの有効化- ドラッグ領域の制限
- コンテナー間のドラッグ&ドロップ
- ドラッグイベント(
onDragStart、onDragEnd、onDrop) - 条件に応じたドラッグ/ドロップの防止
- ドラッグクローンのカスタマイズ
API リファレンス
📄 参照: references/chips-api.md
- プロパティの完全なリファレンス(Text、Chips、Selection、SelectedChips、EnableDelete、CssClass など)
- メソッド(
GetSelectedChips、Select、Unselect、Delete、Refresh) - イベント(
OnClick、OnDelete、OnSelect、OnDragStart、OnDragEnd) - ChipModel インターフェイス
- イベント引数の型
アクセシビリティ
📄 参照: references/chips-accessibility.md
- WCAG 2.2 AA 準拠
- WAI-ARIA 属性(
role="listbox"、role="option"、aria-selected、aria-label) - キーボード操作(Tab、矢印キー、Enter、Delete)
- スクリーンリーダーのサポート
- RTL アクセシビリティ
- 色のコントラスト
クイックスタート
1. NuGet パッケージをインストールします:
Install-Package Syncfusion.EJ2.AspNet.Core
2. Tag Helper を登録します(~/Pages/_ViewImports.cshtml):
@addTagHelper *, Syncfusion.EJ2
3. CSS とスクリプトを追加します(~/Pages/Shared/_Layout.cshtml):
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
4. <body> の末尾に Script Manager を追加します:
<ejs-scripts></ejs-scripts>
5. Chips をレンダリングします:
<ejs-chiplist id="chip-list">
<e-chips>
<e-chip text="Andrew"></e-chip>
<e-chip text="Janet"></e-chip>
<e-chip text="Laura"></e-chip>
<e-chip text="Margaret"></e-chip>
</e-chips>
</ejs-chiplist>
一般的なパターン
単一チップ
<ejs-chiplist id="chip" text="Janet Leverling"></ejs-chiplist>
削除可能なチップ
<ejs-chiplist id="deletable" enableDelete="true">
<e-chips>
<e-chip text="Tag 1"></e-chip>
<e-chip text="Tag 2"></e-chip>
</e-chips>
</ejs-chiplist>
フィルターチップ(複数選択)
<ejs-chiplist id="filter" selection="Multiple">
<e-chips>
<e-chip text="React"></e-chip>
<e-chip text="Angular"></e-chip>
<e-chip text="Vue"></e-chip>
</e-chips>
</ejs-chiplist>
アバターテキスト付きチップ
<ejs-chiplist id="avatar-chips">
<e-chips>
<e-chip text="Andrew" avatarText="A"></e-chip>
<e-chip text="Janet" avatarText="J"></e-chip>
</e-chips>
</ejs-chiplist>
色付きチップ
<ejs-chiplist id="colored">
<e-chips>
<e-chip text="Primary" cssClass="e-primary"></e-chip>
<e-chip text="Success" cssClass="e-success"></e-chip>
<e-chip text="Danger" cssClass="e-danger"></e-chip>
</e-chips>
</ejs-chiplist>
ドラッグ可能なチップ
<ejs-chiplist id="draggable" allowDragAndDrop="true">
<e-chips>
<e-chip text="Task 1"></e-chip>
<e-chip text="Task 2"></e-chip>
</e-chips>
</ejs-chiplist>