Angular 署名フィールド | ng-hub-ui-signature

マウス、タッチ、ペン入力をスケーラブルな SVG フォーム値として保存する、アクセシブルな Angular 署名フィールド。取り消し、やり直し、PNG エクスポートに対応します。

最終更新 2026/08/14

概要

チームがこのライブラリを探す理由

再利用可能でアクセシブル、かつポータブルな署名面がフォームに必要な場合は ng-hub-ui-signature を使用してください。

インストール

npm install ng-hub-ui-signature

ジャンプ

最適な用途

  • 契約の承認
  • 配送確認
  • 同意フォーム
  • 承認フロー

について signature

ng-hub-ui-signature は Pointer Events を使う standalone Angular フォームフィールドです。マウス、タッチ、ペンの軌跡を SVG ControlValueAccessor 値として扱い、保存済み署名の復元、消去、取り消し、やり直し、PNG エクスポートを提供します。

機能ガイド

Capture and edit signatures

Pointer input works with a mouse, touch screen or pen, then keeps a scalable SVG history for undo, redo and form persistence.

サンプル:
署名

Draw a signature and use the built-in history actions.

マウス、タッチスクリーン、またはペンで描画します。
コード
Import:
Template:
Component:

Reactive external translations

The action-label contract accepts strings or reactive sources, so Transloco and ngx-translate language changes update the field without a direct package dependency.

サンプル:
Transloco と ngx-translate

リアクティブな翻訳ストリームをバインドして、言語変更時に操作を更新します。

マウス、タッチスクリーン、またはペンで描画します。
コード
Import:
Template:
Component:

主な機能

最近の変更

Version 22.1.0 - 8/14/26, 12:00 AM

fixed: The field now really inherits the ng-hub-ui-forms contract. The --hub-signature-* slots defaulted to a --hub-field-* family that no library declares, so they always fell through to their sys/ref fallbacks and a form themed with --hub-input-bg left its signature field untouched. They now read the canonical tokens of the .hub-field__* shell: --hub-input-* for the drawing surface, --hub-label-* for the label and --hub-form-disabled-opacity for the disabled state.

added: The eleven --hub-signature-* tokens are documented in the design-system token spec, so they now appear in the library reference table.

Version 22.0.0 - 8/14/26, 12:00 AM

added: Initial signature field release.

関連ライブラリ

ng-hub-ui-forms ng-hub-ui-utils