Angular 签名字段 | ng-hub-ui-signature
可访问的 Angular 签名字段,将鼠标、触摸和手写笔输入保存为可缩放 SVG 表单值,并支持撤销、重做和 PNG 导出。
API 参考
这里是 signature 的完整契约:你可以绑定、监听、投影和设置主题的一切,都集中在一处。接入你需要的部分,自定义你想要的样式——它是 standalone 的,且对 signal 友好。
输入
通过 9 个输入项精细调校 signature。像绑定任意 Angular @Input 一样绑定它们。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
label | string | '' | Visible field label. |
formText | string | '' | Helper text shown below the drawing surface. |
height | number | 160 | Logical canvas height in CSS pixels. |
strokeColor | string | 'currentColor' | Colour recorded in new SVG strokes. |
strokeWidth | number | 2 | Base width recorded in new SVG strokes. |
readonly | boolean | false | Prevents drawing while preserving the signature. |
controls | boolean | true | Shows clear, undo and redo actions. |
labels | Partial<HubSignatureLabels> | {} | Overrides the application-wide translated action labels for this field only. |
ariaLabel | string | 'Signature' | Accessible name for the drawing surface. |
输出
响应 signature 的行为——有 1 个事件可供你挂接逻辑。
| 名称 | 类型 | 描述 |
|---|---|---|
valueChange | EventEmitter<string> | Emits the SVG value after a user-originated change. |
方法
通过代码驱动 signature——其编程接口提供 5 个方法。
| 名称 | 签名 | 返回值 | 描述 |
|---|---|---|---|
clear | clear(): void | — | Removes every stroke and emits the empty value. |
undo | undo(): void | — | Removes the most recently committed stroke. |
redo | redo(): void | — | Restores the most recently undone stroke. |
toSvg | toSvg(): string | — | Returns the scalable SVG form value. |
toDataUrl | toDataUrl(type?: string): string | — | Exports the rendered signature, PNG by default. |
模板
尚未记录任何模板。