Компонент навигационного меню для Angular | ng-hub-ui-nav
Навигационный компонент для Angular с выпадающими меню, панелями drill-down, адаптивным сворачиванием, интеграцией с Router и тематизацией через CSS-переменные.
Стили
Миксины и стили
Override the most useful `--hub-nav-*` 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 their defaults. For any token not exposed here, set the `--hub-nav-*` custom property directly — this mixin is sugar for the common knobs, not a replacement for the full token surface.
Theming with hub-nav-theme
| Миксин | Параметры | Описание |
|---|---|---|
| Theming | ||
hub-nav-theme() | $accent--hub-nav-accent$bg--hub-nav-bg$color--hub-nav-color$border-color--hub-nav-border-color$gap--hub-nav-gap$padding-x--hub-nav-padding-x$padding-y--hub-nav-padding-y$item-color--hub-nav-item-color$item-active-bg--hub-nav-item-active-bg$item-active-color--hub-nav-item-active-color$item-border-radius--hub-nav-item-border-radius$item-font-size--hub-nav-item-font-size$item-padding-x--hub-nav-item-padding-x$item-padding-y--hub-nav-item-padding-y | One-call token theming for `<hub-nav>` |
CSS-переменные
Тематизируйте каждый пиксель с помощью 120 CSS-переменных. Переопределите их в :root или ограничьте их областью обёртки.
Nav
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-nav-accordion-indent | var(--hub-ref-space-3, 1rem) | length | Левый отступ на каждый уровень вложенности в вертикальном режиме accordion. |
--hub-nav-accordion-transition | 0.35s ease | transition | Accordion expand/collapse transition |
--hub-nav-badge-bg | var(--hub-sys-color-danger, #dc3545) | color | Badge background color |
--hub-nav-badge-border-radius | var(--hub-ref-radius-pill, 50rem) | length | Badge corner radius |
--hub-nav-badge-color | var(--hub-ref-color-white, #fff) | color | Badge text color |
--hub-nav-badge-font-size | var(--hub-ref-font-size-xs, 0.75rem) | length | Badge font size |
--hub-nav-badge-padding-x | 0.5em | length | Badge horizontal padding |
--hub-nav-badge-padding-y | 0.25em | length | Badge vertical padding |
--hub-nav-accent | var(--hub-sys-color-primary, #0d6efd) | color | Semantic accent — re-based per variant; drives the hover/active affordances |
--hub-nav-accent-subtle | color-mix(in oklch, var(--hub-nav-accent) 12%, var(--hub-sys-surface-page, #ffffff)) | color | Subtle accent tint — soft active/hover surface |
--hub-nav-bg | color-mix(in oklch, var(--hub-nav-accent) 5%, var(--hub-sys-surface-page, #fff)) | color | Цвет фона панели навигации. |
--hub-nav-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Цвет границы панели навигации. |
--hub-nav-border-style | solid | border | Navigation border style |
--hub-nav-border-width | 1px | length | Navigation border width |
--hub-nav-border-radius | 0 | length | Corner radius of the nav bar surface |
--hub-nav-box-shadow | none | shadow | Box shadow of the nav bar surface |
--hub-nav-brand-color | var(--hub-sys-text-primary, #212529) | color | Цвет текста бренда. |
--hub-nav-brand-font-size | var(--hub-ref-font-size-lg, 1.25rem) | length | Размер шрифта текста бренда. |
--hub-nav-brand-font-weight | var(--hub-ref-font-weight-semibold, 600) | number | Насыщенность шрифта текста бренда. |
--hub-nav-brand-padding-x | var(--hub-ref-space-2, 0.5rem) | length | Brand horizontal padding |
--hub-nav-caret-color | currentColor | color | Dropdown caret color |
--hub-nav-caret-size | 0.3rem | length | Dropdown caret size |
--hub-nav-color | var(--hub-sys-text-primary, #212529) | color | Базовый цвет текста навигации. |
--hub-nav-dropdown-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Цвет фона панелей выпадающего списка. |
--hub-nav-dropdown-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Цвет границы панелей выпадающего списка. |
--hub-nav-dropdown-border-radius | var(--hub-nav-item-border-radius, var(--hub-ref-radius-sm, 0.25rem)) | length | Радиус скругления панелей выпадающего списка. |
--hub-nav-dropdown-color | var(--hub-sys-text-primary, #212529) | color | Dropdown menu text color |
--hub-nav-dropdown-min-width | 12rem | length | Минимальная ширина панелей выпадающего списка. |
--hub-nav-dropdown-padding-y | var(--hub-ref-space-2, 0.5rem) | length | Dropdown menu vertical padding |
--hub-nav-dropdown-shadow | var(--hub-sys-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15)) | shadow | Тень панелей выпадающего списка. |
--hub-nav-dropdown-zindex | var(--hub-sys-zindex-dropdown, 1000) | number | Dropdown menu z-index |
--hub-nav-gap | var(--hub-ref-space-1, 0.25rem) | length | Промежуток между элементами nav. |
--hub-nav-header-color | var(--hub-sys-text-muted, #6c757d) | color | Section header text color |
--hub-nav-header-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | Section header font size |
--hub-nav-header-font-weight | var(--hub-ref-font-weight-semibold, 600) | number | Section header font weight |
--hub-nav-header-horizontal-padding-inline-start | 2rem | length | Horizontal header inline-start padding |
--hub-nav-header-margin-inline-start | var(--hub-ref-space-3, 1rem) | length | Section header inline-start margin |
--hub-nav-header-margin-top | var(--hub-ref-space-3, 1rem) | length | Section header top margin |
--hub-nav-header-padding-x | var(--hub-ref-space-3, 1rem) | length | Section header horizontal padding |
--hub-nav-header-padding-y | var(--hub-ref-space-1, 0.25rem) | length | Section header vertical padding |
--hub-nav-height | 3.5rem | length | Высота панели навигации. |
--hub-nav-horizontal-items-justify | center | string | Horizontal items justification |
--hub-nav-collapsed-justify | space-between | string | justify-content of items when the nav is collapsed (opt-in hook) |
--hub-nav-horizontal-items-overflow-x | auto | string | Horizontal items x-overflow |
--hub-nav-horizontal-items-overflow-y | hidden | string | Horizontal items y-overflow |
--hub-nav-horizontal-padding-x | 0 | length | Horizontal nav horizontal padding |
--hub-nav-horizontal-padding-y | 0 | length | Horizontal nav vertical padding |
--hub-nav-horizontal-panel-padding-x | 0 | length | Horizontal panel horizontal padding |
--hub-nav-horizontal-panel-padding-y | var(--hub-ref-space-2, 0.5rem) | length | Horizontal panel vertical padding |
--hub-nav-horizontal-row-gap | 0 | length | Horizontal nav row gap |
--hub-nav-icon-gap | var(--hub-ref-space-2, 0.5rem) | length | Промежуток между иконкой и текстом метки. |
--hub-nav-icon-size | var(--hub-ref-icon-size, 1em) | length | Размер иконок элементов навигации. |
--hub-nav-item-active-bg | var(--hub-nav-accent-subtle) | color | Цвет фона, когда элемент активен. |
--hub-nav-item-active-color | var(--hub-nav-accent) | color | Цвет текста, когда элемент активен. |
--hub-nav-item-active-indicator-color | var(--hub-nav-accent) | color | Active item indicator bar color |
--hub-nav-item-active-indicator-size | 3px | length | Active item indicator bar thickness |
--hub-nav-item-active-font-weight | var(--hub-ref-font-weight-semibold, 600) | number | Active item font weight |
--hub-nav-item-border-radius | var(--hub-ref-radius-sm, 0.25rem) | length | Радиус скругления элементов nav. |
--hub-nav-item-color | var(--hub-sys-text-primary, #212529) | color | Цвет текста элементов nav. |
--hub-nav-item-disabled-color | var(--hub-sys-text-muted, #6c757d) | color | Цвет текста отключённых элементов. |
--hub-nav-item-disabled-opacity | var(--hub-sys-opacity-disabled, 0.65) | number | Прозрачность отключённых элементов. |
--hub-nav-item-font-size | var(--hub-ref-font-size-base, 1rem) | length | Nav item font size |
--hub-nav-item-font-weight | var(--hub-ref-font-weight-base, 400) | number | Nav item font weight |
--hub-nav-item-hover-bg | color-mix(in oklch, var(--hub-nav-accent) 8%, var(--hub-sys-surface-page, #fff)) | color | Цвет фона при наведении. |
--hub-nav-item-hover-color | var(--hub-nav-accent) | color | Цвет текста при наведении. |
--hub-nav-item-padding-x | var(--hub-nav-mobile-item-padding-inline, 0.75rem) | length | Горизонтальный внутренний отступ внутри элементов nav. |
--hub-nav-item-padding-y | var(--hub-ref-space-2, 0.5rem) | length | Вертикальный внутренний отступ внутри элементов nav. |
--hub-nav-item-transition | var(--hub-sys-transition-fast, all 0.15s ease-in-out) | transition | Nav item state transition |
--hub-nav-mobile-backdrop-bg | rgba(0, 0, 0, 0.5) | color | Цвет затемнения позади мобильной панели. |
--hub-nav-mobile-bg | var(--hub-sys-surface-page, #fff) | color | Цвет фона мобильной панели. |
--hub-nav-mobile-color | var(--hub-sys-text-primary, #212529) | color | Mobile panel text color |
--hub-nav-mobile-transition | var(--hub-sys-transition-base, all 0.2s ease-in-out) | transition | Тайминг перехода для анимации открытия/закрытия мобильной панели. |
--hub-nav-mobile-width | 18rem | length | Ширина выдвижной мобильной панели. |
--hub-nav-mobile-zindex | var(--hub-sys-zindex-fixed, 1030) | number | Mobile panel z-index |
--hub-nav-padding-x | var(--hub-ref-space-3, 1rem) | length | Горизонтальный внутренний отступ контейнера nav. |
--hub-nav-padding-y | var(--hub-ref-space-2, 0.5rem) | length | Вертикальный внутренний отступ контейнера nav. |
--hub-nav-panel-back-color | var(--hub-sys-text-primary, #212529) | color | Цвет кнопки «назад» в заголовке панели. |
--hub-nav-panel-back-hover-bg | var(--hub-sys-state-hover-bg, rgba(0, 0, 0, 0.075)) | color | Фон при наведении для кнопок заголовка панели. |
--hub-nav-panel-back-size | 2rem | length | Panel back button size |
--hub-nav-panel-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Цвет фона панелей. |
--hub-nav-panel-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Цвет границы между панелями. |
--hub-nav-panel-border-width | 1px | length | Side panel border width |
--hub-nav-panel-color | var(--hub-sys-text-primary, #212529) | color | Цвет текста внутри панелей. |
--hub-nav-panel-header-bg | var(--hub-sys-surface-page, #fff) | color | Цвет фона заголовка панели. |
--hub-nav-panel-header-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Panel header border color |
--hub-nav-panel-header-font-size | var(--hub-ref-font-size-sm, 0.875rem) | length | Panel header font size |
--hub-nav-panel-header-font-weight | var(--hub-ref-font-weight-semibold, 600) | number | Panel header font weight |
--hub-nav-panel-header-height | 3rem | length | Высота заголовка панели. |
--hub-nav-panel-header-padding-x | var(--hub-ref-space-3, 1rem) | length | Panel header horizontal padding |
--hub-nav-panel-shadow | var(--hub-sys-shadow-sm, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)) | shadow | Тень панелей. |
--hub-nav-panel-transition | var(--hub-sys-transition-base, all 0.2s ease-in-out) | transition | Side panel slide transition |
--hub-nav-panel-width | 16rem | length | Ширина каждой панели по умолчанию. |
--hub-nav-panel-zindex | var(--hub-sys-zindex-dropdown, 1000) | number | Порядок наложения панелей (должен быть ниже z-index выпадающего списка). |
--hub-nav-scrollbar-color | transparent transparent | color | Scrollbar thumb/track color |
--hub-nav-scrollbar-thumb-color | transparent | color | Scrollbar thumb color |
--hub-nav-scrollbar-thumb-radius | var(--hub-ref-radius-pill, 50rem) | length | Scrollbar thumb corner radius |
--hub-nav-scrollbar-track-color | transparent | color | Scrollbar track color |
--hub-nav-scrollbar-webkit-size | 0 | length | WebKit scrollbar size |
--hub-nav-scrollbar-width | none | length | Scrollbar width visibility |
--hub-nav-separator-color | var(--hub-sys-border-color-default, #dee2e6) | color | Separator divider color |
--hub-nav-separator-margin-y | var(--hub-ref-space-2, 0.5rem) | length | Separator vertical margin |
--hub-nav-toggler-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Toggler button border color |
--hub-nav-toggler-border-radius | var(--hub-ref-radius-sm, 0.25rem) | length | Toggler button corner radius |
--hub-nav-toggler-color | var(--hub-sys-text-primary, #212529) | color | Toggler button icon color |
--hub-nav-toggler-font-size | var(--hub-ref-font-size-lg, 1.25rem) | length | Toggler button font size |
--hub-nav-toggler-padding-x | var(--hub-ref-space-2, 0.5rem) | length | Toggler button horizontal padding |
--hub-nav-toggler-padding-y | var(--hub-ref-space-1, 0.25rem) | length | Toggler button vertical padding |
--hub-nav-vertical-items-overflow-x | hidden | string | Vertical items x-overflow |
--hub-nav-vertical-items-overflow-y | auto | string | Vertical items y-overflow |
--hub-nav-vertical-panel-padding-block | 0 | length | Vertical panel block padding |
--hub-nav-vertical-panel-padding-inline | var(--hub-ref-space-2, 0.5rem) | length | Vertical panel inline padding |
--hub-nav-mobile-accordion-gap | 0.25rem | length | Gap between items in the mobile accordion list |
--hub-nav-mobile-accordion-nested-spacing | 0.25rem | length | Top margin before a nested (child) accordion group |
--hub-nav-mobile-body-padding-block-end | var(--hub-nav-padding-y, 0.5rem) | length | Bottom padding of the mobile panel body |
--hub-nav-mobile-body-padding-inline | var(--hub-nav-padding-x, 1rem) | length | Inline padding of the mobile panel body |
--hub-nav-mobile-border-color | rgba(0, 0, 0, 0.08) | color | Border color of the mobile drawer panel |
--hub-nav-mobile-item-padding-inline | 0.75rem | length | Inline padding of items inside the mobile panel (feeds --hub-nav-item-padding-x) |
--hub-nav-mobile-overlay-position | fixed | string | CSS position of the mobile overlay/panel |
--hub-nav-mobile-root-padding-inline | 0.5rem | length | Inline padding of the mobile root list |
--hub-nav-mobile-shadow | 0 0.5rem 1rem rgba(0, 0, 0, 0.18) | shadow | Box shadow of the mobile drawer panel |