Angular 标签、Pills 与手风琴组件 | ng-hub-ui-panels
Angular 内容面板组件，可渲染为标签、pills 或手风琴，支持路由、响应式表单、键盘导航和 CSS 变量。
交互式示例
探索实时示例，了解该库在常见 Angular 用例中的表现。
可视化形式
一个组件，三种视图：经典的下划线标签页、圆角胶囊和堆叠式手风琴展开面板——可通过单个 `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:
语义化标签强调色
条带布局
可将标题条带布局以适配任意外壳：在内容旁垂直堆叠、拉伸标题以填满宽度，或让溢出的条带可滚动。
垂直标签页
两端对齐标签页
可滚动标签页
面板管理
可禁用单个面板，并让用户通过 ✕ 控件和 Delete 键即时添加或移除面板。
禁用面板
可移除与动态面板
自定义模板
可通过 `hubPanelHeading` 指令用任意 Angular 模板替换纯文本标题——图标、徽章或交互式控件。
自定义标题模板
手风琴行操作
表单集成
一流的 ControlValueAccessor 支持可将激活的面板绑定到 Angular 的响应式表单和模板驱动表单。
响应式表单集成
多选
使用 `multiple` 时，可同时打开多个面板。在手风琴视图中它们会全部展开；在标签页/胶囊视图中，每个激活的标题都会开启自己的可见面板，而随后的非激活标题会保持分组并位于该面板上方，直到下一个激活的标题开启新的区块。
多选
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
手风琴选项
手风琴视图支持同时展开多个面板，以及没有外层修饰的边到边 `flush` 布局。
手风琴多开与无边框
无障碍
提供完整的键盘导航（方向键、Home、End、Delete）、可移动的 tabindex，以及针对 tablist 和手风琴展开模式的正确 ARIA 角色。
键盘导航
Focus a tab, then use ← → Home End. Press Delete on a removable tab to close it.