API 参考

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

输入

通过 34 个输入项精细调校 buttons。像绑定任意 Angular @Input 一样绑定它们。

名称	类型	默认值	描述
`variant (hub-button)`	`'solid' \| 'outline' \| 'soft' \| 'ghost' \| 'link'`	`'solid'`	按钮的视觉风格：solid、outline、soft、ghost 或 link。
`color (hub-button)`	`'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'neutral' \| 'light' \| 'dark' \| string`	`'primary'`	按钮的语义强调色。开放集合：九个内置强调色中的任意一个、通过 hub-btn-color-rules() 注册的自定义强调色、CSS 命名颜色，或字面值（#hex、rgb()、oklch()、var(...)）。它填充 --hub-btn-accent 槽位，所有角色颜色均由该槽位派生。
`size (hub-button)`	`'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	按钮的尺寸 token：sm、md、lg 或 xl。
`loading (hub-button)`	`boolean`	`false`	显示动画 spinner，并将按钮同时标记为忙碌与禁用：反映 aria-busy="true" 和原生 disabled 属性，将按钮移出 Tab 顺序并阻止指针/键盘激活，使进行中的提交无法触发第二次。
`disabled (hub-button)`	`boolean`	`false`	禁用按钮，在宿主元素上映射原生 disabled 属性。
`color (hub-fab)`	`HubSemanticColor`	`'primary'`	FAB 背景的语义强调色。通过 --hub-fab-accent 槽位接受内置强调色或任何自定义/字面颜色。
`size (hub-fab)`	`'mini' \| 'standard' \| 'large'`	`'standard'`	圆形 FAB 的直径：mini、standard 或 large。
`extended (hub-fab)`	`boolean`	`false`	将 FAB 渲染为扩展的胶囊形，在图标旁显示所投影的 [slot=label] 内容。
`position (hub-fab)`	`'top-start' \| 'top-center' \| 'top-end' \| 'middle-start' \| 'center' \| 'middle-end' \| 'bottom-start' \| 'bottom-center' \| 'bottom-end'`	`'bottom-end'`	FAB 在视口中的固定位置，基于九槽位网格；使用 CSS 逻辑属性实现，以支持 RTL。
`collapseOnScroll (hub-fab)`	`boolean`	`false`	为 true 时，扩展态 FAB 会在页面滚动超过 50px 后折叠为仅图标。
`disabled (hub-fab)`	`boolean`	`false`	禁用 FAB，应用 hub-fab-disabled 外观。
`color (hub-speed-dial)`	`HubSemanticColor`	`'primary'`	绘制在 speed dial 触发 FAB 上的语义强调色。接受内置强调色或任何自定义/字面颜色。
`size (hub-speed-dial)`	`'mini' \| 'standard' \| 'large'`	`'standard'`	触发 FAB 的尺寸：mini、standard 或 large。
`position (hub-speed-dial)`	`HubFabPosition`	`'bottom-end'`	speed dial 在九槽位 FAB 网格上的固定视口位置。
`direction (hub-speed-dial)`	`'up' \| 'down' \| 'left' \| 'right'`	`'up'`	操作项从触发器展开的方向：up、down、left 或 right。
`trigger (hub-speed-dial)`	`'click' \| 'hover'`	`'click'`	打开 speed dial 的交互方式：click 点击切换；hover 在 mouseenter 时打开、mouseleave 时关闭。
`isOpen (hub-speed-dial)`	`boolean (two-way model)`	`false`	speed dial 可双向绑定的打开状态（model 信号）。按下 Escape 会自动将其关闭。
`icon (hub-speed-dial-item)`必填	`string`	—	操作图标的 CSS 类字符串，以 <i [class]="icon()"> 的形式渲染在条目按钮内。未设置标签时也用作 aria-label 的回退。
`label (hub-speed-dial-item)`	`string`	`''`	显示在操作按钮旁的工具提示标签；同时用作其无障碍 aria-label。
`color (hub-speed-dial-item)`	`HubSemanticColor \| 'default'`	`'default'`	操作按钮的语义强调色；'default' 保持中性外观。自定义/字面颜色通过 --hub-speed-dial-item-accent 槽位生效。
`disabled (hub-speed-dial-item)`	`boolean`	`false`	禁用该操作项按钮；禁用期间不会发出 itemClick。
`hubDropdown ([hubDropdown])`必填	`TemplateRef<any>`	—	在 body 层级浮层面板内渲染的 ng-template，以 [hubDropdown]="tpl" 的形式绑定。
`placement ([hubDropdown])`	`'top-start' \| 'top' \| 'top-end' \| 'start' \| 'end' \| 'bottom-start' \| 'bottom' \| 'bottom-end'`	`'bottom-start'`	面板相对于触发元素的放置位置；浮层会先尝试映射的位置，并逐一回退，直至找到适配视口的位置。
`trigger ([hubDropdown])`	`'click' \| 'hover'`	`'click'`	打开下拉菜单的交互方式：click 点击切换；hover 在 mouseenter 时打开、mouseleave 时关闭。
`closeOnSelect ([hubDropdown])`	`boolean`	`true`	为 true 时，在面板内容内的任意点击都会自动关闭下拉菜单。
`disabled ([hubDropdown])`	`boolean`	`false`	阻止下拉菜单打开。
`offsetY ([hubDropdown])`	`number`	`4`	触发器与面板之间沿放置轴向的偏移量（像素）。
`panelClass ([hubDropdown])`	`string`	`''`	在默认的 hub-dropdown-overlay 类之外，为浮层面板额外添加的 CSS 类。
`isOpen ([hubDropdown])`	`boolean (two-way model)`	`false`	下拉菜单可双向绑定的打开状态（model 信号）。在按下 Escape、点击外部、点击背景遮罩和页面滚动时自动关闭。
`color (hub-dropdown-panel)`	`HubSemanticColor \| 'default'`	`'default'`	面板顶部边框的语义强调色；'default' 保持中性边框。
`color (hub-dropdown-item)`	`HubSemanticColor \| 'default'`	`'default'`	条目标签颜色的语义强调色；'default' 继承面板颜色。
`icon (hub-dropdown-item)`	`string \| undefined`	`undefined`	可选的图标 CSS 类字符串，以 <i [class]="icon()"> 的形式渲染在标签之前。
`disabled (hub-dropdown-item)`	`boolean`	`false`	禁用该菜单项；点击会被忽略，且不会发出 itemClick。
`selected (hub-dropdown-item)`	`boolean`	`false`	显示一个对勾指示器，将该条目标记为已选中。

输出

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

名称	类型	描述
`fabClick (hub-fab)`	`OutputEmitterRef<void>`	为 FAB 激活声明的输出。当前实现内部从不发出它——请改为在 <hub-fab> 上绑定原生 (click) 事件。
`isOpenChange (hub-speed-dial)`	`OutputEmitterRef<boolean>`	每当 isOpen model 变化时发出新的打开状态（双向绑定的配套输出）。
`opened (hub-speed-dial)`	`OutputEmitterRef<void>`	在 speed dial 打开后发出。
`closed (hub-speed-dial)`	`OutputEmitterRef<void>`	在 speed dial 关闭后发出，包括通过 Escape 键关闭的情况。
`itemClick (hub-speed-dial-item)`	`OutputEmitterRef<void>`	当操作项按钮被激活时发出。
`isOpenChange ([hubDropdown])`	`OutputEmitterRef<boolean>`	每当 isOpen model 变化时发出新的打开状态（双向绑定的配套输出）。
`opened ([hubDropdown])`	`OutputEmitterRef<void>`	在浮层面板挂载且下拉菜单打开后发出。
`closed ([hubDropdown])`	`OutputEmitterRef<void>`	在下拉菜单关闭且浮层被销毁后发出（Escape、点击外部、滚动、背景遮罩或 closeOnSelect）。
`itemClick (hub-dropdown-item)`	`OutputEmitterRef<void>`	当菜单项被激活时发出；条目处于禁用状态时不发出。

模板

尚未记录任何模板。