Angular 表单库 | ng-hub-ui-forms
无障碍的 Angular 表单字段（input、textarea、滑块、select、日期选择器），在控件、组和表单级别自动显示校验错误，支持响应式表单和 CSS 变量。
样式
混入与样式
Override any of the `--hub-file-input-*` design tokens in a single include. Every parameter is OPTIONAL and defaults to `null`: only the parameters you pass are emitted, so the rest keep the component's defaults. Token-based and self-contained (no Bootstrap dependencies).
Theming with hub-segmented-theme
The selected pill follows the themed accent and radius.
Focus me to see the themed focus ring.
Theming with hub-file-input-theme
| 混入 | 参数 | 描述 |
|---|---|---|
| Theming | ||
hub-file-input-theme() | $bg--hub-file-input-bg$color--hub-file-input-color$border-width--hub-file-input-border-width$border-style--hub-file-input-border-style$border-color--hub-file-input-border-color$border-radius--hub-file-input-border-radius$padding-x--hub-file-input-padding-x$padding-y--hub-file-input-padding-y$min-height--hub-file-input-min-height$gap--hub-file-input-gap$hover-bg--hub-file-input-hover-bg$hover-border-color--hub-file-input-hover-border-color$dragover-bg--hub-file-input-dragover-bg$dragover-border-color--hub-file-input-dragover-border-color$prompt-color--hub-file-input-prompt-color$browse-color--hub-file-input-browse-color$hint-color--hub-file-input-hint-color$icon--hub-file-input-icon$icon-size--hub-file-input-icon-size$icon-color--hub-file-input-icon-color$file-icon--hub-file-input-file-icon$file-icon-color--hub-file-input-file-icon-color$remove-icon--hub-file-input-remove-icon$cancel-icon--hub-file-input-cancel-icon$retry-icon--hub-file-input-retry-icon$done-icon--hub-file-input-done-icon$done-color--hub-file-input-done-color$item-bg--hub-file-input-item-bg$item-border-color--hub-file-input-item-border-color$item-border-radius--hub-file-input-item-border-radius$thumb-size--hub-file-input-thumb-size$grid-min-width--hub-file-input-grid-min-width$grid-thumb-height--hub-file-input-grid-thumb-height$progress-height--hub-file-input-progress-height$progress-track-bg--hub-file-input-progress-track-bg$progress-bar-bg--hub-file-input-progress-bar-bg | One-call theming for `<hub-file-input>` |
hub-forms-theme() | $focus-ring-color--hub-form-focus-ring-color$focus-ring-width--hub-form-focus-ring-width$invalid-color--hub-form-invalid-color--hub-form-invalid-border-color$valid-color--hub-form-valid-color--hub-form-valid-border-color$disabled-opacity--hub-form-disabled-opacity$transition--hub-form-transition | One-call theming for the shared `ng-hub-ui-forms` chrome |
hub-segmented-theme() | $bg--hub-segmented-bg$selected-bg--hub-segmented-selected-bg$selected-color--hub-segmented-selected-color$radius--hub-segmented-radius$gap--hub-segmented-gap$padding-x--hub-segmented-padding-x$padding-y--hub-segmented-padding-y | One-call theming for `<hub-segmented>` |
CSS 变量
用 258 个 CSS 变量为每一个像素设置主题。在 :root 处覆盖它们，或将其限定到某个容器范围内。
Form
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-form-fieldset-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Form fieldset border color |
--hub-form-fieldset-border-radius | var(--hub-ref-radius-md, 0.375rem) | length | Form fieldset border radius |
--hub-form-fieldset-border-width | var(--hub-ref-border-width, 1px) | length | Form fieldset border width |
--hub-form-fieldset-padding-x | var(--hub-ref-space-3, 1rem) | length | Fieldset horizontal padding |
--hub-form-fieldset-padding-y | var(--hub-ref-space-3, 1rem) | length | Fieldset vertical padding |
--hub-form-focus-ring-color | var(--hub-sys-focus-ring-color, rgba(13, 110, 253, 0.25)) | color | Form focus ring color |
--hub-form-focus-ring-width | var(--hub-sys-focus-ring-width, 0.25rem) | length | Form focus ring width |
--hub-form-feedback-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | Form feedback font size |
--hub-form-feedback-margin-top | var(--hub-ref-space-1, 0.25rem) | length | Form feedback margin top |
--hub-form-invalid-border-color | var(--hub-sys-color-danger, #dc3545) | color | Form invalid border color |
--hub-form-invalid-color | var(--hub-sys-color-danger, #dc3545) | color | Form invalid color |
--hub-form-text-color | var(--hub-sys-text-muted, #6c757d) | color | Form text color |
--hub-form-text-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | Form text font size |
--hub-form-text-margin-top | var(--hub-ref-space-1, 0.25rem) | length | Form text margin top |
--hub-form-disabled-opacity | var(--hub-sys-opacity-disabled, 0.65) | number | Disabled field opacity |
--hub-form-feedback-color | var(--hub-form-invalid-color) | color | Validation feedback text color |
--hub-form-field-gap | var(--hub-ref-space-1, 0.25rem) | length | Gap between label and control |
--hub-form-invalid-focus-ring-color | var(--hub-sys-color-danger-subtle, rgba(220, 53, 69, 0.25)) | color | Invalid field focus ring color |
--hub-form-valid-color | var(--hub-sys-color-success, #198754) | color | Valid (success) field accent color — opt-in via showValid |
--hub-form-valid-border-color | var(--hub-sys-color-success, #198754) | color | Valid field border color (opt-in) |
--hub-form-valid-focus-ring-color | var(--hub-sys-color-success-subtle, rgba(25, 135, 84, 0.25)) | color | Valid field focus ring color (opt-in) |
--hub-form-valid-feedback-color | var(--hub-form-valid-color) | color | Valid (success) feedback text color |
--hub-form-label-horizontal-max-width | 12rem | length | Horizontal label max width |
--hub-form-required-color | var(--hub-sys-color-danger, #dc3545) | color | Required field marker color |
--hub-form-row-gap | var(--hub-ref-space-3, 1rem) | length | Horizontal label gutter gap |
--hub-form-transition | border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out | transition | Shared field transition |
Input
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-input-bg | var(--hub-sys-surface-page, #fff) | color | 控件背景。 |
--hub-input-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | 控件边框颜色。 |
--hub-input-border-radius | var(--hub-ref-radius-md, 0.375rem) | length | 控件边框半径。 |
--hub-input-border-width | var(--hub-ref-border-width, 1px) | length | Input border width |
--hub-input-color | var(--hub-sys-text-primary, #212529) | color | Input color |
--hub-input-focus-border-color | var(--hub-sys-color-primary, #0d6efd) | color | 聚焦时的边框颜色。 |
--hub-input-focus-box-shadow | 0 0 0 var(--hub-form-focus-ring-width) var(--hub-form-focus-ring-color) | shadow | Input focus box shadow |
--hub-input-font-family | var(--hub-ref-font-family-base, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif) | string | Input font family |
--hub-input-font-size | var(--hub-ref-font-size-base, 1rem) | length | Input font size |
--hub-input-font-weight | var(--hub-ref-font-weight-base, 400) | number | Input font weight |
--hub-input-group-addon-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Input group addon bg |
--hub-input-group-addon-border-color | var( --hub-input-border-color ) | color | Input group addon border color |
--hub-input-group-addon-color | var(--hub-sys-text-muted, #6c757d) | color | Input group addon color |
--hub-input-line-height | var(--hub-ref-line-height-base, 1.5) | number | Input line height |
--hub-input-padding-x | 0.75rem | length | 控件水平内边距。 |
--hub-input-padding-y | 0.375rem | length | 控件垂直内边距。 |
--hub-input-placeholder-color | var(--hub-sys-text-muted, #6c757d) | color | Input placeholder color |
--hub-input-transition | var(--hub-form-transition) | transition | Input transition |
--hub-input-wrapper-gap | var(--hub-ref-space-2, 0.5rem) | length | Input wrapper gap |
--hub-textarea-border-radius | var( --hub-input-border-radius ) | length | Textarea border radius |
--hub-textarea-min-height | 4.5rem | length | Textarea min height |
--hub-textarea-padding-x | var(--hub-input-padding-x) | length | Textarea padding x |
--hub-textarea-padding-y | var(--hub-input-padding-y) | length | Textarea padding y |
--hub-input-color-size | 2.5rem | color | Color input swatch size |
--hub-input-counter-button-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Counter stepper button background |
--hub-input-counter-button-color | var(--hub-sys-text-primary, #212529) | color | Counter stepper button color |
--hub-input-counter-button-width | 2.5rem | length | Counter stepper button width |
--hub-input-eye-mask | url("data:image/svg+xml,…") | url | Password visibility toggle eye icon |
--hub-input-icon-color | var(--hub-sys-text-muted, #6c757d) | color | 字段内图标词缀的颜色。 |
--hub-input-icon-size | var(--hub-ref-font-size-base, 1rem) | length | 字段内图标词缀的大小。 |
--hub-input-affix-inset | var(--hub-input-padding-x) | length | Affix inset from the field edge |
--hub-input-affix-gap | var(--hub-ref-space-2, 0.5rem) | length | Gap between the affix and the control text |
--hub-input-clear-icon | url("data:image/svg+xml,…") | url | ✕（清除）按钮字形，作为遮罩图像 —— 替换它即可自定义图标。 |
--hub-input-clear-size | var(--hub-ref-font-size-base, 1rem) | length | Clear button size |
--hub-input-clear-color | var(--hub-sys-text-muted, #6c757d) | color | 清除按钮的颜色。 |
--hub-input-clear-hover-color | var(--hub-sys-color-danger, #dc3545) | color | 悬停 / 聚焦时清除按钮的颜色。 |
File input
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-file-input-bg | var(--hub-sys-surface-page, #fff) | color | Dropzone background |
--hub-file-input-color | var(--hub-sys-text-primary, #212529) | color | Dropzone text color |
--hub-file-input-border-width | var(--hub-ref-border-width, 1px) | length | Dropzone border width |
--hub-file-input-border-style | dashed | border | Dropzone border style |
--hub-file-input-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Dropzone border color at rest |
--hub-file-input-border-radius | var(--hub-input-border-radius) | length | Dropzone corner radius |
--hub-file-input-padding-x | var(--hub-ref-space-3, 1rem) | length | Dropzone horizontal padding |
--hub-file-input-padding-y | var(--hub-ref-space-4, 1.5rem) | length | Dropzone vertical padding |
--hub-file-input-min-height | 7rem | length | Dropzone minimum height |
--hub-file-input-gap | var(--hub-ref-space-2, 0.5rem) | length | Gutter between dropzone icon, prompt and hint |
--hub-file-input-transition | var(--hub-form-transition) | transition | Dropzone and action-button transition |
--hub-file-input-hover-border-color | var(--hub-sys-color-primary, #0d6efd) | color | Dropzone border color on hover |
--hub-file-input-hover-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Dropzone background on hover |
--hub-file-input-dragover-bg | color-mix(in oklch, var(--hub-sys-color-primary, #0d6efd) 8%, transparent) | color | Dropzone background while a drag hovers it |
--hub-file-input-dragover-border-color | var(--hub-sys-color-primary, #0d6efd) | color | Dropzone border color while a drag hovers it |
--hub-file-input-focus-border-color | var(--hub-input-focus-border-color) | color | Dropzone border color on keyboard focus |
--hub-file-input-focus-box-shadow | var(--hub-input-focus-box-shadow) | shadow | Dropzone focus ring |
--hub-file-input-prompt-color | var(--hub-sys-text-muted, #6c757d) | color | Drop-invitation text color |
--hub-file-input-prompt-font-size | var(--hub-ref-font-size-base, 1rem) | length | Drop-invitation font size |
--hub-file-input-browse-color | var(--hub-sys-color-primary, #0d6efd) | color | Browse-action text color |
--hub-file-input-browse-font-weight | var(--hub-ref-font-weight-medium, 500) | number | Browse-action font weight |
--hub-file-input-hint-color | var(--hub-sys-text-muted, #6c757d) | color | Constraints-hint text color |
--hub-file-input-hint-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | Constraints-hint font size |
--hub-file-input-icon | url("data:image/svg+xml,…") | url | Upload glyph of the dropzone as a mask image |
--hub-file-input-icon-size | 2rem | length | Upload glyph size |
--hub-file-input-icon-color | var(--hub-sys-text-muted, #6c757d) | color | Upload glyph tint |
--hub-file-input-file-icon | url("data:image/svg+xml,…") | url | Per-file glyph (files with no thumbnail) as a mask image |
--hub-file-input-file-icon-size | 1.5rem | length | Per-file glyph size |
--hub-file-input-file-icon-color | var(--hub-sys-text-muted, #6c757d) | color | Per-file glyph tint |
--hub-file-input-remove-icon | url("data:image/svg+xml,…") | url | Remove-file button glyph as a mask image |
--hub-file-input-cancel-icon | url("data:image/svg+xml,…") | url | Cancel-upload button glyph as a mask image |
--hub-file-input-retry-icon | url("data:image/svg+xml,…") | url | Retry-upload button glyph as a mask image |
--hub-file-input-done-icon | url("data:image/svg+xml,…") | url | Finished-upload tick as a mask image |
--hub-file-input-done-color | var(--hub-sys-color-success, #198754) | color | Finished-upload tick and item border color |
--hub-file-input-action-size | 1rem | length | Per-file action button size |
--hub-file-input-action-color | var(--hub-sys-text-muted, #6c757d) | color | Per-file action button tint |
--hub-file-input-action-hover-color | var(--hub-sys-text-primary, #212529) | color | Per-file action button tint on hover |
--hub-file-input-remove-hover-color | var(--hub-sys-color-danger, #dc3545) | color | Remove button tint on hover |
--hub-file-input-list-gap | var(--hub-ref-space-2, 0.5rem) | length | Gutter between file rows |
--hub-file-input-list-margin-top | var(--hub-ref-space-2, 0.5rem) | length | Space between the dropzone and the file list |
--hub-file-input-item-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | File row/tile background |
--hub-file-input-item-color | var(--hub-sys-text-primary, #212529) | color | File row/tile text color |
--hub-file-input-item-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | File row/tile border color |
--hub-file-input-item-border-radius | var(--hub-ref-radius-sm, 0.25rem) | length | File row/tile corner radius |
--hub-file-input-item-padding-x | var(--hub-ref-space-2, 0.5rem) | length | File row/tile horizontal padding |
--hub-file-input-item-padding-y | var(--hub-ref-space-2, 0.5rem) | length | File row/tile vertical padding |
--hub-file-input-item-gap | var(--hub-ref-space-2, 0.5rem) | length | Gutter between thumbnail, metadata and actions |
--hub-file-input-name-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | File name font size |
--hub-file-input-size-color | var(--hub-sys-text-muted, #6c757d) | color | File size text color |
--hub-file-input-size-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | File size font size |
--hub-file-input-error-color | var(--hub-sys-color-danger, #dc3545) | color | Failed-upload message and item border color |
--hub-file-input-error-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | Failed-upload message font size |
--hub-file-input-clear-color | var(--hub-sys-text-muted, #6c757d) | color | Remove-all button text color |
--hub-file-input-clear-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | Remove-all button font size |
--hub-file-input-thumb-size | 2.5rem | length | Thumbnail size in list preview |
--hub-file-input-thumb-radius | var(--hub-ref-radius-sm, 0.25rem) | length | Thumbnail corner radius |
--hub-file-input-thumb-bg | var(--hub-sys-surface-page, #fff) | color | Thumbnail background behind a transparent image |
--hub-file-input-grid-min-width | 8rem | length | Minimum tile width in grid preview |
--hub-file-input-grid-gap | var(--hub-ref-space-2, 0.5rem) | length | Gutter between tiles in grid preview |
--hub-file-input-grid-thumb-height | 6rem | length | Thumbnail height in grid preview |
--hub-file-input-progress-height | 0.25rem | length | Upload progress bar thickness |
--hub-file-input-progress-radius | var(--hub-ref-radius-pill, 50rem) | length | Upload progress bar corner radius |
--hub-file-input-progress-track-bg | var(--hub-sys-border-color-default, #dee2e6) | color | Upload progress bar track color |
--hub-file-input-progress-bar-bg | var(--hub-sys-color-primary, #0d6efd) | color | Upload progress bar fill color |
--hub-file-input-progress-indeterminate-duration | 1.2s | transition | Sweep duration when the upload total is unknown |
--hub-file-input-prompt-direction | row | string | Flex direction of the dropzone prompt (row, or column to stack the invitation over the browse action) |
--hub-file-input-prompt-align | baseline | string | Cross-axis alignment of the dropzone prompt |
--hub-file-input-prompt-gap | 0.25em | length | Gutter between the invitation and the browse action |
--hub-file-input-drop-text-color | inherit | color | Invitation line colour |
--hub-file-input-drop-text-font-size | inherit | length | Invitation line font size |
--hub-file-input-drop-text-font-weight | inherit | number | Invitation line font weight |
--hub-file-input-drop-subtext-color | var(--hub-file-input-hint-color) | color | Second invitation line colour |
--hub-file-input-drop-subtext-font-size | var(--hub-file-input-hint-font-size) | length | Second invitation line font size |
--hub-file-input-browse-font-size | inherit | length | Browse-action font size |
--hub-file-input-browse-text-decoration | underline | string | Browse-action text decoration |
--hub-file-input-browse-bg | transparent | color | Browse-action background (set it to render the affordance as a button) |
--hub-file-input-browse-hover-bg | var(--hub-file-input-browse-bg) | color | Browse-action background on hover |
--hub-file-input-browse-padding-x | 0 | length | Browse-action horizontal padding |
--hub-file-input-browse-padding-y | 0 | length | Browse-action vertical padding |
--hub-file-input-browse-radius | 0 | length | Browse-action corner radius |
--hub-file-input-browse-gap | var(--hub-ref-space-2, 0.5rem) | length | Gutter between the browse-action glyph and its label |
--hub-file-input-browse-icon | none | string | Optional leading glyph of the browse action, as a mask image |
--hub-file-input-browse-icon-display | none | string | Display of the browse-action glyph; none keeps it off |
--hub-file-input-browse-icon-size | 1.125em | length | Browse-action glyph size |
--hub-file-input-icon-bg | transparent | color | Medallion surface behind the dropzone glyph; transparent keeps it off |
--hub-file-input-icon-chip-size | var(--hub-file-input-icon-size) | length | Medallion size behind the dropzone glyph |
--hub-file-input-icon-chip-radius | 0 | length | Medallion corner radius behind the dropzone glyph |
--hub-file-input-browse-margin-top | 0 | length | Space above the browse action when the prompt is stacked into a column |
Select
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-select-arrow-color | var(--hub-sys-text-muted, #6c757d) | color | Select arrow color |
--hub-select-bg | var(--hub-input-bg) | color | Select bg |
--hub-select-border-color | var( --hub-input-border-color ) | color | Select border color |
--hub-select-border-radius | var( --hub-input-border-radius ) | length | Select border radius |
--hub-select-border-width | var( --hub-input-border-width ) | length | Select border width |
--hub-select-clear-color | var(--hub-sys-text-muted, #6c757d) | color | Select clear color |
--hub-select-clear-hover-color | var(--hub-sys-color-danger, #dc3545) | color | Select clear hover color |
--hub-select-color | var(--hub-input-color) | color | Select color |
--hub-select-dropdown-bg | var(--hub-sys-surface-page, #fff) | color | Select dropdown bg |
--hub-select-dropdown-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Select dropdown border color |
--hub-select-dropdown-border-radius | var(--hub-ref-radius-md, 0.375rem) | length | Select dropdown border radius |
--hub-select-dropdown-box-shadow | var(--hub-sys-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15)) | shadow | Select dropdown box shadow |
--hub-select-focus-border-color | var( --hub-input-focus-border-color ) | color | Select focus border color |
--hub-select-focus-box-shadow | var( --hub-input-focus-box-shadow ) | shadow | Select focus box shadow |
--hub-select-font-size | var(--hub-input-font-size) | length | Select font size |
--hub-select-option-color | var(--hub-sys-text-primary, #212529) | color | Select option color |
--hub-select-option-marked-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Select option marked bg |
--hub-select-option-padding-x | var(--hub-ref-space-3, 1rem) | length | Select option padding x |
--hub-select-option-padding-y | var(--hub-ref-space-2, 0.5rem) | length | Select option padding y |
--hub-select-option-selected-bg | var(--hub-sys-color-primary, #0d6efd) | color | 选中的下拉选项背景。 |
--hub-select-option-selected-color | var(--hub-sys-color-primary-on, var(--hub-ref-color-white, #fff)) | color | Select option selected color |
--hub-select-padding-x | var(--hub-input-padding-x) | length | Select padding x |
--hub-select-placeholder-color | var( --hub-input-placeholder-color ) | color | Select placeholder color |
--hub-select-value-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | 多选标签的背景。 |
--hub-select-value-border-radius | var(--hub-ref-radius-sm, 0.25rem) | length | Select value border radius |
--hub-select-value-color | var(--hub-sys-text-primary, #212529) | color | Select value color |
--hub-select-button-bg | var(--hub-sys-surface-page, #fff) | color | Segmented select button background |
--hub-select-button-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Segmented select button border color |
--hub-select-button-color | var(--hub-sys-text-primary, #212529) | color | Segmented select button text color |
--hub-select-button-gap | var(--hub-ref-space-2, 0.5rem) | length | Segmented select button gap |
--hub-select-button-padding-x | var(--hub-ref-space-3, 1rem) | length | Segmented select button horizontal padding |
--hub-select-button-padding-y | var(--hub-ref-space-2, 0.5rem) | length | Segmented select button vertical padding |
--hub-select-button-selected-bg | var(--hub-sys-color-primary, #0d6efd) | color | Selected segmented button background |
--hub-select-button-selected-border-color | var(--hub-sys-color-primary, #0d6efd) | color | Selected segmented button border color |
--hub-select-button-selected-color | var(--hub-sys-color-primary-on, var(--hub-ref-color-white, #fff)) | color | Selected segmented button text color |
--hub-select-min-height | 2.5rem | length | Select control minimum height |
--hub-select-optgroup-color | var(--hub-sys-text-muted, #6c757d) | color | Select option group label color |
--hub-select-dropdown-zindex | var(--hub-select-dropdown-z-index, calc(var(--hub-sys-zindex-modal, 1055) + 5)) | number | Stacking of the ng-select dropdown panel (canonical zindex spelling); sits above HubModal so a select inside a modal is not clipped |
--hub-select-dropdown-z-index | calc(var(--hub-sys-zindex-modal, 1055) + 5) | number | Deprecated spelling — default carrier and override bridge for --hub-select-dropdown-zindex; scheduled for removal after one release cycle |
Check & radio
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-check-input-bg | var(--hub-input-bg) | color | Check input bg |
--hub-check-input-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Check input border color |
--hub-check-input-border-radius | var(--hub-ref-radius-sm, 0.25rem) | length | Check input border radius |
--hub-check-input-border-width | var(--hub-input-border-width) | length | Check input border width |
--hub-check-input-checked-bg | var(--hub-sys-color-primary, #0d6efd) | color | Check input checked bg |
--hub-check-input-checked-border-color | var(--hub-sys-color-primary, #0d6efd) | color | Check input checked border color |
--hub-check-input-checked-icon | url("data:image/svg+xml,…") | url | Check input checked icon |
--hub-check-input-height | 1.15rem | length | Check input height |
--hub-check-input-width | 1.15rem | length | Check input width |
--hub-check-radio-border-radius | 50% | length | Check radio border radius |
--hub-check-label-gap | var(--hub-ref-space-2, 0.5rem) | length | Gap between check control and label |
Datepicker
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-datepicker-icon | url("data:image/svg+xml,…") | url | Datepicker icon |
--hub-datepicker-icon-size | 1rem | length | Datepicker icon size |
--hub-datepicker-icon-width | 2.5rem | length | Datepicker icon width |
--hub-daterangepicker-padding-x | var(--hub-ref-space-3, 1rem) | length | Calendar panel horizontal padding |
--hub-daterangepicker-padding-y | var(--hub-ref-space-3, 1rem) | length | Calendar panel vertical padding |
Date range picker
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-daterangepicker-active-bg | var(--hub-sys-color-primary, #0d6efd) | color | 选中的日历日期背景。 |
--hub-daterangepicker-active-color | var(--hub-sys-color-primary-on, var(--hub-ref-color-white, #fff)) | color | Daterangepicker active color |
--hub-daterangepicker-bg | var(--hub-sys-surface-page, #fff) | color | Daterangepicker bg |
--hub-daterangepicker-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Daterangepicker border color |
--hub-daterangepicker-border-radius | var(--hub-ref-radius-md, 0.375rem) | length | Daterangepicker border radius |
--hub-daterangepicker-box-shadow | var(--hub-sys-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15)) | shadow | Daterangepicker box shadow |
--hub-daterangepicker-cell-border-radius | var(--hub-ref-radius-sm, 0.25rem) | length | Daterangepicker cell border radius |
--hub-daterangepicker-cell-color | var(--hub-sys-text-primary, #212529) | color | Daterangepicker cell color |
--hub-daterangepicker-cell-hover-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Daterangepicker cell hover bg |
--hub-daterangepicker-cell-size | 2rem | length | Daterangepicker cell size |
--hub-daterangepicker-color | var(--hub-sys-text-primary, #212529) | color | Daterangepicker color |
--hub-daterangepicker-in-range-bg | color-mix(in oklch, var(--hub-sys-color-primary, #0d6efd) 14%, transparent) | color | 范围内日历日期的背景。 |
--hub-daterangepicker-nav-arrow-color | var(--hub-sys-text-muted, #6c757d) | color | Daterangepicker nav arrow color |
--hub-daterangepicker-nav-arrow-hover-color | var(--hub-sys-text-primary, #212529) | color | Daterangepicker nav arrow hover color |
--hub-daterangepicker-off-color | var(--hub-sys-text-muted, #6c757d) | color | Daterangepicker off color |
Label
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-label-color | var(--hub-sys-text-primary, #212529) | color | Label color |
--hub-label-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | Label font size |
--hub-label-font-weight | var(--hub-ref-font-weight-medium, 500) | number | 字段标签的字重。 |
--hub-label-margin-bottom | 0 | length | Label margin bottom |
Slider
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-slider-thumb-bg | var(--hub-sys-color-primary, #0d6efd) | color | slider 滑块的颜色。 |
--hub-slider-thumb-border | 2px solid var(--hub-sys-surface-page, #fff) | border | Slider thumb border |
--hub-slider-thumb-border-radius | 50% | length | Slider thumb border radius |
--hub-slider-thumb-height | 1.1rem | length | Slider thumb height |
--hub-slider-thumb-width | 1.1rem | length | Slider thumb width |
--hub-slider-tooltip-bg | var(--hub-sys-text-primary, #212529) | color | Slider tooltip bg |
--hub-slider-tooltip-border-radius | var(--hub-ref-radius-sm, 0.25rem) | length | Slider tooltip border radius |
--hub-slider-tooltip-color | var(--hub-sys-surface-page, #fff) | color | Slider tooltip color |
--hub-slider-track-bg | var(--hub-sys-border-color-default, #dee2e6) | color | Slider track bg |
--hub-slider-track-border-radius | var(--hub-ref-radius-pill, 50rem) | length | Slider track border radius |
--hub-slider-track-height | 0.375rem | length | Slider track height |
--hub-slider-track-width | 100% | length | Slider track width |
--hub-slider-thumb-shadow | 0 0 0 1px var(--hub-sys-border-color-default, #dee2e6) | shadow | Slider thumb shadow ring |
--hub-slider-track-fill-bg | var(--hub-sys-color-primary, #0d6efd) | color | slider 轨道的已填充部分。 |
--hub-slider-track-fill | linear-gradient(var(--hub-slider-track-fill-bg), var(--hub-slider-track-fill-bg)) | color | Gradient-capable fill background image for the slider track (clipped to the current percentage) |
--hub-slider-value-space | 0 | string | Vertical headroom above the rail for the value bubble; collapsed to 0 by the flush (labelless) modifier |
--hub-segmented-padding-y | var(--hub-ref-space-2, 0.5rem) | length | Vertical padding of each segment (md) |
--hub-segmented-padding-x | var(--hub-ref-space-3, 1rem) | length | Horizontal padding of each segment (md) |
--hub-segmented-gap | 0.25rem | length | Gap between segments and inner track padding |
--hub-segmented-radius | var(--hub-ref-radius-md, 0.375rem) | length | Corner radius of the hub-segmented track |
--hub-segmented-selected-color | var(--hub-sys-text-primary, #212529) | color | Selected segment text colour |
--hub-segmented-selected-bg | var(--hub-sys-surface-page, #fff) | color | Selected segment background |
--hub-segmented-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Track background of the hub-segmented bar |
--hub-segmented-indicator-transition | 0.2s ease | transition | Duration/easing of the single-mode sliding indicator as it moves between options |
Switch
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-switch-height | 1.25rem | length | Switch height |
--hub-switch-width | 2.25rem | length | Switch width |
--hub-switch-thumb | var(--hub-sys-surface-page, #fff) | string | Switch thumb color |
--hub-switch-track-off | var(--hub-sys-border-color-default, #dee2e6) | string | Switch off-state track color |
--hub-switch-track-on | var(--hub-sys-color-primary, #0d6efd) | color | Switch on-state track color |
OTP input
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-otp-cell-font-size | 1.25rem | length | OTP cell font size |
--hub-otp-cell-radius | var(--hub-input-border-radius) | length | OTP cell border radius |
--hub-otp-cell-size | 2.75rem | length | OTP cell size |
--hub-otp-gap | var(--hub-ref-space-2, 0.5rem) | length | Gap between OTP cells |
--hub-otp-separator-color | var(--hub-sys-text-muted, #6c757d) | color | OTP separator color |