syncfusion-aspnetcore-inputs について
ASP.NET Core 開発者向けに、Syncfusion の入力コンポーネントの実装方法をまとめたガイドです。ファイルアップロード、数値入力、OTP、テキスト入力を扱い、設定、検証、フォーム連携、アクセシビリティを参照できます。
主な機能
- 01非同期・チャンクファイルアップロード
- 02数値書式と範囲検証
- 03OTP とテキスト入力コンポーネント
- 04フォームバインディングと検証ガイド
- 05イベント、スタイル、アクセシビリティの資料
活用シーン
- 01ASP.NET Core ページに非同期アップロードを追加
- 02通貨やパーセントの数値入力を作成
- 03ワンタイムコード入力画面を構築
- 04入力コンポーネントをフォームモデルに連携
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ syncfusion/ aspnetcore-ui-components-skills --skill syncfusion-aspnetcore-inputsインストール後、Claude Code で/syncfusion-aspnetcore-inputsを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/numeric-textbox-adornments-and-styling.mdnumeric-textbox-api.mdnumeric-textbox-formats-and-validation.mdnumeric-textbox-getting-started.mdnumeric-textbox-globalization-accessibility.mdnumeric-textbox-precision-decimals.mdnumeric-textbox-spin-buttons-and-step.mdnumeric-textbox-two-way-binding-forms.mdotp-input-accessibility.mdotp-input-api.mdotp-input-configuration.mdotp-input-events.mdotp-input-getting-started.mdrange-slider-accessibility.mdrange-slider-api.mdrange-slider-events-and-methods.mdrange-slider-formatting-and-limits.mdrange-slider-getting-started.mdrange-slider-styling.mdrange-slider-tooltips-and-ticks.mdrange-slider-types-and-orientation.mdsignature-accessibility.mdsignature-api.mdsignature-customization.mdsignature-getting-started.mdsignature-open-save.mdsignature-toolbar-integration.mdsignature-user-interaction.mdtextarea-accessibility.mdtextarea-adornments.md詳細
Syncfusion ASP.NET Core 入力コントロールの実装
Uploader
Uploader は、高度なファイルアップロードコントロールです。チャンクアップロード、ドラッグ&ドロップ、検証、進行状況の追跡、プレビューなどの機能を使って、ファイルを非同期でアップロードできます。複数ファイル、テンプレート、セキュリティ検証、フォームとの連携にも対応しています。
ナビゲーションガイド
はじめに
📄 読む: references/uploader-getting-started.md
- NuGet パッケージのインストールとセットアップ
- タグヘルパーの登録とスクリプト/スタイルの参照
<ejs-uploader>を使った基本的な Uploader のレンダリング- 自動アップロードと手動アップロード
- SaveUrl/RemoveUrl の設定
- 複数ファイルの選択
非同期アップロード
📄 読む: references/uploader-async-upload.md
- SaveUrl/RemoveUrl を指定する
<e-uploader-asyncsettings>サブタグ - 順次アップロードと同時アップロード
progressイベントによる進行状況の追跡- 成功/失敗イベントの処理
- コントローラーのエンドポイントパターン
チャンクアップロード
📄 読む: references/uploader-chunk-upload.md
chunkSizeによるチャンクアップロードの有効化retryCountとretryAfterDelayによる再試行ロジック- 一時停止/再開操作
- 大容量ファイルの処理
- サーバー側でのチャンク処理
ファイルの検証
📄 読む: references/uploader-file-validation.md
- ファイル形式を制限する
allowedExtensions - サイズを制限する
minFileSizeとmaxFileSize - ファイル数の制限
- 重複ファイルの検出
selectedイベントによるカスタム検証
ドラッグ&ドロップのサポート
📄 読む: references/uploader-drag-drop-support.md
- デフォルトのドラッグ&ドロップ領域
dropAreaセレクターによるカスタム領域- 貼り付けによるアップロード機能
directoryUploadによるディレクトリ/フォルダーのアップロード- ドラッグの開始/終了イベント
テンプレートとスタイル設定
📄 読む: references/uploader-templates-and-styling.md
- カスタムファイルリストテンプレート
- ボタンのカスタマイズ
- プログレスバーのスタイル設定
- CSS クラス(e-primary、e-success など)
- テーマのサポート(Fluent、Material、Bootstrap)
高度なパターン
📄 読む: references/uploader-advanced-patterns.md
- アップロードしたファイルを含むフォームの送信
- ディレクトリのアップロード
- セキュリティ上の考慮事項(パストラバーサル、MIME 検証)
- ファイルのプレビュー(画像)
- エラー処理パターン
API リファレンス
📄 読む: references/uploader-api.md
- すべてのプロパティと型、既定値、説明
- すべてのイベント(selected、uploading、success、failure、progress など)
- AsyncSettings のサブプロパティ
- CSS クラスのリファレンス表
- タグヘルパー属性の完全な構文
クイックスタート
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> の末尾に Script Manager を追加します:
<ejs-scripts></ejs-scripts>
5. Uploader をレンダリングします:
<ejs-uploader id="uploader" autoUpload="true">
<e-uploader-asyncsettings saveUrl="Home/Save" removeUrl="Home/Remove">
</e-uploader-asyncsettings>
</ejs-uploader>
よく使われるパターン
SaveUrl/RemoveUrl を使った非同期アップロード
<ejs-uploader id="uploader" autoUpload="true" multiple="true">
<e-uploader-asyncsettings saveUrl="Home/Save" removeUrl="Home/Remove">
</e-uploader-asyncsettings>
</ejs-uploader>
チャンクアップロード
<ejs-uploader id="chunkUploader" autoUpload="true">
<e-uploader-asyncsettings saveUrl="Home/SaveChunk"
removeUrl="Home/Remove"
chunkSize="1048576">
</e-uploader-asyncsettings>
</ejs-uploader>
ファイルの検証
<ejs-uploader id="validatedUploader"
allowedExtensions=".jpg,.png,.pdf"
maxFileSize="5242880"
minFileSize="1024"
multiple="false">
<e-uploader-asyncsettings saveUrl="Home/Save" removeUrl="Home/Remove">
</e-uploader-asyncsettings>
</ejs-uploader>
カスタム領域を使ったドラッグ&ドロップ
<div id="dropArea" style="border: 2px dashed #ccc; padding: 20px;">
Drop files here
</div>
<ejs-uploader id="uploader" dropArea="#dropArea" autoUpload="true">
<e-uploader-asyncsettings saveUrl="Home/Save" removeUrl="Home/Remove">
</e-uploader-asyncsettings>
</ejs-uploader>
NumericTextBox
NumericTextBox は、書式設定、検証、スピンボタン、小数精度、グローバル化に対応し、数値を入力できるテキスト入力コントロールです。また、ASP.NET Core モデルとの双方向バインディングも提供します。
ナビゲーションガイド
はじめに
📄 読む: references/numeric-textbox-getting-started.md
- NuGet パッケージのインストールとセットアップ
- タグヘルパーの登録とスクリプト/スタイルの参照
<ejs-numerictextbox>を使った基本的な NumericTextBox のレンダリング- 値、最小値、最大値の設定
- NumericTextBoxFor によるモデルバインディング
書式と検証
📄 参照: references/numeric-textbox-formats-and-validation.md
- 通貨(
c2)、パーセンテージ(p2)、小数の書式 - 最小値/最大値の範囲検証
- 範囲外の値を丸める
strictMode - カスタム書式文字列
- リアルタイム検証のための
validateOnType
装飾要素とスタイル設定
📄 参照: references/numeric-textbox-adornments-and-styling.md
- テンプレートを使用した前置/後置の装飾要素
- 通貨記号、パーセンテージアイコン
- サイズクラス(e-small、e-bigger)
- CSS のカスタマイズとテーマ
スピンボタンとステップ
📄 参照: references/numeric-textbox-spin-buttons-and-step.md
showSpinButtonによるスピンボタンの表示/非表示- 増減値のステップ値
- キーボード操作(上/下矢印キー)
- カスタムステップパターン
精度と小数
📄 参照: references/numeric-textbox-precision-decimals.md
decimalsプロパティによる小数精度の設定- リアルタイムの小数検証を行う
validateDecimalOnType strictModeの動作- 通貨とパーセンテージの精度
双方向バインディングとフォーム
📄 参照: references/numeric-textbox-two-way-binding-forms.md
NumericTextBoxForのモデルバインディング- POST によるフォーム送信
- サーバー側の検証
- HTML フォームとのタグヘルパー連携
グローバリゼーションとアクセシビリティ
📄 参照: references/numeric-textbox-globalization-accessibility.md
- 文化圏の設定に使用する
localeプロパティ - 英語以外の文化圏向けの CLDR データの読み込み
- アラビア語、ヘブライ語向けの
enableRtl - WCAG 2.2 への準拠と ARIA 属性
- キーボード操作とスクリーンリーダーのサポート
API リファレンス
📄 参照: references/numeric-textbox-api.md
- 型、既定値、説明を含むすべてのプロパティ
- すべてのイベント(change、input、focus、blur、created、destroyed)
- CSS クラスのリファレンステーブル
- Enum 値(FloatLabelType など)
- タグヘルパー属性の完全な構文
クイックスタート
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. NumericTextBox をレンダリング:
<ejs-numerictextbox id="price" min="0" max="10000" value="100"
format="c2" placeholder="Enter price">
</ejs-numerictextbox>
一般的なパターン
通貨書式
<ejs-numerictextbox id="amount" format="c2" min="0" value="100">
</ejs-numerictextbox>
ステップ付きパーセンテージ
<ejs-numerictextbox id="percentage" format="p2" min="0" max="100"
step="5" showSpinButton="true">
</ejs-numerictextbox>
NumericTextBoxFor(モデルバインディング)
@model AppModel
<ejs-numerictextboxfor id="quantity" for="@Model.Quantity">
</ejs-numerictextboxfor>
検証付き
<ejs-numerictextbox id="age" min="18" max="100" strictMode="true"
validateOnType="true" placeholder="Enter age">
</ejs-numerictextbox>
OTP 入力
OTP 入力(ワンタイムパスワード)は、確認コード、OTP、PIN、または固定長の英数字シーケンスを入力するための専用入力コントロールです。複数の入力タイプ(数値、テキスト、パスワード)、スタイルモード、アクセシビリティに対応しています。
ナビゲーションガイド
はじめに
📄 参照: references/otp-input-getting-started.md
- NuGet パッケージのインストールとセットアップ
- タグヘルパーの登録とスクリプト/スタイルの参照
<ejs-otpinput>による OTP の基本的なレンダリング- 長さとタイプの設定
- 検証用の ValueChanged イベント
設定
📄 参照: references/otp-input-configuration.md
- 入力タイプ:数値、テキスト、パスワード
- スタイルモード:Outlined、Filled、Underlined
- プレースホルダーテキスト(全フィールド共通またはフィールドごと)
- フィールド間の区切り文字
- 無効状態と CSS クラス
イベント
📄 参照: references/otp-input-events.md
- Created、Input、ValueChanged、Focus、Blur イベント
- リアルタイムフィードバックのパターン
- 入力完了時の自動送信
- タイムアウト処理
- 検証フィードバック
アクセシビリティ
📄 参照: references/otp-input-accessibility.md
- WCAG 2.2 AA への準拠
- WAI-ARIA 属性(role、aria-label、aria-required)
- キーボード操作の完全な一覧
- スクリーンリーダーのサポート
- アラビア語、ヘブライ語向けの RTL サポート
API リファレンス
📄 参照: references/otp-input-api.md
- すべてのプロパティ(length、type、stylingMode、separator など)
- 説明付きのすべてのイベント
- CSS クラスのリファレンス
- タグヘルパー属性の構文全般
クイックスタート
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. OTP Input をレンダリングします:
<ejs-otpinput id="otp" length="6" type="number"
placeholder="0" valueChanged="onOtpComplete">
</ejs-otpinput>
一般的なパターン
6 桁の数字 OTP
<ejs-otpinput id="otp" length="6" type="number"
placeholder="0" autoFocus="true">
</ejs-otpinput>
区切り文字付きの英数字 OTP
<ejs-otpinput id="otp" length="6" type="text"
separator="-" stylingMode="filled">
</ejs-otpinput>
パスワード形式の OTP(非表示)
<ejs-otpinput id="otp" length="4" type="password">
</ejs-otpinput>
TextArea
TextArea は、フローティングラベル、装飾要素、文字数制限、サイズ変更モード、検証、フォーム連携、アクセシビリティに対応した複数行テキスト入力コントロールです。また、値をプログラムから管理するメソッドにも対応しています。
ナビゲーションガイド
はじめに
📄 参照: references/textarea-getting-started.md
- NuGet パッケージのインストールとセットアップ
- タグヘルパーの登録、スクリプトとスタイルの参照
<ejs-textarea>による基本的な TextArea のレンダリング- 行数、列数、値の設定
- TextAreaFor によるモデルバインディング
フローティングラベル
📄 参照: references/textarea-floating-label.md
floatLabelTypeモード:Auto、Always、Never- Material スタイルのフローティングラベル
- 各モードの使い分け
装飾要素
📄 参照: references/textarea-adornments.md
- 前置/後置テンプレートの装飾要素
- アイコンの配置を設定する
adornmentFlow - 通貨記号、文字カウンター
- インタラクティブな装飾要素
サイズ変更
📄 参照: references/textarea-resize.md
- サイズ変更モード:Both、Vertical、Horizontal、None
- 追加のスタイル設定に使う
cssClass - サイズ変更の無効化
- 自動サイズ変更のパターン
最大文字数
📄 参照: references/textarea-max-length.md
- 文字数制限を設定する
maxLengthプロパティ - リアルタイムの文字カウンター
- ユーザーへのフィードバックパターン
- サーバー側の検証
行数、列数、サイズ設定
📄 参照: references/textarea-rows-columns-sizing.md
rowsおよびcolsプロパティ- 幅と高さのカスタマイズ
- CSS によるサイズ設定
- レスポンシブ動作
フォームのサポート
📄 参照: references/textarea-form-support.md
- HTML フォームとの連携
- クライアント側の検証に使う FormValidator
- POST によるフォーム送信
- TextAreaFor によるモデルバインディング
スタイルと外観
📄 参照: references/textarea-styling-appearance.md
- サイズクラス(e-small、e-bigger)
- 塗りつぶしモードとアウトラインモード
- CSS のカスタマイズとテーマ
- 検証状態(e-success、e-error、e-warning)
値とコンテンツ
📄 参照: references/textarea-value-and-content.md
- プログラムによる値の設定/取得
- サーバーからのデータ読み込み
- デフォルト値とプレースホルダー
- JavaScript 相互運用
メソッド
📄 参照: references/textarea-methods.md
focusIn()メソッドとfocusOut()メソッド- 状態の永続化に使う
getPersistData() - 値を消去する
reset() addAttributes()とremoveAttributes()
イベント
📄 参照: references/textarea-events.md
- Created、Input、Change、Focus、Blur、Destroyed イベント
- イベント引数と使用パターン
- 実際のシナリオ(文字カウンター、自動保存、検証)
アクセシビリティ
📄 参照: references/textarea-accessibility.md
- WCAG 2.2 AA 準拠
- WAI-ARIA 属性
- キーボード操作の完全な一覧表
- スクリーンリーダーのサポートと RTL
API リファレンス
📄 参照: references/textarea-api.md
- 型、既定値、説明を含むすべてのプロパティ
- すべてのイベント(Created、Input、Change、Focus、Blur、Destroyed)
- CSS クラスのリファレンス表
- 列挙値(FloatLabelType、ResizeMode など)
- タグヘルパー属性の完全な構文
クイックスタート
1. NuGet パッケージをインストールします:
Install-Package Syncfusion.EJ2.AspNet.Core
2. タグヘルパーを登録します(~/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> の末尾にスクリプトマネージャーを追加します:
<ejs-scripts></ejs-scripts>
5. TextArea をレンダリングします:
<ejs-textarea id="comment" rows="4" cols="50"
placeholder="Enter your comment..." maxLength="500">
</ejs-textarea>
よく使われるパターン
基本的な複数行入力
<ejs-textarea id="description" rows="5" cols="60"
placeholder="Enter description">
</ejs-textarea>
フローティングラベル
<ejs-textarea id="notes" rows="4"
floatLabelType="Auto"
placeholder="Notes">
</ejs-textarea>
最大文字数の設定
<ejs-textarea id="feedback" rows="4" maxLength="500"
placeholder="Your feedback">
</ejs-textarea>
縦横両方向にサイズ変更可能
<ejs-textarea id="content" rows="6"
cssClass="e-resize-both">
</ejs-textarea>
TextBox
TextBox は、複数の入力タイプ(テキスト、パスワード、メール、数値など)、フローティングラベル、装飾要素、検証状態、アイコンボタン、クリア機能、複数行モードをサポートする1行テキスト入力コントロールです。また、包括的なアクセシビリティおよびスタイル設定オプションも備えています。
ナビゲーションガイド
はじめに
📄 参照: references/textbox-getting-started.md
- NuGet パッケージのインストールとセットアップ
- タグヘルパーの登録とスクリプト/スタイルの参照
<ejs-textbox>を使った基本的な TextBox のレンダリング- 入力タイプ(text、email、password、number、tel、url、search)
- TextBoxFor のモデルバインディング
スタイルとサイズ
📄 参照: references/textbox-styling-and-sizing.md
- 定義済みサイズクラス(e-small、e-bigger)
- 角丸
- CSS のカスタマイズとテーマ
- 塗りつぶしモードとアウトラインモード
機能とグループ
📄 参照: references/textbox-features-and-groups.md
- フローティングラベル(Auto、Always、Never)
- 前置アイコンと後置アイコン
showClearButtonによるクリアボタン- 入力を組み合わせるグループテンプレート
- アドオンアイコン
高度な機能
📄 参照: references/textbox-advanced-features.md
- 前置/後置の装飾要素
- TextBox 内のインタラクティブ要素
- HTML5 入力タイプ(date、time、color、range)
- 入力イベントの処理
複数行入力と拡張
📄 参照: references/textbox-multiline-and-expansion.md
- 複数行 TextBox の作成
- 自動拡張の動作
- 複数行モードでのフローティングラベル
- サイズ変更のパターン
検証と状態
📄 参照: references/textbox-validation-and-states.md
- 有効/無効を示す CSS クラス(e-success、e-error、e-warning)
- 無効状態と読み取り専用状態
- HTML5 検証との連携
- FormValidator との連携
アクセシビリティと移行
📄 参照: references/textbox-accessibility-and-migration.md
- WCAG 2.2 AA 準拠
- WAI-ARIA 属性
- キーボード操作の完全な一覧表
- スクリーンリーダーのサポートと RTL
- ASP.NET Web Forms からの移行ガイド
API リファレンス
📄 参照: references/textbox-api.md
- 型、既定値、説明を含むすべてのプロパティ
- すべてのイベント(input、change、focus、blur、created、destroyed)
- CSS クラスのリファレンス表
- 列挙値(InputType、FloatLabelType)
- タグヘルパー属性の完全な構文
クイックスタート
1. NuGet パッケージをインストールします:
Install-Package Syncfusion.EJ2.AspNet.Core
2. タグヘルパーを登録します(~/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> の末尾にスクリプトマネージャーを追加します:
<ejs-scripts></ejs-scripts>
5. TextBox をレンダリングします:
<ejs-textbox id="email" placeholder="Enter email"
floatLabelType="Auto" type="email">
</ejs-textbox>
よく使われるパターン
フローティングラベル付きメール
<ejs-textbox id="email" type="email"
floatLabelType="Auto"
placeholder="Email Address">
</ejs-textbox>
表示切り替え付きパスワード
<ejs-textbox id="password" type="password"
showClearButton="true"
placeholder="Password">
</ejs-textbox>
アイコン装飾付き
<ejs-textbox id="search" placeholder="Search..."
prefixIcon="e-search">
</ejs-textbox>
TextBoxFor(モデルバインディング)
@model AppModel
<ejs-textboxfor id="username" for="@Model.Username"
placeholder="Username">
</ejs-textboxfor>
Range Slider
Range Slider(<ejs-slider>)は、ユーザーが単一の値または値の範囲を選択できる多用途の入力コントロールです。横向き/縦向きの方向、目盛り、ツールチップ、書式設定、カスタム制限、色範囲に対応しています。
ナビゲーションガイド
はじめに
📄 参照: references/range-slider-getting-started.md
- NuGet パッケージのインストールとセットアップ
- タグヘルパーの登録とスクリプト/スタイルの参照
<ejs-slider>を使用した基本的な Slider のレンダリング- 値、最小値、最大値の設定
- Syncfusion Script Manager の登録
種類と方向
📄 参照: references/range-slider-types-and-orientation.md
- Slider の種類:Default、MinRange、Range
- 横向きと縦向き
- 単一値と範囲値の選択
- 見た目の違いと使用例
ツールチップと目盛り
📄 参照: references/range-slider-tooltips-and-ticks.md
- ツールチップの表示と配置(Before、After)
- カスタムツールチップの書式設定
showTicksによる目盛りの表示- 目盛りの位置とラベル
- 小刻みおよび大刻みの目盛り
書式設定と制限
📄 参照: references/range-slider-formatting-and-limits.md
- カスタム値の書式(通貨、パーセンテージ)
- 最小値/最大値の制限
- ステップ値
- 動的な範囲の更新
イベントとメソッド
📄 参照: references/range-slider-events-and-methods.md
- Change、Input、slideStart、slideEnd イベント
- getValue、setValue、refresh メソッド
- プログラムによる値の管理
- イベントの流れとパターン
スタイル設定
📄 参照: references/range-slider-styling.md
- トラックとつまみの CSS カスタマイズ
- 色範囲(e-primary、e-success、e-warning、e-danger)
- グラデーション付きトラック
- テーマのサポート
アクセシビリティ
📄 参照: references/range-slider-accessibility.md
- WCAG 2.2 AA 準拠
- WAI-ARIA 属性(aria-valuemin、aria-valuemax、aria-valuenow)
- キーボード操作の完全な一覧表
- スクリーンリーダーのサポートと RTL
API リファレンス
📄 参照: references/range-slider-api.md
- 型、デフォルト値、説明を含むすべてのプロパティ
- すべてのイベント(Change、Input、SlideStart、SlideEnd、Created、Destroyed)
- すべてのメソッド(getValue、setValue、refresh、destroy)
- CSS クラスの一覧表
- タグヘルパー属性の構文一式
クイックスタート
1. NuGet パッケージをインストール:
Install-Package Syncfusion.EJ2.AspNet.Core
2. タグヘルパーを登録(~/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. Range Slider をレンダリング:
<ejs-slider id="volume" min="0" max="100" value="30" type="MinRange">
</ejs-slider>
よく使われるパターン
デフォルトの単一値スライダー
<ejs-slider id="default" value="30"></ejs-slider>
ツールチップ付き MinRange スライダー
<ejs-slider id="minrange" value="30" type="MinRange"
showButtons="true">
</ejs-slider>
Range Slider(2 つのハンドル)
<ejs-slider id="range" value="@ViewBag.range" type="Range">
</ejs-slider>
縦向き
<div style="height: 300px;">
<ejs-slider id="vertical" value="50" orientation="Vertical">
</ejs-slider>
</div>
目盛りとツールチップ付き
<ejs-slider id="tickSlider" min="0" max="100" value="40"
showTicks="true" tooltipPlacement="Before">
</ejs-slider>
Signature
Signature は、マウス、タッチ、またはペン入力を使ってキャンバス上に署名を描画できるデジタル署名取得コントロールです。ストロークのカスタマイズ、元に戻す/やり直し、クリア、保存(base64、blob、画像)、既存の署名の読み込み、無効/読み取り専用の状態、ツールバーとの連携に対応しています。
ナビゲーションガイド
はじめに
📄 参照: references/signature-getting-started.md
- NuGet パッケージのインストールとセットアップ
- タグヘルパーの登録とスクリプト/スタイルの参照
<ejs-signature>を使用した基本的な Signature のレンダリング- キャンバスの寸法とスタイル設定
- 署名をデータ URL として取得
カスタマイズ
📄 参照: references/signature-customization.md
- 線の色を指定する
strokeColor - 線の太さを指定する
maxStrokeWidthとminStrokeWidth - 筆圧に応じて線幅を変える
velocity backgroundColorとbackgroundImage- 背景を含めて保存する
saveWithBackground
ユーザー操作
📄 参照: references/signature-user-interaction.md
- 元に戻す操作とやり直す操作
- キャンバスをクリア
- 無効状態と読み取り専用状態
- isEmpty と canUndo/canRedo の確認
- ボタン連携の完全なサンプル
開いて保存
📄 参照: references/signature-open-save.md
- base64 PNG を取得する
getSignature() - Blob オブジェクトを取得する
saveAsBlob() - 生データを取得する
getBlob() - ダウンロードする
save() - 署名を復元する
load()
ツールバー連携
📄 参照: references/signature-toolbar-integration.md
- 元に戻す/やり直す/クリア/保存に対応した Syncfusion Toolbar
- ボタンの状態管理(canUndo、canRedo、isEmpty)
- カスタムツールバーレイアウト
- リアルタイムのイベント処理
アクセシビリティ
📄 参照: references/signature-accessibility.md
- WCAG 2.2 AA 準拠
- WAI-ARIA 属性
- キーボードショートカット(Ctrl+Z、Ctrl+Y、Ctrl+S、Delete)
- スクリーンリーダー対応と RTL
API リファレンス
📄 参照: references/signature-api.md
- すべてのプロパティ(strokeColor、maxStrokeWidth、backgroundColor など)
- すべてのメソッド(undo、redo、clear、save、load、getSignature、saveAsBlob)
- すべてのイベント(change、created、destroyed)
- CSS クラスのリファレンステーブル
- タグヘルパー属性の完全な構文
クイックスタート
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. 署名をレンダリングします:
<div class="wrap">
<ejs-signature id="signature" strokeColor="#000000"
maxStrokeWidth="2">
</ejs-signature>
</div>
<style>
.wrap { margin: 0 auto; width: 300px; text-align: center; }
#signature { border: 1px solid lightgray; height: 100%; width: 100%; }
</style>
よく使われるパターン
元に戻す/やり直す/クリアボタンを使う
<div class="wrap">
<ejs-button id="undoBtn" content="Undo" disabled="true"></ejs-button>
<ejs-button id="redoBtn" content="Redo" disabled="true"></ejs-button>
<ejs-button id="clearBtn" content="Clear" disabled="true"></ejs-button>
<ejs-signature id="signature" change="change"></ejs-signature>
</div>
<script>
var signature = document.getElementById("signature").ej2_instances[0];
document.getElementById("undoBtn").addEventListener('click', function () {
if (!signature.isReadOnly && !signature.disabled) signature.undo();
});
document.getElementById("redoBtn").addEventListener('click', function () {
if (!signature.isReadOnly && !signature.disabled) signature.redo();
});
document.getElementById("clearBtn").addEventListener('click', function () {
if (!signature.isReadOnly && !signature.disabled) signature.clear();
});
function change() {
document.getElementById("undoBtn").ej2_instances[0].disabled = !signature.canUndo();
document.getElementById("redoBtn").ej2_instances[0].disabled = !signature.canRedo();
document.getElementById("clearBtn").ej2_instances[0].disabled = signature.isEmpty();
}
</script>
Base64 として保存する
<ejs-signature id="signature"></ejs-signature>
<ejs-button id="saveBtn" content="Save"></ejs-button>
<script>
document.getElementById("saveBtn").addEventListener('click', function () {
var sig = document.getElementById("signature").ej2_instances[0];
var imageData = sig.getSignature();
console.log('Base64:', imageData);
});
</script>
カスタムの線の設定
<ejs-signature id="signature"
strokeColor="#0066cc"
maxStrokeWidth="3"
minStrokeWidth="1"
velocity="0.5">
</ejs-signature>