Campo de firma para Angular | ng-hub-ui-signature

Campo de firma Angular accesible que guarda trazos de ratón, táctil y lápiz como SVG escalable para formularios, con deshacer, rehacer y exportación PNG.

Estilos

Variables CSS

Personaliza cada detalle con 11 variables CSS. Sobrescríbelas en :root o acótalas a un contenedor.

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.

VariablePor defectoTipoDescripción
--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

Estilos y theming

Match the form theme

The field inherits the forms token family and accepts a local signature token override.