Angular-Signaturfeld | ng-hub-ui-signature
Barrierefreies Angular-Signaturfeld, das Maus-, Touch- und Stifteingaben als skalierbare SVG-Formularwerte speichert, mit Rückgängig, Wiederholen und PNG-Export.
Stile
CSS-Variablen
Gestalte jedes Pixel mit 11 CSS-Variablen. Überschreibe sie auf :root oder begrenze sie auf einen Wrapper.
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 | Standard | Typ | Beschreibung |
|---|---|---|---|
--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 |
Styling und Theming
Match the form theme
The field inherits the forms token family and accepts a local signature token override.