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.

VariablePar défautTypeDescription
--hub-signature-bgvar(--hub-input-bg, var(--hub-sys-surface, #fff))color Drawing-surface background
--hub-signature-colorvar(--hub-input-color, var(--hub-sys-text-primary, #212529))color Field text colour
--hub-signature-border-colorvar(--hub-input-border-color, var(--hub-sys-border, #ced4da))color Drawing-surface border colour
--hub-signature-border-widthvar(--hub-input-border-width, 1px)length Drawing-surface border thickness
--hub-signature-border-radiusvar(--hub-input-border-radius, var(--hub-ref-radius-md, 0.375rem))length Drawing-surface corner radius
--hub-signature-focus-border-colorvar(--hub-input-focus-border-color, var(--hub-sys-color-primary, #0d6efd))color Border colour while the surface holds keyboard focus
--hub-signature-focus-shadowvar(--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-colorvar(--hub-label-color, var(--hub-sys-text-primary, #212529))color Field label colour
--hub-signature-label-font-sizevar(--hub-label-font-size, var(--hub-ref-font-size-sm, 0.875rem))length Field label font size
--hub-signature-font-sizevar(--hub-input-font-size, 1rem)length Field font size
--hub-signature-actions-gapvar(--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.