Поле подписи Angular | ng-hub-ui-signature
Доступное поле подписи Angular, сохраняющее ввод мышью, касанием и пером как масштабируемое SVG-значение формы, с отменой, повтором и экспортом PNG.
Стили
Миксины и стили
Override the `--hub-signature-*` design tokens in a single include, without coupling the consumer to the component's DOM. Every parameter is OPTIONAL and defaults to `null`: only the parameters you pass are emitted, so the tokens you leave alone keep resolving through their own defaults. An include with no arguments would therefore emit nothing at all, which reads as a broken build rather than as a no-op — so it raises a `@warn` instead of failing silently. Token-based and self-contained (no Bootstrap dependencies).
Theming with hub-signature-theme
Sign with the keyboard: arrow keys move the pen, holding Shift moves it further, Space or Enter lowers and lifts it, and Escape discards the stroke in progress.
| Миксин | Параметры | Описание |
|---|---|---|
| Theming | ||
hub-signature-theme() | $background, $color, $border-color, $border-radius, $focus-border-color, $border-width, $focus-shadow, $font-size, $label-color, $label-font-size, $actions-gap | One-call theming for `<hub-signature>` |
CSS-переменные
Тематизируйте каждый пиксель с помощью 11 CSS-переменных. Переопределите их в :root или ограничьте их областью обёртки.
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.
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--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 |
Стилизация и тематизация
Load the forms stylesheet
The chrome around the canvas is not the signature's. Its root element is class="hub-field hub-signature" and the label row, the helper text, the validation feedback and the ? mark that opens it are all defined in ng-hub-ui-forms, so @use 'ng-hub-ui-forms/styles'; belongs in the application's global stylesheet, once. Skip it and the canvas still looks right while the text under it falls back to unstyled body copy and the ? mark, glyph and circle included, is left as an empty button. Add @use 'ng-hub-ui-utils/styles/tooltip'; too when the field uses formTextType="tooltip": the bubble is appended to <body>, out of reach of the sheet above. Neither is replaced by ng-hub-ui-signature/styles, which forwards the theming mixin and emits no chrome.
Match the form theme
The field inherits the forms token family and accepts a local signature token override. Validation is part of that inheritance: the invalid and valid states colour the drawing surface from the shared --hub-form-* contract, so a signature turns red alongside the inputs around it rather than printing a message under a canvas that still looks fine.
Примеры:
Наследование темы формы
Оформите форму один раз — поле подписи последует за ней: его слоты по умолчанию читают --hub-input-* для области рисования и --hub-label-* для подписи, так что ни одного правила --hub-signature-* не нужно. Обратите внимание на асимметрию: это работает из обёртки, потому что такие токены читаются через var() из унаследованного значения, тогда как --hub-signature-* объявлены на самом элементе поля.
Sign with the keyboard: arrow keys move the pen, holding Shift moves it further, Space or Enter lowers and lifts it, and Escape discards the stroke in progress.
Код
Import:
Template:
Component: