Angular 按钮库 | ng-hub-ui-buttons
面向 Angular 22 的完整按钮系统,基于 signals API——标准按钮、FAB、speed dial 与 overlay dropdown。除 ng-hub-ui-utils 外零依赖。
最后更新 2026年9月3日
概览
团队为何搜索这个库
当你需要一个统一、可主题化的按钮生态,覆盖从行内 CTA 到浮动操作 overlay 的所有交互模式,并希望它基于 Angular Signals、拥有一致的单一 API 时,请使用 ng-hub-ui-buttons。
安装
npm install ng-hub-ui-buttons跳转到
适用于
- 主要 CTA 按钮
- 浮动操作菜单
- 上下文菜单 dropdown
- 工具栏中的纯图标操作
关于 buttons
ng-hub-ui-buttons 是面向 Angular 22+ standalone 应用的零依赖按钮库。它提供 HubButtonComponent——可作为 <hub-button> 使用,也可作为原生宿主上的属性(<button hubButton>)(五种变体 × 六种颜色 × 四种尺寸)——HubFabComponent(九个固定位置)、HubSpeedDialComponent 以及 HubDropdownDirective(基于 overlay,由 ng-hub-ui-utils 的 OverlayService 驱动)。所有视觉属性都是 CSS 自定义属性,只需一份样式表覆盖即可为整个系统设置主题。
功能指南
Button Variants
Five visual styles (solid, outline, soft, ghost, link) × six semantic colours with size scale sm–xl.
示例:
Button Variants
Button Variants
<hub-button>) instead of the [hubButton] attribute.加载 / 忙碌状态
加载中的按钮会显示可替换的动画 SVG 加载图标,并完全不可交互 —— aria-busy、原生 disabled、移出 Tab 顺序,避免重复提交。
示例:
加载 / 忙碌状态
加载 / 忙碌状态
自定义颜色与变体
color 输入是开放集合:用 hub-btn-color-rules() mixin 注册任意强调色,或用 hub-btn-variant-rules() 打造全新外观。
示例:
自定义颜色与变体
自定义颜色与变体
Floating Action Button
Fixed-position circular button with nine placement presets and optional scroll-collapse behaviour.
示例:
Floating Action Button
Floating Action Button
Speed Dial
Expandable FAB that reveals a stack of action items. Closes on Escape or backdrop click.
示例:
Speed Dial
Speed Dial
Overlay Dropdown
Directive-driven dropdown that attaches a template-ref panel to any trigger element via the overlay service.
示例:
Overlay Dropdown
Overlay Dropdown
一次只开一个下拉菜单
打开任一下拉菜单都会关闭已经打开的那个,无论它是怎么被打开的。点击外部关闭只覆盖了存在点击的情形;由代码打开的菜单会让两个面板同时留在页面上。
示例:
一次只开一个下拉菜单
一次只开一个下拉菜单
Click this box, open a menu, then press 1, 2 or 3. A keypress opens the menu from code with no click anywhere — the case the click-outside rule never covered.
CSS Variable Theming
Every visual detail — size, radius, shadow, colour — is a --hub-btn-* or --hub-dropdown-* custom property.
示例:
CSS Variable Theming
CSS Variable Theming
核心特性
最近更改
Version 22.11.0 - 9/3/26, 12:00 AM
fixed: <button hubButton disabled> compiles. `disabled` and `loading` were plain input(false) with no transform, so the bare HTML spelling of a boolean attribute — which passes the empty string — failed with TS2322, on exactly the usage `disabled`'s own documentation promises to mirror. Both use booleanAttribute now.
Version 22.10.0 - 9/1/26, 12:00 AM
added: hubActionsAdapter, so a host library can have its row actions drawn with this library button and dropdown without either package depending on the other. The same arrangement hubFormControlAdapter already uses for a table inputs: the host describes what a row offers in neutral terms and this maps the description onto the real components. Register it where the host expects it, for ng-hub-ui-paginable: provideHubPaginableActions(hubActionsAdapter).
added: hub-actions-cell, the component that adapter creates. Public because creating a component is the honest way to assemble hubDropdown: it needs a host element and an ng-template, which is natural in a template and awkward imperatively.
fixed: Only one dropdown is open at a time, however it was opened. Closing on click-outside already made a second one usually replace the first, since opening it is itself a click outside the first. Usually is not a guarantee: a dropdown opened from code produces no such click, and both panels stayed up.
fixed: A click on a row action no longer reaches whatever surrounds it. Drawn inside a clickable row, such as a table row that opens a detail page, pressing an action navigated away and the action own effect was lost with the screen it happened on.
Version 22.9.4 - 9/1/26, 12:00 AM
changed: The homepage in the manifest points at this library own documentation page rather than at the site root. Metadata only.
Version 22.9.3 - 8/17/26, 12:00 AM
fixed: The published package declared no licence. An absent license field is not neutral: a registry reports it as unlicensed, which legally reads as all rights reserved. The intent was always MIT; it is now stated in package.json and carried in a LICENSE file that ships with the package.
Version 22.9.2 - 8/8/26, 12:00 AM
fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.
Version 22.9.1 - 7/26/26, 12:00 AM
fixed: Declared the real ng-hub-ui-utils peer range (>=22.7.0); the previous >=1.0.0 floor resolved to a utils major without resolveHubAccent.
Version 22.8.0 - 7/5/26, 12:00 AM
added: The typed color API now also accepts neutral, light and dark (the CSS already shipped), so <hub-button color="neutral"> — and fab/speed-dial/dropdown — type-check.
added: Overridable hover + a new pressed (:active) state via --hub-btn-hover-bg/-border/-color and --hub-btn-active-bg/-border/-color — retune one interaction colour with a single line; existing visuals preserved.
added: The element form <hub-button> is now keyboard-accessible: it advertises role="button", a focusable tabindex and activates on Enter/Space; the [hubButton] attribute form on a native button/anchor stays free of redundant role/tabindex.
Version 22.5.0 - 6/30/26, 12:00 AM
changed: `HubBtnComponent` renamed to `HubButtonComponent` (the old name stays as a deprecated alias).
changed: `HubButtonComponent` now has a dual selector `hub-button, [hubButton]` — usable as `<hub-button>` or as an attribute on a native host (`<button hubButton>` / `<a hubButton>`), with the loading spinner rendered in both forms.
deprecated: `HubBtnDirective` is replaced by `HubButtonComponent` (which now matches `[hubButton]`); it remains exported as a deprecated alias.
Version 22.2.0 - 6/23/26, 12:00 AM
changed: `HubBtnComponent` selector renamed from `hub-btn` to `hub-button`.
changed: `HubBtnDirective` selector renamed from `[hubBtn]` to `[hubButton]`.
fixed: `peerDependencies`: `ng-hub-ui-utils` corrected to `>=1.0.0` to match its actual published versioning scheme.
Version 22.1.0 - 6/23/26, 12:00 AM
added: Public SCSS mixin API at `ng-hub-ui-buttons/styles`: `hub-btn-variant-rules()` generic primitive and `hub-btn-color-rules()` convenience mixin for registering custom semantic colors without modifying the library.
added: `hub-fab-color()`, `hub-dropdown-panel-color()`, `hub-dropdown-item-color()` and their `*-rules` counterparts for extending FAB and dropdown colors.
added: `HubDropdownDirective`: panel closes automatically on scroll to keep alignment with the trigger.
changed: `HubSpeedDialComponent`: trigger slot renamed from `slot="trigger"` to `hubTrigger` attribute.
changed: `HubSpeedDialItemComponent` and `HubDropdownItemComponent`: `icon` input now expects a CSS class string rendered via `<i [class]="icon()">` instead of raw text.
fixed: `HubFabComponent`: uses `position: static` when nested inside `HubSpeedDialComponent` instead of `position: fixed`.
Version 22.0.0 - 6/17/26, 12:00 AM
added: `HubBtnComponent` and `HubBtnDirective` with five variants, six colours, four sizes, loading and icon-only modes.
added: `HubFabComponent` with nine-position grid, scroll-collapse and CSS logical properties for RTL.
added: `HubSpeedDialComponent` and `HubSpeedDialItemComponent` with two-way `isOpen` model and Escape close.
added: `HubDropdownDirective` with eight placements, click/hover triggers, `closeOnSelect` and backdrop close.
added: `HubDropdownPanelComponent`, `HubDropdownItemComponent`, `HubDropdownDividerComponent`, `HubDropdownHeaderComponent` helper components.
added: SCSS token system: `:where()` zero-specificity defaults + `@each` semantic colour loops for all variants.