API 参考

这里是 panels 的完整契约：你可以绑定、监听、投影和设置主题的一切，都集中在一处。接入你需要的部分，自定义你想要的样式——它是 standalone 的，且对 signal 友好。

输入

通过 29 个输入项精细调校 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 视图：无外边框或圆角的贴边面板。
`togglePosition`	`'start' \| 'end'`	`'end'`	用于 <hub-panels>（手风琴视图）：展开箭头位于标题行的哪一侧。"end"（默认）跟在标题之后，"start" 位于标题之前。仅视觉顺序改变——DOM 保持不变——且偏移使用逻辑属性，因此 "start" 在 LTR 中为左边缘，在 RTL 中为右边缘。可通过 PanelsConfig.togglePosition 设置全应用默认值。
`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'）。省略则为中性提示。
`fill`	`boolean`	`false`	仅 card 面板：填满父元素高度并让主体滚动，从而使内部的 flex:1/min-height:0 区域（例如标签条 + 滚动窗格）有界。父元素必须是 flex 列。
`standalone`	`boolean (static attribute)`	`false`	仅 card 面板，静态属性：让同一模板中的独立 <hub-panel> 脱离祖先 tabs/pills/accordion 分组，使其渲染为普通 card，而不是被捕获为隐藏标签页。
`value`	`unknown`	`id`	hub-panel：当容器用作表单控件时贡献的值。
`active`	`boolean (model)`	`false`	hub-panel：双向绑定的激活/展开状态。
`disabled`	`boolean`	`false`	hub-panel：阻止该面板被激活。
`removable`	`boolean`	`false`	hub-panel：显示一个 ✕ 操作提示，并允许使用 Delete 键移除。
`removeLabel`	`string`	`'Remove panel'`	hub-panel：为 ✕ 移除按钮朗读的无障碍名称（aria-label）；覆盖它以本地化该控件。
`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 类。
`items`	`HubTabNavItem[]`	`[]`	<hub-tab-nav> 中可选中的标签，按渲染顺序排列。每一项都是一个轻量的 { value, label, disabled?, id? } 描述符——该标签条本身不承载任何内容，因此当标签被选中时，它发出的正是 value。
`active`	`unknown (model)`	`undefined`	<hub-tab-nav> 的双向绑定选中值。设置它可预先选中某个标签，并通过 activeChange 读回；匹配的项即是其 value 与此值相等的那一项。
`appearance`	`'tabs' \| 'pills'`	`'tabs'`	<hub-tab-nav> 标签条的视觉外观：经典下划线式 'tabs'（默认）或圆角 'pills'。
`justified`	`boolean`	`false`	当为 true 时，<hub-tab-nav> 的各标签会拉伸以均分可用宽度。
`vertical`	`boolean`	`false`	当为 true 时，<hub-tab-nav> 标签条将各标签垂直堆叠，而不是横向排成一行。

输出

响应 panels 的行为——有 5 个事件可供你挂接逻辑。

名称	类型	描述
`panelChange`	`EventEmitter<PanelChangeEvent>`	hub-panels：当用户激活（打开）不同面板时触发。提供 { current, prev }。
`selectPanel`	`EventEmitter<PanelComponent>`	hub-panel：当面板变为激活状态时触发。
`deselectPanel`	`EventEmitter<PanelComponent>`	hub-panel：当面板不再处于激活状态时触发。
`removed`	`EventEmitter<PanelComponent>`	hub-panel：当面板通过 ✕ 按钮或 Delete 键被移除时触发。
`activeChange`	`EventEmitter<unknown>`	每当选中值发生变化时由 <hub-tab-nav> 发出（双向 active 模型中负责变更的一半），携带新选中项的 value。

模板

打造你自己的样式——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>`