样式

混入与样式

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.

同一个字段，用主题 mixin 重新配色。

混入	参数	描述
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-* 规则都不需要。注意这里的不对称：这些 token 通过 var() 读取继承值，所以在外层容器上设置有效；而 --hub-signature-* 声明在字段元素本身。

姓名

签名