Справочник API

Вот полный контракт panels: всё, что можно привязать, прослушать, спроецировать и тематизировать, собрано в одном месте. Подключите то, что нужно, и оформите так, как хотите — это standalone и дружит с сигналами.

Входные свойства

Настройте panels с помощью 40 входных свойств. Привязывайте их, как любой @Input в Angular.

Имя	Тип	По умолчанию	Описание
`type`	`'tabs' \| 'pills' \| 'accordion' \| 'card'`	`'tabs'`	Визуализация контейнера: подчёркнутые tabs, скруглённые pills, составленные стопкой панели accordion или всегда видимые cards без обрамления.
`vertical`	`boolean`	`false`	Размещает полосу заголовков вертикально рядом с содержимым (представления tabs / pills).
`justified`	`boolean`	`false`	Растягивает заголовки, чтобы они равномерно распределяли доступную ширину.
`scrollable`	`boolean`	`false`	Добавляет кнопки прокрутки назад/вперёд при переполнении полосы заголовков.
`isKeysAllowed`	`boolean`	`true`	Включает навигацию с клавиатуры (стрелки / Home / End / Delete).
`multiple`	`boolean`	`false`	Позволяет нескольким панелям быть активными одновременно. В представлении accordion они все разворачиваются; в представлениях tabs/pills каждый активный заголовок начинает видимый блок панели, а следующие неактивные заголовки остаются сгруппированными над этим блоком до тех пор, пока следующий активный заголовок не начнёт новый. Значение формы становится массивом.
`flush`	`boolean`	`false`	Представление accordion: панели от края до края без внешних рамок и скругления.
`togglePosition`	`'start' \| 'end'`	`'end'`	На <hub-panels> (режим accordion): с какой стороны строки заголовка находится шеврон раскрытия. «end» (по умолчанию) — после заголовка, «start» — перед ним. Меняется только визуальный порядок — DOM не затрагивается — а отступы логические, поэтому «start» — это левый край при LTR и правый при RTL. Значение по умолчанию для всего приложения задаётся через HubPanelsConfig.togglePosition.
`variant`	`HubPanelVariant \| string`	`undefined`	hub-panels: семантический акцент полосы навигации — ему следуют активная вкладка и её наведение, активная pill и активный заголовок accordion. Встроенные значения ('primary' \| 'success' \| 'danger' \| 'warning' \| 'info') используют оттенки дизайн-системы, но принимается любая строка: полоса читает --hub-sys-color-<variant> из вашего приложения. По умолчанию primary.
`bindValue`	`string`	`undefined`	Путь в точечной нотации, применяемый к значению каждой панели для получения передаваемого значения формы (например, 'meta.key').
`compareWith`	`(a: unknown, b: unknown) => boolean`	`(a, b) => a === b`	Сравнение на равенство, используемое для сопоставления значений формы со значениями панелей.
`heading`	`string`	`undefined`	hub-panel: текстовый заголовок. Игнорируется, когда предоставлен шаблон hubPanelHeading.
`appearance`	`'card' \| 'alert'`	`'card'`	hub-panel: внешний вид отдельной панели — 'card' (по умолчанию) или семантическое уведомление 'alert'. Игнорируется в видах tabs/pills/accordion.
`variant`	`HubPanelVariant \| string`	`undefined`	hub-panel: семантический акцент панели — окрашивает alert и тонирует всю card (отражается как data-variant). Встроенные значения ('primary' \| 'success' \| 'danger' \| 'warning' \| 'info') используют оттенки дизайн-системы, но принимается любая строка: панель читает --hub-sys-color-<variant> из вашего приложения. Опустите для нейтральной панели.
`fill`	`boolean`	`false`	Только card-панель: заполняет высоту родителя и позволяет телу прокручиваться, так что внутренняя область flex:1/min-height:0 (например, полоса вкладок + прокручиваемая панель) остаётся ограниченной. Родитель должен быть flex-колонкой.
`standalone`	`boolean (static attribute)`	`false`	Только card-панель, статический атрибут: исключает отдельный <hub-panel> из группы tabs/pills/accordion выше по шаблону, чтобы он отображался как обычная card, а не захватывался как скрытая вкладка.
`id`	`string`	`'hub-panel-<n>'`	hub-panel: id для ARIA-связи между вкладкой и её панелью (или заголовком accordion и его областью). Генерируется автоматически как hub-panel-<n>; задайте его, когда нужны стабильные id — для глубокой ссылки или собственного aria-controls.
`value`	`unknown`	`id`	hub-panel: значение, вносимое, когда контейнер используется как form control.
`active`	`boolean (model)`	`false`	hub-panel: двусторонне привязанное состояние active/expanded.
`disabled`	`boolean`	`false`	hub-panel: предотвращает активацию панели.
`removable`	`boolean`	`false`	hub-panel: показывает элемент ✕ и включает удаление клавишей Delete.
`removeLabel`	`string`	`'Remove panel'`	hub-panel: доступное имя (aria-label), объявляемое для кнопки удаления ✕; переопределите его для локализации элемента.
`routerLink`	`string \| string[]`	`undefined`	hub-panel: превращает панель в маршрутизируемую панель на основе <router-outlet>.
`queryParams`	`Params`	`undefined`	hub-panel: query-параметры, добавляемые при переходе по routerLink.
`pathMatch`	`'route' \| 'full'`	`'route'`	hub-panel: сравнение URL, используемое для пометки маршрутизируемой панели как активной.
`customClass`	`string`	`undefined`	hub-panel: дополнительные CSS-классы, применяемые как к элементу nav, так и к панели (pane).
`items`	`HubTabNavItem[]`	`[]`	Выбираемые вкладки <hub-tab-nav> в порядке отрисовки. Каждый элемент — это облегчённый дескриптор { value, label, disabled?, id? }; полоса не владеет содержимым, поэтому value — это то, что она испускает при выборе вкладки.
`active`	`unknown (model)`	`undefined`	Двусторонне связанное выбранное значение <hub-tab-nav>. Установите его, чтобы заранее выбрать вкладку, и считывайте обратно через activeChange; соответствующий элемент — это тот, чьё value равно этому значению.
`appearance`	`'tabs' \| 'pills'`	`'tabs'`	Визуальное оформление полосы <hub-tab-nav>: классические подчёркнутые 'tabs' (по умолчанию) или скруглённые 'pills'.
`justified`	`boolean`	`false`	Когда true, вкладки <hub-tab-nav> растягиваются, равномерно распределяя между собой доступную ширину.
`vertical`	`boolean`	`false`	Когда true, полоса <hub-tab-nav> размещает свои вкладки вертикально вместо раскладки в ряд.
`mode`	`HubSidePanelMode`	`'side'`	<hub-side-panel>: 'side' закрепляет панель и сужает содержимое, освобождая для неё место; 'over' размещает её поверх края содержимого без подложки, блокировки прокрутки и ловушки фокуса.
`position`	`HubSidePanelPosition`	`'end'`	<hub-side-panel>: логический край контейнера, у которого находится панель, — 'end' означает правый край в LTR и левый при dir="rtl".
`open`	`boolean (model)`	`false`	<hub-side-panel>: двустороннее состояние открытия. Закрытие скрывает панель, не уничтожая проецируемое содержимое, поэтому чат или форма внутри сохраняют своё состояние.
`closeOnEscape`	`boolean`	`true`	<hub-side-panel>: закрывает ли панель нажатие Escape внутри неё. Escape, нажатая на странице, никогда не перехватывается, а если элемент управления уже обработал клавишу, панель остаётся открытой.
`breakpoint`	`number`	`768`	<hub-side-panel>: ширина контейнера в px, ниже которой панель side отображается как over, потому что закреплённая панель на узком экране сдавила бы содержимое. 0 оставляет её закреплённой при любой ширине.
`autoFocus`	`boolean`	`false`	<hub-side-panel>: переносит ли открытие фокус в панель — на первый элемент с [autofocus], иначе на первый фокусируемый элемент, иначе на саму панель. По умолчанию выключено.
`role`	`HubSidePanelRole`	`'complementary'`	<hub-side-panel>: роль ориентира — 'complementary' рядом с основным содержимым страницы, 'region', если панель находится внутри него.
`ariaLabel`	`string`	`undefined`	<hub-side-panel>: доступное имя ориентира. Укажите его или ariaLabelledBy.
`ariaLabelledBy`	`string`	`undefined`	<hub-side-panel>: id элемента, который называет ориентир, обычно заголовок в слоте шапки.

События

Реагируйте на то, что делает panels, — 7 событий, к которым можно подключить вашу логику.

Имя	Тип	Описание
`panelChange`	`OutputEmitterRef<PanelChangeEvent>`	hub-panels: вызывается, когда пользователь активирует (открывает) другую панель. Предоставляет { current, prev }.
`selectPanel`	`OutputEmitterRef<HubPanelComponent>`	hub-panel: вызывается, когда панель становится активной.
`deselectPanel`	`OutputEmitterRef<HubPanelComponent>`	hub-panel: вызывается, когда панель перестаёт быть активной.
`removed`	`OutputEmitterRef<HubPanelComponent>`	hub-panel: вызывается, когда панель удаляется через кнопку ✕ или клавишу Delete.
`activeChange`	`OutputEmitterRef<boolean>`	hub-panel: change-часть двусторонней модели active, испускается с новым состоянием активности/раскрытия панели.
`activeChange`	`OutputEmitterRef<unknown>`	Испускается <hub-tab-nav> при каждом изменении выбранного значения (change-часть двусторонней модели active), передавая value вновь выбранного элемента.
`openChange`	`OutputEmitterRef<boolean>`	<hub-side-panel>: половина изменения двусторонней модели open; генерируется с новым состоянием независимо от того, кто его изменил (привязка, Escape, toggle() или close()).

Методы

Управляйте panels из кода — 6 методов его программного интерфейса.

Имя	Сигнатура	Возвращает	Описание
`HubPanelsComponent.selectPanel`	`selectPanel(panel: HubPanelComponent): void`	—	Активирует панель так же, как клик пользователя: помечает её активной, выполняет переход для маршрутизируемой панели и испускает panelChange. С отключёнными панелями ничего не делает.
`HubPanelsComponent.togglePanel`	`togglePanel(panel: HubPanelComponent): void`	—	Переключает панель в виде accordion с учётом multiple: без multiple открытие одной панели сворачивает остальные.
`HubPanelsComponent.removePanel`	`removePanel(panel: HubPanelComponent, options?: { reselect?: boolean; emit?: boolean }): void`	—	Удаляет панель из группы. reselect решает, займёт ли её место другая панель, emit — сообщать ли об удалении через panelChange.
`HubPanelsComponent.removePanelAndRefocus`	`removePanelAndRefocus(panel: HubPanelComponent): void`	—	Удаляет панель и передаёт фокус клавиатуры ближайшему оставшемуся заголовку, так что удаление никогда не роняет фокус на body. Именно это вызывают кнопка ✕ и клавиша Delete.
`HubSidePanelComponent.toggle`	`toggle(force?: boolean): void`	—	Открывает или закрывает панель; передайте true или false, чтобы задать состояние вместо переключения.
`HubSidePanelComponent.close`	`close(): void`	—	Закрывает панель. Если фокус был внутри, он возвращается к элементу, который владел им при открытии панели.

Шаблоны

Сделайте его своим — 3 слотов шаблона позволяют проецировать собственную разметку.

Имя	Описание	Пример
`hubPanelHeading`	Помечает <ng-template> внутри hub-panel как пользовательский заголовок этой панели (ссылка в полосе для tabs/pills, кнопка раскрытия в accordion), заменяя текстовый input заголовка.	`<hub-panel> <ng-template hubPanelHeading> <i class="fa-solid fa-gear"></i> Settings <hub-badge color="primary" shape="rounded">3</hub-badge> </ng-template> Panel content </hub-panel>`
`hubPanelHeader / hubPanelFooter`	Помечает элемент внутри hub-panel как полосу заголовка/подвала содержимого панели. Отображается во всех представлениях (tabs, pills, accordion, card), в отличие от hubPanelHeading.	`<hub-panel> <div hubPanelHeader>Card title</div> Card content <div hubPanelFooter>Actions</div> </hub-panel>`
`type="card"`	Минималистичное представление в виде карточек: без панели навигации, все панели всегда видны. hub-panel также можно использовать автономно, вне hub-panels, где он отображается как карточка.	`<hub-panels type="card"> <hub-panel>…</hub-panel> <hub-panel>…</hub-panel> </hub-panels>`