Справочник API

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

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

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

Имя	Тип	По умолчанию	Описание
`type`	`'tabs' \| 'pills' \| 'accordion' \| 'card'`	`'tabs'`	Визуализация контейнера: подчёркнутые tabs, скруглённые pills или составленные стопкой панели accordion.
`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. Значение по умолчанию для всего приложения задаётся через PanelsConfig.togglePosition.
`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`	`'primary' \| 'success' \| 'danger' \| 'warning' \| 'info'`	`undefined`	hub-panel: семантический цвет оповещения ('primary' \| 'success' \| 'danger' \| 'warning' \| 'info'). Опустите для нейтрального оповещения.
`fill`	`boolean`	`false`	Только card-панель: заполняет высоту родителя и позволяет телу прокручиваться, так что внутренняя область flex:1/min-height:0 (например, полоса вкладок + прокручиваемая панель) остаётся ограниченной. Родитель должен быть flex-колонкой.
`standalone`	`boolean (static attribute)`	`false`	Только card-панель, статический атрибут: исключает отдельный <hub-panel> из группы tabs/pills/accordion выше по шаблону, чтобы он отображался как обычная card, а не захватывался как скрытая вкладка.
`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> размещает свои вкладки вертикально вместо раскладки в ряд.

События

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

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

Шаблоны

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

Имя	Описание	Пример
`hubPanelHeading`	Помечает <ng-template> внутри hub-panel как пользовательский заголовок этой панели (ссылка в полосе для tabs/pills, кнопка раскрытия в accordion), заменяя текстовый input заголовка.	`<hub-panel> <ng-template hubPanelHeading> <i class="fa-solid fa-gear"></i> Settings <span class="badge text-bg-primary">3</span> </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>`