Angular 22 · Standalone · 独立软件包

面向 Standalone 应用的 Angular 组件库

可复用的 Angular UI 组件,适用于 standalone 应用、Angular Signals 工作流、无障碍访问、CSS 变量,并提供覆盖模态框、数据表格、导航、日历等内容的生产级文档。

npm install ng-hub-ui-modal
真实、实时的组件。
这不是截图。
<hub-panels />
AL
GH
AT
<hub-avatar />
<hub-skeleton />
--hub-sys-color-primarynpm i ng-hub-ui-*
19组件
80+CSS 变量
7主题
v22Angular

一个库,适配每个品牌

每个组件都由 CSS 变量驱动。选择一个主题,看着整个站点重新上色——无需重新构建,也无需额外 CSS。

试试看——这会切换整个站点的实时主题。

AL
GH
AT
CSS 变量

为什么选择 Hub UI?

完全无障碍

所有组件均遵循 WCAG 2.1 准则,支持完整的键盘导航和屏幕阅读器。

由 CSS 变量驱动

每个组件都暴露 CSS 自定义属性。覆盖任意令牌即可匹配你的品牌——更改会即时层叠应用到所有主题。

TypeScript 优先

全程严格类型。享受完整的自动补全、编译期安全和一流的开发者体验。

Standalone 架构

基于 Angular 现代的 standalone 组件模型构建。只导入你需要的部分,保持打包体积精简。

真实的代码,真实的组件

只需几行模板即可。左侧的代码片段会在右侧渲染出实时组件。

模板
实时效果
The first enabled panel is activated automatically.
Switch panels with a click or the arrow keys.
Each panel projects its own content.

全部组件

探索为真实产品团队、可复用设计系统和易维护的 standalone 应用打造的 Angular 组件。

Modal

无障碍的 Angular 模态框组件,支持堆叠、全屏模式和模板。

Paginable

Angular 数据表格与分页列表,支持筛选、排序和服务端操作。

Sortable

Angular 可排序列表工具,适用于数组、FormArray 控件和拖放构建器。

Calendar

Angular 日历组件,适用于排期、事件和规划界面。

Avatar

Angular 头像组件,支持首字母、图片回退和状态指示。

Board

带拖放功能的 Angular 看板组件,适用于工作流界面。

Breadcrumbs

集成路由和自定义模板的 Angular 面包屑导航。

History

Angular 撤销与重做存储,适用于编辑器、表单和低代码构建器。

Nav

Angular 导航菜单,适用于侧边栏、下拉菜单、逐级面板和响应式布局。

Portal

Angular 传送门与浮层渲染,适用于抽屉、浮动面板和动态容器。

Skeleton

Angular 骨架占位符,支持预设、内联 DSL 模板和响应式微光布局。

Stepper

Angular 步进器组件,适用于向导表单、引导流程和多步校验流程。

Toast

支持定位、堆叠与自动关闭的 Angular toast 通知组件。

Buttons

面向多操作界面的 Angular 按钮、FAB、快速拨号与下拉指令。

Badges

用于标签、计数与状态指示的 Angular 徽章组件,可完全定制主题。

Panels

支持单个或多个展开及完整主题的 Angular 面板与手风琴组件。

Forms

具备丰富输入、下拉选择、校验与动态渲染的 Angular 表单库。

Milestones

支持垂直、水平与动画布局的 Angular 时间线与进度步骤组件。

Utils

Angular 工具库,包含浮层、焦点管理、管道和翻译辅助函数。

几秒钟即可上手

1

安装一个组件

npm install ng-hub-ui-modal
2

以 standalone 方式导入

import { HubModalModule } from 'ng-hub-ui-modal';
3

使用 CSS 变量自定义

--hub-modal-border-radius: 1rem;
阅读文档

使用 Hub UI 构建你的下一个 Angular UI

开源、模块化且生产就绪。今天就安装你的第一个组件。