Angular 标签、Pills 与手风琴组件 | ng-hub-ui-panels
Angular 内容面板组件，可渲染为标签、pills 或手风琴，支持路由、响应式表单、键盘导航和 CSS 变量。
样式
混入与样式
Override the most useful `--hub-panels-*` design tokens in a single include. Every parameter is OPTIONAL and defaults to `null`: only the parameters you pass are emitted, so the rest keep their defaults. For any token not exposed here, set the `--hub-panels-*` custom property directly — this mixin is sugar for the common knobs, not a replacement for the full token surface.
Theming with hub-panels-theme
The active tab follows the themed accent.
Switch panels with a click or the arrow keys.
The pane surface picks up the themed radius.
| 混入 | 参数 | 描述 |
|---|---|---|
| Theming | ||
hub-panels-theme() | $accent--hub-panels-accent$border-color--hub-panels-border-color$border-radius--hub-panels-border-radius$border-width--hub-panels-border-width$content-bg--hub-panels-content-bg$content-padding-x--hub-panels-content-padding-x$content-padding-y--hub-panels-content-padding-y$tab-bg-active--hub-panels-tab-bg-active$tab-color-active--hub-panels-tab-color-active$tab-font-size--hub-panels-tab-font-size$tab-padding-x--hub-panels-tab-padding-x$tab-padding-y--hub-panels-tab-padding-y$nav-gap--hub-panels-nav-gap | One-call token theming for `<hub-panels>` |
CSS 变量
用 149 个 CSS 变量为每一个像素设置主题。在 :root 处覆盖它们，或将其限定到某个容器范围内。
Accordion (legacy bridge)
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| 变量 | 默认值 | 类型 | 描述 |
|---|---|---|---|
--hub-accordion-active-bg | var(--hub-sys-color-primary-subtle, #e7f1ff) | color | Active/expanded header background color |
--hub-accordion-active-color | var(--hub-sys-color-primary, #0d6efd) | color | Active/expanded header text color |
--hub-accordion-bg | var(--hub-sys-surface-page, #fff) | color | Panel background color |
--hub-accordion-body-padding-x | 1.25rem | length | Horizontal body padding |
--hub-accordion-body-padding-y | var(--hub-ref-space-3, 1rem) | length | Vertical body padding |
--hub-accordion-border-color | var(--hub-sys-border-color-default, rgba(0, 0, 0, 0.125)) | color | Panel border color |
--hub-accordion-border-radius | var(--hub-ref-radius-sm, 0.25rem) | length | Panel border radius |
--hub-accordion-border-width | var(--hub-ref-border-width, 1px) | length | Panel border width |
--hub-accordion-btn-bg | var(--hub-sys-surface-page, #fff) | color | Header button background |
--hub-accordion-btn-color | var(--hub-sys-text-primary, #212529) | color | Header button text color |
--hub-accordion-btn-focus-box-shadow | 0 0 0 var(--hub-sys-focus-ring-width, 0.25rem) var(--hub-sys-focus-ring-color, rgba(13, 110, 253, 0.25)) | shadow | Focus ring shadow |
--hub-accordion-btn-icon-mask | url("data:image/svg+xml,…") | url | Chevron icon mask (down by default) |
--hub-accordion-btn-icon-transform | rotate(-180deg) | string | Expanded state icon transform (up direction) |
--hub-accordion-btn-icon-transition | transform 0.2s ease-in-out | transition | Icon transition |
--hub-accordion-btn-icon-width | 1.25rem | length | Icon size |
--hub-accordion-btn-padding-x | 1.25rem | length | Header horizontal padding |
--hub-accordion-btn-padding-y | var(--hub-ref-space-3, 1rem) | length | Header vertical padding |
--hub-accordion-collapse-transition-duration | 0.25s | transition | Collapse/expand transition duration |
--hub-accordion-collapse-transition-easing | cubic-bezier(0.4, 0, 0.2, 1) | transition | Collapse/expand transition easing |
--hub-accordion-color | var(--hub-sys-text-primary, #212529) | color | Panel text color |
--hub-accordion-icon-active-color | var(--hub-accordion-active-color, var(--hub-sys-color-primary, #0d6efd)) | color | Expanded icon color |
--hub-accordion-icon-color | var(--hub-accordion-btn-color, var(--hub-sys-text-primary, #212529)) | color | Collapsed icon color |
--hub-accordion-inner-border-radius | calc(var(--hub-accordion-border-radius, var(--hub-ref-radius-sm, 0.25rem)) - var(--hub-accordion-border-width, var(--hub-ref-border-width, 1px))) | length | Inner border radius |
--hub-accordion-transition | color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease | transition | Header visual transition |
Panels
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| 变量 | 默认值 | 类型 | 描述 |
|---|---|---|---|
--hub-panels-accent | var(--hub-sys-color-primary, #0d6efd) | color | Strip semantic accent — re-based per variant; drives every coloured affordance |
--hub-panels-accent-emphasis | color-mix(in oklch, var(--hub-panels-accent) 80%, var(--hub-sys-color-ink, #212529)) | color | Strip accent emphasis role (hover/active text) |
--hub-panels-accent-subtle | color-mix(in oklch, var(--hub-panels-accent) 12%, var(--hub-sys-surface-page, #ffffff)) | color | Strip accent subtle role (active accordion background) |
--hub-panels-accordion-active-bg | var(--hub-accordion-active-bg, var(--hub-panels-accent-subtle)) | color | 展开状态下 accordion 标题的背景。 |
--hub-panels-accordion-active-color | var(--hub-accordion-active-color, var(--hub-panels-accent-emphasis)) | color | 展开状态下 accordion 标题的文本颜色。 |
--hub-panels-accordion-bg | var(--hub-accordion-bg, var(--hub-sys-surface-page, #fff)) | color | Accordion view background |
--hub-panels-accordion-body-padding-x | var(--hub-accordion-body-padding-x, 1.25rem) | length | Accordion body horizontal padding |
--hub-panels-accordion-body-padding-y | var(--hub-accordion-body-padding-y, var(--hub-ref-space-3, 1rem)) | length | Accordion body vertical padding |
--hub-panels-accordion-border-color | var(--hub-accordion-border-color, var(--hub-sys-border-color-default, #dee2e6)) | color | Accordion border color |
--hub-panels-accordion-border-radius | var(--hub-accordion-border-radius, var(--hub-ref-radius-sm, 0.25rem)) | length | Accordion corner radius |
--hub-panels-accordion-border-width | var(--hub-accordion-border-width, var(--hub-ref-border-width, 1px)) | length | Accordion border width |
--hub-panels-accordion-btn-bg | var(--hub-accordion-btn-bg, var(--hub-sys-surface-page, #fff)) | color | Accordion header button background |
--hub-panels-accordion-btn-color | var(--hub-accordion-btn-color, var(--hub-sys-text-primary, #212529)) | color | Accordion header button text color |
--hub-panels-accordion-btn-focus-box-shadow | var(--hub-accordion-btn-focus-box-shadow, 0 0 0 var(--hub-sys-focus-ring-width, 0.25rem) var(--hub-sys-focus-ring-color, rgba(13, 110, 253, 0.25))) | shadow | Accordion header focus ring shadow |
--hub-panels-accordion-btn-icon-mask | var(--hub-accordion-btn-icon-mask, url("data:image/svg+xml | url | Accordion chevron icon mask |
--hub-panels-accordion-btn-icon-transform | var(--hub-accordion-btn-icon-transform, rotate(-180deg)) | string | 展开时应用于 chevron 的变换。 |
--hub-panels-accordion-btn-icon-transition | var(--hub-accordion-btn-icon-transition, transform 0.2s ease-in-out) | transition | Accordion chevron transition |
--hub-panels-accordion-btn-icon-width | var(--hub-accordion-btn-icon-width, 1.25rem) | length | Accordion chevron icon size |
--hub-panels-accordion-btn-padding-x | var(--hub-accordion-btn-padding-x, 1.25rem) | length | 展开按钮的水平内边距。 |
--hub-panels-accordion-btn-padding-y | var(--hub-accordion-btn-padding-y, var(--hub-ref-space-3, 1rem)) | length | 展开按钮的垂直内边距。 |
--hub-panels-accordion-collapse-transition-duration | var(--hub-accordion-collapse-transition-duration, 0.25s) | transition | 展开/折叠动画的持续时间。 |
--hub-panels-accordion-collapse-transition-easing | var(--hub-accordion-collapse-transition-easing, cubic-bezier(0.4, 0, 0.2, 1)) | transition | Accordion collapse animation easing |
--hub-panels-accordion-color | var(--hub-accordion-color, var(--hub-sys-text-primary, #212529)) | color | Accordion view text color |
--hub-panels-accordion-icon-active-color | var(--hub-accordion-icon-active-color, var(--hub-panels-accordion-active-color)) | color | Accordion active chevron color |
--hub-panels-accordion-icon-color | var(--hub-accordion-icon-color, var(--hub-panels-accordion-btn-color)) | color | Accordion chevron icon color |
--hub-panels-accordion-inner-border-radius | var(--hub-accordion-inner-border-radius, calc(var(--hub-panels-accordion-border-radius) - var(--hub-panels-accordion-border-width))) | length | Accordion inner corner radius |
--hub-panels-accordion-toggle-gutter | calc(var(--hub-panels-accordion-btn-icon-width) + var(--hub-panels-tab-gap)) | string | Space the trailing chevron reserves at the row.s end — whatever sits last in the header (heading or actions) keeps clear of the glyph; forced to 0px when togglePosition places the chevron at the start |
--hub-panels-accordion-transition | var(--hub-accordion-transition, color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease) | transition | Accordion header visual transition |
--hub-panels-alert-accent | var(--hub-sys-border-color-default, #dee2e6) | color | Alert accent stripe color |
--hub-panels-alert-accent-width | 0.25rem | color | Alert accent stripe width |
--hub-panels-alert-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Alert panel background |
--hub-panels-alert-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Alert panel border color |
--hub-panels-alert-border-radius | var(--hub-ref-radius-md, 0.375rem) | length | Alert panel corner radius |
--hub-panels-alert-color | var(--hub-sys-text-primary, #212529) | color | Alert panel text color |
--hub-panels-alert-content-align | flex-start | string | Alert body content cross-axis alignment (default top) |
--hub-panels-alert-content-direction | row | string | Alert body content flex direction (default row) |
--hub-panels-alert-content-gap | var(--hub-sys-gap-2, 0.5rem) | length | Gap between alert body content items |
--hub-panels-alert-content-justify | flex-start | string | Alert body content main-axis justification |
--hub-panels-alert-padding-x | var(--hub-ref-space-4, 1.5rem) | length | Alert panel horizontal padding |
--hub-panels-alert-padding-y | var(--hub-ref-space-3, 1rem) | length | Alert panel vertical padding |
--hub-panels-backward-btn-bg | url("data:image/svg+xml,…") | url | Strip backward scroll button icon |
--hub-panels-border-color | var(--hub-container-border-color, var(--hub-sys-border-color-default, #dee2e6)) | color | tabs 标签条和内容的边框颜色。 |
--hub-panels-border-radius | var(--hub-container-border-radius, var(--hub-ref-radius-md, 0.375rem)) | length | 标签头部和内容的圆角半径。 |
--hub-panels-border-width | var(--hub-container-border-width, var(--hub-ref-border-width, 1px)) | length | tabs 标签条和激活标签使用的边框宽度。 |
--hub-panels-body-gap | 0 | length | Gap between stacked children when the card body is a flex column (fill); no-op otherwise |
--hub-panels-card-accent | var(--hub-sys-border-color-default, #dee2e6) | color | Local accent slot for the semantic card tint ([variant]); set inline by the component |
--hub-panels-card-bg | var(--hub-sys-surface-page, #fff) | color | Card panel background |
--hub-panels-card-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Card panel border color |
--hub-panels-card-border-radius | var(--hub-ref-radius-md, 0.375rem) | length | Card panel corner radius |
--hub-panels-card-border-style | solid | border | Card panel border style (e.g. dashed for an empty-state card) |
--hub-panels-card-border-width | var(--hub-ref-border-width, 1px) | length | Card panel border width |
--hub-panels-card-box-shadow | var(--hub-sys-shadow-sm, 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)) | shadow | Card panel drop shadow |
--hub-panels-card-color | var(--hub-sys-text-primary, #212529) | color | Card panel text color |
--hub-panels-card-gap | var(--hub-ref-space-3, 1rem) | length | Gap between stacked cards |
--hub-panels-card-padding-x | var(--hub-ref-space-4, 1.5rem) | length | Card body horizontal padding |
--hub-panels-card-padding-y | var(--hub-ref-space-3, 1rem) | length | Card body vertical padding |
--hub-panels-content-bg | var(--hub-container-bg, var(--hub-sys-surface-page, #fff)) | color | 内容区域的背景。 |
--hub-panels-content-box-shadow | none | shadow | 应用于内容区域包装层的阴影。 |
--hub-panels-content-padding-x | var(--hub-container-padding-x, var(--hub-ref-space-3, 1rem)) | length | 内容区域的水平内边距。 |
--hub-panels-content-padding-y | var(--hub-container-padding-y, var(--hub-ref-space-3, 1rem)) | length | 内容区域的垂直内边距。 |
--hub-panels-flex-direction | row | string | 标题条相对于内容的方向。 |
--hub-panels-forward-btn-bg | url("data:image/svg+xml,…") | url | Strip forward scroll button icon |
--hub-panels-header-bg | var(--hub-panels-content-bg) | color | 非激活标题和间隔区域后方 tabs/pills 标签条区域的背景。 |
--hub-panels-nav-btn-height | 1.5rem | length | Scroll nav button height |
--hub-panels-nav-btn-width | 1.5rem | length | Scroll nav button width |
--hub-panels-nav-content-gap | var(--hub-ref-space-2, 0.5rem) | length | pills 标签条与内容卡片之间的间隙（垂直时为行内间隙）。 |
--hub-panels-nav-gap | 0 | length | Gap between nav items |
--hub-panels-nav-link-active-bg | var(--hub-panels-content-bg) | color | Active nav link background |
--hub-panels-nav-link-active-color | var(--hub-panels-accent) | color | Active nav link text color |
--hub-panels-nav-link-color | var(--hub-sys-text-primary, #212529) | color | Nav link text color |
--hub-panels-nav-link-disabled-color | var(--hub-sys-text-muted, #6c757d) | color | Disabled nav link text color |
--hub-panels-nav-link-hover-color | var(--hub-panels-accent-emphasis) | color | Nav link hover text color |
--hub-panels-nav-link-padding-x | var(--hub-ref-space-3, 1rem) | length | Nav link horizontal padding |
--hub-panels-nav-link-padding-y | var(--hub-ref-space-2, 0.5rem) | length | Nav link vertical padding |
--hub-panels-pane-gap | 0 | length | 多个面板区块之间的间隙。 |
--hub-panels-pane-min-height | 8rem | length | 垂直布局中每个打开面板的最小高度。 |
--hub-panels-pane-min-width | 16rem | length | 内容区域开始水平滚动前每个打开面板的最小宽度。 |
--hub-panels-panel-footer-content-justify | flex-end | string | Footer band content distribution (justify-content; the other band hooks are shared with the header) |
--hub-panels-panel-header-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Panel header/footer band background |
--hub-panels-panel-header-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Panel header/footer band border color |
--hub-panels-panel-header-border-width | var(--hub-ref-border-width, 1px) | length | Panel header/footer band border width |
--hub-panels-panel-header-color | var(--hub-sys-text-primary, #212529) | color | Panel header/footer band text color |
--hub-panels-panel-header-content-align | center | string | Header/footer band cross-axis alignment (align-items) |
--hub-panels-panel-header-content-direction | row | string | Header/footer band flex direction |
--hub-panels-panel-header-content-gap | var(--hub-sys-gap-3, 0.75rem) | length | Header/footer band content gap |
--hub-panels-panel-header-content-justify | flex-start | string | Header band content distribution (justify-content) |
--hub-panels-panel-header-font-weight | var(--hub-ref-font-weight-semibold, 600) | number | Panel header/footer band font weight |
--hub-panels-panel-header-padding-x | var(--hub-ref-space-4, 1.5rem) | length | Panel header/footer horizontal padding |
--hub-panels-panel-header-padding-y | var(--hub-ref-space-3, 1rem) | length | Panel header/footer vertical padding |
--hub-panels-pill-bg-active | var(--hub-panels-accent) | color | 激活 pill 的背景。 |
--hub-panels-pill-border-radius | var(--hub-ref-radius-pill, 50rem) | length | pill 头部的圆角半径。 |
--hub-panels-pill-color-active | var(--hub-panels-accent-on) | color | 激活 pill 的文本颜色。 |
--hub-panels-pill-content-border-width | 0 | length | pills 内容卡片的边框宽度；将其设置为共享边框宽度可恢复带边框的面板。 |
--hub-panels-pill-gap | var(--hub-ref-space-2, 0.5rem) | length | pill 头部之间的间隙。 |
--hub-panels-remove-btn-opacity | 0.6 | number | Remove button resting opacity |
--hub-panels-remove-btn-opacity-hover | 1 | number | Remove button hover opacity |
--hub-panels-strip-margin-top | var(--hub-ref-space-2, 0.5rem) | length | Tab strip top margin |
--hub-panels-tab-active-shadow | 0 -0.25rem 0.5rem rgba(0, 0, 0, 0.06) | shadow | 水平 boxed tabs 视图中激活标签使用的高度阴影。 |
--hub-panels-tab-active-shadow-vertical | -0.25rem 0 0.5rem rgba(0, 0, 0, 0.06) | shadow | 垂直 boxed tabs 视图中激活标签使用的高度阴影。 |
--hub-panels-tab-bg | transparent | color | 非激活头部的背景；保持透明以透出 --hub-panels-header-bg。 |
--hub-panels-tab-bg-active | var(--hub-panels-nav-link-active-bg) | color | 激活头部的背景；默认为内容表面，使激活标签与面板融为一体。 |
--hub-panels-tab-bg-disabled | transparent | color | Disabled tab background |
--hub-panels-tab-bg-hover | var(--hub-ref-surface-2, #f8f9fa) | color | 头部悬停时的背景。 |
--hub-panels-tab-border-color | transparent | color | Tab border color |
--hub-panels-tab-border-color-active | var(--hub-panels-accent) | color | 激活标签的边框颜色。 |
--hub-panels-tab-border-radius | var(--hub-panels-border-radius) | length | Tab corner radius |
--hub-panels-tab-border-end-radius | 0 | length | Trailing-edge corner radius of the active tab |
--hub-panels-tab-border-style | solid | border | Tab border style |
--hub-panels-tab-border-width | var(--hub-panels-border-width) | length | Tab border width |
--hub-panels-tab-color | var(--hub-panels-nav-link-color) | color | 非激活头部的文本颜色。 |
--hub-panels-tab-color-active | var(--hub-panels-nav-link-active-color) | color | 激活头部的文本颜色。 |
--hub-panels-tab-color-disabled | var(--hub-panels-nav-link-disabled-color) | color | Disabled tab text color |
--hub-panels-tab-color-hover | var(--hub-panels-nav-link-hover-color) | color | Tab hover text color |
--hub-panels-tab-focus-ring-color | var(--hub-sys-focus-ring-color, rgba(13, 110, 253, 0.25)) | color | 键盘聚焦时的聚焦环颜色。 |
--hub-panels-tab-focus-ring-width | var(--hub-sys-focus-ring-width, 0.25rem) | length | Tab focus ring width |
--hub-panels-tab-font-family | var(--hub-container-font-family, var(--hub-ref-font-family-base)) | string | Tab label font family (inherits container) |
--hub-panels-tab-font-size | var(--hub-container-font-size, var(--hub-ref-font-size-base, 1rem)) | length | Tab label font size (inherits container) |
--hub-panels-tab-font-weight | var(--hub-ref-font-weight-medium, 500) | number | 头部标签的字重。 |
--hub-panels-tab-gap | var(--hub-ref-space-2, 0.5rem) | length | Gap inside tab content |
--hub-panels-tab-line-height | var(--hub-ref-line-height-base, 1.5) | number | Tab label line height |
--hub-panels-tab-padding-x | var(--hub-panels-nav-link-padding-x) | length | 头部内部的水平内边距。 |
--hub-panels-tab-padding-y | var(--hub-panels-nav-link-padding-y) | length | 头部内部的垂直内边距。 |
--hub-panels-tab-transition | var(--hub-sys-transition-base, all 0.2s ease-in-out) | transition | Tab state transition |
--hub-tabs-gap | 0 | length | Gap between tabs in the <hub-tab-nav> strip |
--hub-tabs-indicator-color | var(--hub-panels-accent, var(--hub-sys-color-primary, #0d6efd)) | color | Active-tab underline / active-pill fill colour for <hub-tab-nav> |