مكتبة نماذج Angular | ng-hub-ui-forms
حقول نماذج Angular يمكن الوصول إليها (input وtextarea وslider وselect وdatepicker) مع عرض تلقائي لأخطاء عنصر التحكم والمجموعة والنموذج، ونماذج تفاعلية ومتغيرات 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 |