Компонент навигационного меню для Angular | ng-hub-ui-nav
Навигационный компонент для Angular с выпадающими меню, панелями drill-down, адаптивным сворачиванием, интеграцией с Router и тематизацией через CSS-переменные.
Справочник API
Вот полный контракт nav: всё, что можно привязать, прослушать, спроецировать и тематизировать, собрано в одном месте. Подключите то, что нужно, и оформите так, как хотите — это standalone и дружит с сигналами.
Входные свойства
Настройте nav с помощью 4 входных свойств. Привязывайте их, как любой @Input в Angular.
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
itemsОбязательно | HubNavItem[] | — | Массив элементов навигации для отрисовки. Каждый элемент определяет свой тип (link, dropdown, header, separator, custom), label, route, icon, badge, children и многое другое. |
config | Partial<HubNavConfig> | {} | Частичные переопределения конфигурации, объединяемые с глобальными значениями по умолчанию. Управляет ориентацией, триггером выпадающего списка, режимом сворачивания, breakpoint, позицией и многим другим. |
navClass | string | '' | Дополнительный CSS-класс, применяемый к элементу контейнера nav. |
itemTemplate | TemplateRef<HubNavItemTemplateContext> | null | null | Необязательный пользовательский шаблон для отрисовки элементов nav через input-привязку. Директива hubNavItemTemplate имеет приоритет над этим input. |
События
Реагируйте на то, что делает nav, — 5 событий, к которым можно подключить вашу логику.
| Имя | Тип | Описание |
|---|---|---|
itemClick | OutputEmitterRef<HubNavItem> | Вызывается при клике по элементу link. Предоставляет нажатый HubNavItem. |
dropdownOpen | OutputEmitterRef<HubNavItem> | Вызывается при открытии элемента dropdown. |
dropdownClose | OutputEmitterRef<HubNavItem> | Вызывается при закрытии элемента dropdown. |
mobileToggle | OutputEmitterRef<boolean> | Вызывается при переключении мобильной панели. Предоставляет true при открытии, false при закрытии. |
panelChange | OutputEmitterRef<HubNavPanelEvent> | Вызывается при открытии, закрытии, углублении (drill-down) или возврате панели. Предоставляет элемент, индекс панели и тип действия. |
Шаблоны
Сделайте его своим — 3 слотов шаблона позволяют проецировать собственную разметку.
| Имя | Описание | Пример |
|---|---|---|
hubNavStart | Проецирует пользовательское содержимое в слот start. Горизонтально: визуальное начало (слева в LTR, справа в RTL). Вертикально: верх основной колонки. | <hub-nav [items]="items">
<ng-template hubNavStart let-collapsed="collapsed">
<img src="logo.svg" alt="Brand" />
@if (!collapsed) { <span>App Name</span> }
</ng-template>
</hub-nav> |
hubNavEnd | Проецирует пользовательское содержимое в слот end. Горизонтально: визуальный конец (справа в LTR, слева в RTL). Вертикально: низ основной колонки. | <hub-nav [items]="items">
<ng-template hubNavEnd>
<button type="button">Sign out</button>
</ng-template>
</hub-nav> |
hubNavItemTemplate | Переопределяет отрисовку элемента по умолчанию пользовательским шаблоном. Получает HubNavItemTemplateContext со свойствами $implicit (item), active, expanded и depth. | <hub-nav [items]="items">
<ng-template hubNavItemTemplate let-item let-active="active">
<span [class.fw-bold]="active">{{ item.label }}</span>
@if (item.badge) { <span class="badge">{{ item.badge }}</span> }
</ng-template>
</hub-nav> |
CSS-переменные
Тематизируйте каждый пиксель с помощью 42 CSS-переменных. Переопределите их в :root или ограничьте их областью обёртки.
Компоновка
Управление общими размерами nav, внутренними отступами и интервалами.
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--hub-nav-height | 3.5rem | length | Высота панели навигации. 3rem4remauto |
--hub-nav-padding-x | 1rem | length | Горизонтальный внутренний отступ контейнера nav. 0.5rem1.5rem2rem |
--hub-nav-padding-y | 0.5rem | length | Вертикальный внутренний отступ контейнера nav. 0.25rem0.75rem1rem |
--hub-nav-gap | 0.25rem | length | Промежуток между элементами nav. 00.5rem1rem |
Цвета и фон
Управление цветовой схемой и границами nav.
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--hub-nav-bg | #fff | color | Цвет фона панели навигации. #f8f9fatransparentvar(--hub-sys-surface-page) |
--hub-nav-color | #212529 | color | Базовый цвет текста навигации. #333#fffvar(--hub-sys-text-primary) |
--hub-nav-border-color | #dee2e6 | color | Цвет границы панели навигации. transparent#cccvar(--hub-sys-border-color-default) |
Элементы
Стилизация отдельных элементов навигации во всех состояниях.
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--hub-nav-item-padding-x | 1rem | length | Горизонтальный внутренний отступ внутри элементов nav. 0.5rem1.25rem1.5rem |
--hub-nav-item-padding-y | 0.5rem | length | Вертикальный внутренний отступ внутри элементов nav. 0.25rem0.75rem1rem |
--hub-nav-item-color | #212529 | color | Цвет текста элементов nav. #495057#fffinherit |
--hub-nav-item-border-radius | 0.25rem | length | Радиус скругления элементов nav. 00.375rem50rem |
--hub-nav-item-hover-bg | rgba(0, 0, 0, 0.04) | color | Цвет фона при наведении. #e9ecefrgba(255, 255, 255, 0.1)transparent |
--hub-nav-item-hover-color | #0d6efd | color | Цвет текста при наведении. #0a58ca#fffvar(--hub-sys-color-primary) |
--hub-nav-item-active-bg | #0d6efd | color | Цвет фона, когда элемент активен. #0a58catransparentvar(--hub-sys-color-primary) |
--hub-nav-item-active-color | #fff | color | Цвет текста, когда элемент активен. #0d6efd#212529var(--hub-sys-text-inverse) |
--hub-nav-item-disabled-color | #6c757d | color | Цвет текста отключённых элементов. #adb5bdvar(--hub-sys-text-muted) |
--hub-nav-item-disabled-opacity | 0.65 | number | Прозрачность отключённых элементов. 0.50.41 |
Выпадающий список
Настройка внешнего вида и позиционирования панели выпадающего списка.
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--hub-nav-dropdown-bg | #fff | color | Цвет фона панелей выпадающего списка. #f8f9fa#343a40var(--hub-sys-surface-elevated) |
--hub-nav-dropdown-border-color | #dee2e6 | color | Цвет границы панелей выпадающего списка. transparent#ccc |
--hub-nav-dropdown-border-radius | 0.375rem | length | Радиус скругления панелей выпадающего списка. 00.25rem0.5rem |
--hub-nav-dropdown-shadow | 0 0.5rem 1rem rgba(0, 0, 0, 0.15) | shadow | Тень панелей выпадающего списка. none0 4px 8px rgba(0,0,0,0.1)0 1rem 3rem rgba(0,0,0,0.175) |
--hub-nav-dropdown-min-width | 12rem | length | Минимальная ширина панелей выпадающего списка. 10rem15rem200px |
Бренд
Стилизация области слота бренда.
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--hub-nav-brand-font-size | 1.25rem | length | Размер шрифта текста бренда. 1rem1.5rem2rem |
--hub-nav-brand-font-weight | 600 | number | Насыщенность шрифта текста бренда. 400700800 |
--hub-nav-brand-color | #212529 | color | Цвет текста бренда. #fff#0d6efdinherit |
Мобильная панель
Конфигурация адаптивной мобильной панели навигации.
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--hub-nav-mobile-bg | #fff | color | Цвет фона мобильной панели. #f8f9fa#212529var(--hub-sys-surface-page) |
--hub-nav-mobile-width | 18rem | length | Ширина выдвижной мобильной панели. 15rem20rem80vw |
--hub-nav-mobile-backdrop-bg | rgba(0, 0, 0, 0.5) | color | Цвет затемнения позади мобильной панели. rgba(0, 0, 0, 0.3)rgba(0, 0, 0, 0.75)transparent |
--hub-nav-mobile-transition | 300ms ease | transition | Тайминг перехода для анимации открытия/закрытия мобильной панели. 200ms ease-in-out400ms ease150ms linear |
Accordion и иконки
Вертикальный отступ accordion и размер иконок.
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--hub-nav-accordion-indent | 1rem | length | Левый отступ на каждый уровень вложенности в вертикальном режиме accordion. 0.5rem1.5rem2rem |
--hub-nav-icon-size | 1.25rem | length | Размер иконок элементов навигации. 1rem1.5rem2rem |
--hub-nav-icon-gap | 0.5rem | length | Промежуток между иконкой и текстом метки. 0.25rem0.75rem1rem |
Панель
Стилизация многоуровневой навигации со стопкой панелей.
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--hub-nav-panel-width | 16rem | length | Ширина каждой панели по умолчанию. 14rem18rem20rem |
--hub-nav-panel-zindex | 100 | number | Порядок наложения панелей (должен быть ниже z-index выпадающего списка). 50100200 |
--hub-nav-panel-bg | var(--hub-sys-surface-page, #fff) | color | Цвет фона панелей. #f8f9fa#fffvar(--hub-sys-surface-elevated) |
--hub-nav-panel-color | var(--hub-sys-text-primary, #212529) | color | Цвет текста внутри панелей. #333#fffinherit |
--hub-nav-panel-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Цвет границы между панелями. transparent#ccc |
--hub-nav-panel-shadow | inset 4px 0 8px -4px rgba(0, 0, 0, 0.1) | shadow | Тень панелей. none2px 0 4px rgba(0,0,0,0.05) |
--hub-nav-panel-header-height | 3rem | length | Высота заголовка панели. 2.5rem3.5rem4rem |
--hub-nav-panel-header-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Цвет фона заголовка панели. #fff#e9eceftransparent |
--hub-nav-panel-back-color | var(--hub-sys-text-secondary, #6c757d) | color | Цвет кнопки «назад» в заголовке панели. #212529#0d6efdinherit |
--hub-nav-panel-back-hover-bg | rgba(0, 0, 0, 0.04) | color | Фон при наведении для кнопок заголовка панели. #e9ecefrgba(0,0,0,0.08) |
Стилизация и тематизация
Примеры стилизации пока не задокументированы. В этом разделе будут рецепты кастомизации и примеры тематизации.