Компонент Tabs, Pills и Accordion для Angular | ng-hub-ui-panels
Компонент панелей контента для Angular, который отображается как вкладки, pills или accordion, с маршрутизацией, реактивными формами, навигацией с клавиатуры и CSS-переменными.
Справочник API
Вот полный контракт panels: всё, что можно привязать, прослушать, спроецировать и тематизировать, собрано в одном месте. Подключите то, что нужно, и оформите так, как хотите — это standalone и дружит с сигналами.
Входные свойства
Настройте panels с помощью 20 входных свойств. Привязывайте их, как любой @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: панели от края до края без внешних рамок и скругления. |
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'). Опустите для нейтрального оповещения. |
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. |
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). |
События
Реагируйте на то, что делает panels, — 4 событий, к которым можно подключить вашу логику.
| Имя | Тип | Описание |
|---|---|---|
panelChange | EventEmitter<PanelChangeEvent> | hub-panels: вызывается, когда пользователь активирует (открывает) другую панель. Предоставляет { current, prev }. |
selectPanel | EventEmitter<PanelComponent> | hub-panel: вызывается, когда панель становится активной. |
deselectPanel | EventEmitter<PanelComponent> | hub-panel: вызывается, когда панель перестаёт быть активной. |
removed | EventEmitter<PanelComponent> | hub-panel: вызывается, когда панель удаляется через кнопку ✕ или клавишу Delete. |
Шаблоны
Сделайте его своим — 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> |
CSS-переменные
Тематизируйте каждый пиксель с помощью 36 CSS-переменных. Переопределите их в :root или ограничьте их областью обёртки.
Компоновка и границы
Общая структура контейнера: направление полосы, отступы содержимого и общие токены границ.
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--hub-panels-flex-direction | row | string | Направление полосы заголовков относительно содержимого. rowrow-reverse |
--hub-panels-border-width | 1px | length | Ширина границы, используемая полосой вкладок и активной вкладкой. 02px |
--hub-panels-border-color | #dee2e6 | color | Цвет границы полосы вкладок и содержимого. #ced4davar(--bs-border-color) |
--hub-panels-border-radius | 0.375rem | length | Радиус скругления углов заголовков вкладок и содержимого. 00.5rem |
--hub-panels-content-bg | #fff | color | Фон области содержимого. transparent#f8f9fa |
--hub-panels-header-bg | var(--hub-panels-content-bg) | color | Фон области полосы tabs/pills позади неактивных заголовков и зон-разделителей. #f8f9favar(--bs-tertiary-bg) |
--hub-panels-content-box-shadow | none | shadow | Тень, применяемая к обёртке области содержимого. none0 0.5rem 1rem rgba(0,0,0,.08) |
--hub-panels-content-padding-x | 1rem | length | Горизонтальный внутренний отступ области содержимого. 0.75rem1.5rem |
--hub-panels-content-padding-y | 1rem | length | Вертикальный внутренний отступ области содержимого. 0.75rem1.5rem |
Заголовки вкладок
Типографика, отступы и цветовые состояния отдельных заголовков tab/pill.
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--hub-panels-tab-font-weight | 500 | number | Насыщенность шрифта метки заголовка. 400600 |
--hub-panels-tab-padding-x | 1rem | length | Горизонтальный внутренний отступ внутри заголовка. 0.75rem1.25rem |
--hub-panels-tab-padding-y | 0.5rem | length | Вертикальный внутренний отступ внутри заголовка. 0.375rem0.75rem |
--hub-panels-tab-color | #212529 | color | Цвет текста неактивного заголовка. #495057var(--bs-body-color) |
--hub-panels-tab-bg | transparent | color | Фон неактивного заголовка; оставьте прозрачным, чтобы был виден --hub-panels-header-bg. transparent#f8f9fa |
--hub-panels-tab-color-active | #0d6efd | color | Цвет текста активного заголовка. var(--bs-primary)#0b5ed7 |
--hub-panels-tab-bg-active | #fff | color | Фон активного заголовка; по умолчанию совпадает с поверхностью содержимого, чтобы активная вкладка сливалась с панелью. var(--bs-primary)var(--hub-panels-content-bg) |
--hub-panels-tab-bg-hover | #f8f9fa | color | Фон заголовка при наведении. #e9eceftransparent |
--hub-panels-tab-border-color-active | #0d6efd | color | Цвет границы активной вкладки. var(--bs-primary)#0b5ed7 |
--hub-panels-tab-active-shadow | 0 -0.25rem 0.5rem rgba(0, 0, 0, 0.06) | shadow | Тень возвышения, используемая активной вкладкой в горизонтальном режиме boxed tabs. none0 -0.25rem 0.75rem rgba(0,0,0,.12) |
--hub-panels-tab-active-shadow-vertical | -0.25rem 0 0.5rem rgba(0, 0, 0, 0.06) | shadow | Тень возвышения, используемая активной вкладкой в вертикальном режиме boxed tabs. none-0.25rem 0 0.75rem rgba(0,0,0,.12) |
--hub-panels-tab-focus-ring-color | rgba(13, 110, 253, 0.25) | color | Цвет кольца фокуса для фокуса с клавиатуры. rgba(13,110,253,.4) |
Pills
Токены, специфичные для визуализации pills.
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--hub-panels-pill-border-radius | 50rem | length | Радиус скругления углов заголовков pill. 0.5rem999px |
--hub-panels-pill-bg-active | #0d6efd | color | Фон активного pill. var(--bs-primary)#198754 |
--hub-panels-pill-color-active | #fff | color | Цвет текста активного pill. #fff#000 |
--hub-panels-pill-gap | 0.5rem | length | Промежуток между заголовками pill. 0.25rem0.75rem |
--hub-panels-pill-content-border-width | 0 | length | Ширина границы карточки содержимого pills; установите её равной общей ширине границы, чтобы восстановить панель с границей. 01px |
--hub-panels-nav-content-gap | 1rem | length | Промежуток между полосой pills и карточкой содержимого (встроенный промежуток в вертикальном режиме). 0.75rem1.5rem |
Множественный выбор
Компоновка блочного множественного режима, когда стили tabs/pills допускают несколько активных заголовков одновременно.
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--hub-panels-pane-min-width | 16rem | length | Минимальная ширина каждой открытой панели до того, как область содержимого начнёт прокручиваться по горизонтали. 12rem20rem |
--hub-panels-pane-min-height | 8rem | length | Минимальная высота каждой открытой панели в вертикальной компоновке. 6rem12rem |
--hub-panels-pane-gap | 0 | length | Промежуток между несколькими блоками панелей. 01rem |
Режим accordion
Токены для визуализации accordion. Каждый возвращается к соответствующей переменной --hub-accordion-* для совместимости с темой.
| Переменная | По умолчанию | Тип | Описание |
|---|---|---|---|
--hub-panels-accordion-active-color | #0c63e4 | color | Цвет текста раскрытого заголовка accordion. var(--bs-primary) |
--hub-panels-accordion-active-bg | #e7f1ff | color | Фон раскрытого заголовка accordion. var(--bs-primary-bg-subtle) |
--hub-panels-accordion-btn-padding-x | 1.25rem | length | Горизонтальный внутренний отступ кнопки раскрытия. 1rem1.5rem |
--hub-panels-accordion-btn-padding-y | 1rem | length | Вертикальный внутренний отступ кнопки раскрытия. 0.75rem1.25rem |
--hub-panels-accordion-btn-icon-transform | rotate(-180deg) | string | Трансформация, применяемая к шеврону при раскрытии. rotate(180deg)scaleY(-1) |
--hub-panels-accordion-collapse-transition-duration | 0.25s | transition | Длительность анимации раскрытия/сворачивания. 0.2s0.35s |
Стилизация и тематизация
Примеры стилизации пока не задокументированы. В этом разделе будут рецепты кастомизации и примеры тематизации.