Tabs, Pills и Accordion для Angular | ng-hub-ui-panels
Компонент панелей контента для Angular, который отображается как вкладки, pills или accordion, с маршрутизацией, реактивными формами, навигацией с клавиатуры и CSS-переменными.
Интерактивные примеры
Изучите живые примеры, показывающие, как библиотека ведёт себя в типичных сценариях использования Angular.
Визуализации
Один компонент, три представления: классические подчёркнутые tabs, скруглённые pills и стекированные панели раскрытия accordion — переключаемые через один input `type`.
Базовые вкладки
Pills
Режим accordion
Карточки и слоты контента
hubPanelHeader / hubPanelFooter slots work in tabs, pills and accordion too. A single standalone <hub-panel> (no container):
hub-panel renders as a card by itself. Слоты карточки (variant, flush, fill)
Row 1 — the body scrolls; the header stays put.
Row 2 — the body scrolls; the header stays put.
Row 3 — the body scrolls; the header stays put.
Row 4 — the body scrolls; the header stays put.
Row 5 — the body scrolls; the header stays put.
Row 6 — the body scrolls; the header stays put.
Row 7 — the body scrolls; the header stays put.
Row 8 — the body scrolls; the header stays put.
Row 9 — the body scrolls; the header stays put.
Row 10 — the body scrolls; the header stays put.
Row 11 — the body scrolls; the header stays put.
Row 12 — the body scrolls; the header stays put.
Row 13 — the body scrolls; the header stays put.
Row 14 — the body scrolls; the header stays put.
Row 15 — the body scrolls; the header stays put.
Row 16 — the body scrolls; the header stays put.
Row 17 — the body scrolls; the header stays put.
Row 18 — the body scrolls; the header stays put.
Row 19 — the body scrolls; the header stays put.
Row 20 — the body scrolls; the header stays put.
Семантические оповещения
An alert can use the same header/footer slots as a card:
Семантический акцент панели
Компоновка полосы
Компонуйте полосу заголовков под любой shell: располагайте её вертикально рядом с содержимым, растягивайте заголовки на всю ширину или делайте переполненную полосу прокручиваемой.
Вертикальные вкладки
Выровненные вкладки
Прокручиваемые вкладки
Управление панелями
Отключайте отдельные панели и позволяйте пользователям добавлять или удалять панели на лету с помощью элемента ✕ и клавиши Delete.
Отключённые панели
Удаляемые и динамические панели
Пользовательские шаблоны
Замените текстовый заголовок любым Angular-шаблоном — иконками, бейджами или интерактивными элементами управления — через директиву `hubPanelHeading`.
Пользовательские шаблоны заголовков
Действия строки аккордеона
Интеграция с формами
Полноценная поддержка ControlValueAccessor привязывает активную панель(и) к реактивным и шаблонным формам Angular.
Интеграция с реактивными формами
Множественный выбор
С `multiple` несколько панелей могут быть открыты одновременно. В представлении accordion все они разворачиваются; в представлениях tabs/pills каждый активный заголовок начинает собственную видимую панель, тогда как следующие неактивные заголовки остаются сгруппированными над этой панелью до тех пор, пока следующий активный заголовок не начнёт новый блок.
Множественный выбор
Click an inactive tab to split the layout into a new panel block. Click an active tab to merge that block back.
Несколько вертикальных заголовков
Each active header starts a new row-like vertical block. The blocks stack top-to-bottom, and the whole layout scrolls horizontally only when one row needs more width.
Tabs
Pills
Опции accordion
Представление accordion поддерживает несколько одновременно развёрнутых панелей и компоновку `flush` от края до края без внешнего обрамления.
Аккордеон: множественный режим и без рамок
Доступность
Полная навигация с клавиатуры (стрелки, Home, End, Delete), roving tabindex и корректные ARIA-роли как для паттерна tablist, так и для паттерна раскрытия accordion.
Навигация с клавиатуры
Focus a tab, then use ← → Home End. Press Delete on a removable tab to close it.