Angular 标签、Pills 与手风琴组件 | ng-hub-ui-panels
Angular 内容面板组件，可渲染为标签、pills 或手风琴，支持路由、响应式表单、键盘导航和 CSS 变量。
API 参考
这里是 panels 的完整契约：你可以绑定、监听、投影和设置主题的一切，都集中在一处。接入你需要的部分，自定义你想要的样式——它是 standalone 的，且对 signal 友好。
输入
通过 20 个输入项精细调校 panels。像绑定任意 Angular @Input 一样绑定它们。
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
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 | 应用于每个面板的 value 的点分路径，用于获取所发出的表单值（例如 '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：当容器用作表单控件时贡献的值。 |
active | boolean (model) | false | hub-panel：双向绑定的激活/展开状态。 |
disabled | boolean | false | hub-panel：阻止该面板被激活。 |
removable | boolean | false | hub-panel：显示一个 ✕ 操作提示，并允许使用 Delete 键移除。 |
routerLink | string | string[] | undefined | hub-panel：将面板转变为由 <router-outlet> 支撑的路由面板。 |
queryParams | Params | undefined | hub-panel：导航到 routerLink 时附加的查询参数。 |
pathMatch | 'route' | 'full' | 'route' | hub-panel：用于将路由面板标记为激活的 URL 比较。 |
customClass | string | undefined | hub-panel：同时应用于导航项和面板内容区的额外 CSS 类。 |
输出
响应 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 | 将 hub-panel 内的 <ng-template> 标记为该面板的自定义头部（tabs/pills 中的条目链接，accordion 中的展开按钮），以替代纯文本的 heading 输入。 | <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 | tabs 标签条和激活标签使用的边框宽度。 02px |
--hub-panels-border-color | #dee2e6 | color | tabs 标签条和内容的边框颜色。 #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 样式允许同时存在多个激活头部时，基于区块的 multiple 视图的布局。
| 变量 | 默认值 | 类型 | 描述 |
|---|---|---|---|
--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 | 展开时应用于 chevron 的变换。 rotate(180deg)scaleY(-1) |
--hub-panels-accordion-collapse-transition-duration | 0.25s | transition | 展开/折叠动画的持续时间。 0.2s0.35s |
样式与主题
尚未记录任何样式示例。本节将包含自定义方案和主题示例。