面向 Standalone 应用的 Angular 组件库
可复用的 Angular UI 组件,适用于 standalone 应用、Angular Signals 工作流、无障碍访问、CSS 变量,并提供覆盖模态框、数据表格、导航、日历等内容的生产级文档。
npm install ng-hub-ui-modal<hub-panels /><hub-avatar /><hub-skeleton />--hub-sys-color-primarynpm i ng-hub-ui-*一个库,适配每个品牌
每个组件都由 CSS 变量驱动。选择一个主题,看着整个站点重新上色——无需重新构建,也无需额外 CSS。
试试看——这会切换整个站点的实时主题。
为什么选择 Hub UI?
完全无障碍
所有组件均遵循 WCAG 2.1 准则,支持完整的键盘导航和屏幕阅读器。
由 CSS 变量驱动
每个组件都暴露 CSS 自定义属性。覆盖任意令牌即可匹配你的品牌——更改会即时层叠应用到所有主题。
TypeScript 优先
全程严格类型。享受完整的自动补全、编译期安全和一流的开发者体验。
Standalone 架构
基于 Angular 现代的 standalone 组件模型构建。只导入你需要的部分,保持打包体积精简。
真实的代码,真实的组件
只需几行模板即可。左侧的代码片段会在右侧渲染出实时组件。
全部组件
探索为真实产品团队、可复用设计系统和易维护的 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 工具库,包含浮层、焦点管理、管道和翻译辅助函数。
几秒钟即可上手
安装一个组件
npm install ng-hub-ui-modal以 standalone 方式导入
import { HubModalModule } from 'ng-hub-ui-modal';使用 CSS 变量自定义
--hub-modal-border-radius: 1rem;