Champ de signature Angular | ng-hub-ui-signature
Champ de signature Angular accessible qui stocke les tracés de souris, tactile et stylet comme valeurs SVG évolutives, avec annulation, rétablissement et export PNG.
Styles
Variables CSS
Personnalisez chaque pixel avec 11 variables CSS. Remplacez-les au niveau de :root ou limitez-les à un conteneur.
Signature
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-signature-bg | var(--hub-input-bg, var(--hub-sys-surface, #fff)) | color | Drawing-surface background |
--hub-signature-color | var(--hub-input-color, var(--hub-sys-text-primary, #212529)) | color | Field text colour |
--hub-signature-border-color | var(--hub-input-border-color, var(--hub-sys-border, #ced4da)) | color | Drawing-surface border colour |
--hub-signature-border-width | var(--hub-input-border-width, 1px) | length | Drawing-surface border thickness |
--hub-signature-border-radius | var(--hub-input-border-radius, var(--hub-ref-radius-md, 0.375rem)) | length | Drawing-surface corner radius |
--hub-signature-focus-border-color | var(--hub-input-focus-border-color, var(--hub-sys-color-primary, #0d6efd)) | color | Border colour while the surface holds keyboard focus |
--hub-signature-focus-shadow | var(--hub-input-focus-box-shadow, 0 0 0 0.25rem rgb(13 110 253 / 25%)) | shadow | Focus ring around the drawing surface |
--hub-signature-label-color | var(--hub-label-color, var(--hub-sys-text-primary, #212529)) | color | Field label colour |
--hub-signature-label-font-size | var(--hub-label-font-size, var(--hub-ref-font-size-sm, 0.875rem)) | length | Field label font size |
--hub-signature-font-size | var(--hub-input-font-size, 1rem) | length | Field font size |
--hub-signature-actions-gap | var(--hub-ref-space-2, 0.5rem) | length | Gap between the clear / undo / redo actions |
Styles et theming
Match the form theme
The field inherits the forms token family and accepts a local signature token override.