Библиотека утилит для Angular | ng-hub-ui-utils
Библиотека утилит для Angular с pipe, управлением фокусом, оверлеями, переходами и хелперами перевода, общими для переиспользуемых UI-компонентов.
Стили
CSS-переменные
Тематизируйте каждый пиксель с помощью 19 CSS-переменных. Переопределите их в :root или ограничьте их областью обёртки.
Overlay & tooltip
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-overlay-backdrop-zindex | calc(var(--hub-sys-zindex-dropdown, 1000) - 1) | number | Overlay backdrop z index |
--hub-overlay-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Overlay bg |
--hub-overlay-border-radius | var(--hub-sys-radius-sm, 0.25rem) | length | Overlay border radius |
--hub-overlay-shadow | var(--hub-sys-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15)) | shadow | Overlay shadow |
--hub-overlay-zindex | var(--hub-sys-zindex-dropdown, 1000) | number | Overlay z index |
--hub-tooltip-bg | var(--hub-ref-color-black, #000) | color | Цвет фона подсказки. |
--hub-tooltip-border-radius | var(--hub-sys-radius-md, 0.375rem) | length | Радиус скругления углов подсказки. |
--hub-tooltip-color | var(--hub-ref-color-white, #fff) | color | Цвет текста подсказки. |
--hub-tooltip-font-family | var(--hub-ref-font-family-base, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif) | string | Tooltip font family |
--hub-tooltip-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | Размер шрифта текста подсказки. |
--hub-tooltip-font-weight | var(--hub-ref-font-weight-base, 400) | number | Tooltip font weight |
--hub-tooltip-line-height | var(--hub-ref-line-height-base, 1.5) | number | Максимальная ширина, после которой текст переносится. |
--hub-tooltip-max-width | 200px | length | Tooltip max width |
--hub-tooltip-opacity | 0.9 | number | Непрозрачность отображаемой подсказки. |
--hub-tooltip-padding-x | var(--hub-ref-space-2, 0.5rem) | length | Горизонтальный внутренний отступ подсказки. |
--hub-tooltip-padding-y | var(--hub-ref-space-1, 0.25rem) | length | Вертикальный внутренний отступ подсказки. |
--hub-tooltip-shadow | none | shadow | Tooltip box shadow |
--hub-tooltip-transition-duration | 0.15s | transition | Длительность плавного появления и исчезновения. |
--hub-tooltip-zindex | var(--hub-sys-zindex-tooltip, 1080) | number | Порядок наложения элемента подсказки. |