Angular 标签、Pills 与手风琴组件 | ng-hub-ui-panels

Angular 内容面板组件，可渲染为标签、pills 或手风琴，支持路由、响应式表单、键盘导航和 CSS 变量。

概览

团队为何搜索这个库

当你需要用同一套 API 实现标签、pills 和手风琴模式，并支持路由面板、响应式表单绑定、键盘导航和 CSS 变量主题时，请使用这个 Angular 面板组件。

安装

npm install ng-hub-ui-panels

跳转到

适用于

  • 设置页面
  • 产品详情标签
  • FAQ 手风琴
  • 仪表盘区块

关于 panels

ng-hub-ui-panels 将标签、pills 和手风琴统一到一个基于 Signals 构建的 standalone Angular 组件中。它支持路由面板、ControlValueAccessor 表单绑定、可滚动和垂直条带，以及完整的 --hub-panels-* 主题化。它取代了 ng-hub-ui-accordion，替换了后者的手风琴视图，同时保留 --hub-accordion-* token 契约。

功能指南

可视化形式

一个组件，三种视图：经典的下划线标签页、圆角胶囊和堆叠式手风琴展开面板——可通过单个 `type` 输入切换。

示例:
基础标签页

基础标签页

The first enabled panel is activated automatically.
Switch panels with a click or the arrow keys.
Each panel projects its own content.
Pills

Pills

Account settings live here.
Password and two-factor options.
Email and push preferences.
Accordion 视图

Accordion 视图

卡片与内容插槽

卡片与内容插槽

Project summary
No tabs, no pills — every panel is always visible and styled as a card.
Updated 2 hours ago
Team
The same hubPanelHeader / hubPanelFooter slots work in tabs, pills and accordion too.

A single standalone <hub-panel> (no container):

Standalone card
Dropped on its own, a hub-panel renders as a card by itself.
语义提示框

语义提示框

Heads up — a new version is available.
Your changes were saved successfully.
Your trial ends in 3 days.
Something went wrong while saving.
Tip: you can pin panels for quick access.
A neutral notice with no semantic variant.

An alert can use the same header/footer slots as a card:

Payment failed
We couldn't process your card. Update your billing details to keep your subscription active.
语义化标签强调色

语义化标签强调色

The active tab follows the success accent.
Switch tabs to see the accent move.
No per-colour CSS — one accent drives it all.
The active pill fills with the danger accent.
Hover the inactive pills too.
Everything derives from a single token.
A custom or built-in variant works the same way.
Active pill uses the warning accent.

条带布局

可将标题条带布局以适配任意外壳：在内容旁垂直堆叠、拉伸标题以填满宽度，或让溢出的条带可滚动。

示例:
垂直标签页

垂直标签页

Your public profile information.
Invoices and payment methods.
Manage members and roles.
两端对齐标签页

两端对齐标签页

Today's agenda.
The seven-day view.
The full month at a glance.
可滚动标签页

可滚动标签页

Content for section 1.
Content for section 2.
Content for section 3.
Content for section 4.
Content for section 5.
Content for section 6.
Content for section 7.
Content for section 8.

面板管理

可禁用单个面板，并让用户通过 ✕ 控件和 Delete 键即时添加或移除面板。

示例:
禁用面板

禁用面板

This panel is selectable.
This panel is disabled.
Arrow keys skip the disabled panel.
可移除与动态面板

可移除与动态面板

Content for Tab 1.
Content for Tab 2.
Content for Tab 3.

自定义模板

可通过 `hubPanelHeading` 指令用任意 Angular 模板替换纯文本标题——图标、徽章或交互式控件。

示例:
自定义标题模板

自定义标题模板

Twelve unread messages.
Messages you have sent.
Recently deleted items.

表单集成

一流的 ControlValueAccessor 支持可将激活的面板绑定到 Angular 的响应式表单和模板驱动表单。

示例:
响应式表单集成

响应式表单集成

Light theme preview.
Dark theme preview.
Follows the OS setting.
Selected value: "dark"

多选

使用 `multiple` 时，可同时打开多个面板。在手风琴视图中它们会全部展开；在标签页/胶囊视图中，每个激活的标题都会开启自己的可见面板，而随后的非激活标题会保持分组并位于该面板上方，直到下一个激活的标题开启新的区块。

示例:
多选

多选

Click an inactive tab to split the layout into a new panel block. Click an active tab to merge that block back.

Key metrics and a quick overview of the account.
Detailed statistics and charts for the period.
A chronological feed of recent activity.
Free-form notes shared with the team.
Open panels: [ "summary", "stats" ]
多个垂直标题

多个垂直标题

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
Public profile details and biography.
Invoices, payment methods and VAT details.
Members, roles and access levels.
Shared internal notes for the account.
Open tabs: [ "profile", "team" ]
Pills
Open items waiting for review.
Approvals and pending checks.
Publication options and scheduling.
Historical records and exported snapshots.
Open pills: [ "inbox", "publish" ]

手风琴选项

手风琴视图支持同时展开多个面板，以及没有外层修饰的边到边 `flush` 布局。

示例:
手风琴多开与无边框

手风琴多开与无边框

Standard delivery in 3–5 business days.

Free returns within 30 days.

无障碍

提供完整的键盘导航（方向键、Home、End、Delete）、可移动的 tabindex，以及针对 tablist 和手风琴展开模式的正确 ARIA 角色。

示例:
键盘导航

键盘导航

Focus a tab, then use ← → Home End. Press Delete on a removable tab to close it.

Use the arrow keys to move focus between headers.
Home and End jump to the first and last enabled header.
Press Delete while focused to remove this panel.

核心特性

最近更改

Version 22.1.0 - 6/22/26, 12:00 AM

added: New variant input on <hub-panels> selecting the semantic accent of the navigation strip (active/hover tab, active pill, active accordion header). Built-in variants (primary | success | danger | warning | info) use the exact design-system tints; any custom string is also accepted and derived with color-mix. Defaults to primary.

added: New group-accent tokens --hub-panels-accent, --hub-panels-accent-emphasis and --hub-panels-accent-subtle; the strip active/hover affordances now resolve through this single accent instead of being hard-wired to --hub-sys-color-primary*.

changed: The outer container chrome now inherits from the --hub-container-* base layer (re-base hook), so overriding a container token on a subtree re-bases the panels chrome. No visual change with default tokens.

Version 21.3.0 - 6/16/26, 12:00 AM

added: New alert appearance for a standalone <hub-panel>: appearance="alert" with a variant renders a semantic callout (role="alert").

added: New variant input (primary | success | danger | warning | info) selecting the alert colour; omit it for a neutral alert. Exported HubPanelAppearance and HubPanelVariant types.

added: New alert tokens (--hub-panels-alert-*); each variant re-points them at the --hub-sys-color-<variant>-{subtle,border-subtle,emphasis} family, so the alert inherits every theme and dark mode automatically.

Version 21.2.0 - 6/14/26, 12:00 AM

added: New card visualization (type="card"): a chromeless format with no navigation strip where every <hub-panel> is always visible and styled as a card.

added: A <hub-panel> can now be used standalone, outside any <hub-panels> container, rendering as a card on its own.

added: New content-slot directives hubPanelHeader and hubPanelFooter, rendering header/footer bands in every view, distinct from the navigational hubPanelHeading.

Version 21.1.1 - 6/12/26, 12:00 AM

added: New token: --hub-panels-header-bg, used by the tabs/pills strip background while defaulting to the panel surface.

added: New token: --hub-panels-pill-content-border-width, which controls the bordered card chrome in the pills content area.

changed: The active header background now defaults to --hub-panels-content-bg so the active tab/panel fusion stays aligned when themes retint the content surface.

changed: The pills content area is borderless by default; themes can opt back into a bordered card by overriding --hub-panels-pill-content-border-width.

Version 21.1.0 - 6/11/26, 12:00 AM

added: Multiple selection in the tabs/pills views: each open pane becomes its own bordered box placed next to the others (side by side when horizontal, stacked when vertical), with a per-pane minimum and scroll on overflow.

added: New tokens: --hub-panels-pane-min-width, --hub-panels-pane-min-height, --hub-panels-pane-gap, --hub-panels-nav-content-gap, --hub-panels-pill-gap.

fixed: Accordion content was always empty (two unselected ng-content slots); replaced with a single projection slot.

fixed: tabs and vertical tabs now render as a single bordered box around the strip and content together (not two boxes); pills gain spacing before a bordered content card.

changed: Smooth strip scrolling, not-allowed cursor on disabled headers, and full-width container.

Version 21.0.0 - 6/11/26, 12:00 AM

added: Initial release of ng-hub-ui-panels with tabs, pills and accordion visualizations.

added: ControlValueAccessor integration with single and multiple selection, bindValue and compareWith.

added: Routed panels via routerLink with route/full pathMatch and a <router-outlet> content area.

added: Keyboard navigation (arrows/Home/End/Delete), scrollable, vertical and justified strips.

added: Accordion view with multiple expansion, flush layout and an animated grid-based collapse.

added: Custom header templates through the hubPanelHeading directive and full --hub-panels-* theming.

changed: Supersedes ng-hub-ui-accordion; the accordion view honours the --hub-accordion-* token contract for theme compatibility.

相关库

ng-hub-ui-nav ng-hub-ui-stepper