Angular Kanban 看板组件 | ng-hub-ui-board
Angular Kanban 看板组件，支持拖放、自定义卡片模板、列工作流和 CSS 变量，适用于业务仪表盘。
概览
团队为何搜索这个库
这个 Angular 看板组件帮助你交付 Kanban 风格的工作流，支持拖放、灵活的模板以及可扩展的交互模式，适用于真实的业务工具。
安装
npm install ng-hub-ui-board跳转到
适用于
- 任务看板
- 流水线跟踪
- CRM 工作流
- 运营仪表盘
关于 board
ng-hub-ui-board 专为需要超越静态列表的 Angular 产品而设计：任务跟踪、CRM 流水线、支持工作流或内部运营仪表盘。它在保持卡片渲染灵活的同时，维持一致的看板交互模型。
功能指南
基本用法
board 的基础功能
示例:
看板基础示例
看板基础示例
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
交互
用户交互能力
示例:
卡片拖放
卡片拖放
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Last Event: None
列重新排序
列重新排序
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Last Reorder: None
卡片点击事件
卡片点击事件
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Last Clicked: None
看板事件
看板事件
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Event Log
高级功能
滚动和高级行为
示例:
无限滚动
无限滚动
To Do
Research
Analyze requirements
Design
Create UI mockups
Scroll Item 1
Scroll to see more
Scroll Item 2
Scroll to see more
Scroll Item 3
Scroll to see more
Scroll Item 4
Scroll to see more
Scroll Item 5
Scroll to see more
Scroll Item 6
Scroll to see more
Scroll Item 7
Scroll to see more
Scroll Item 8
Scroll to see more
Scroll Item 9
Scroll to see more
Scroll Item 10
Scroll to see more
Scroll Item 11
Scroll to see more
Scroll Item 12
Scroll to see more
Scroll Item 13
Scroll to see more
Scroll Item 14
Scroll to see more
Scroll Item 15
Scroll to see more
Scroll Item 16
Scroll to see more
Scroll Item 17
Scroll to see more
Scroll Item 18
Scroll to see more
Scroll Item 19
Scroll to see more
Scroll Item 20
Scroll to see more
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Last Scroll End: None
模板
自定义外观
示例:
自定义卡片模板
自定义卡片模板
To Do
In Progress
Done
自定义头部模板
自定义头部模板
Research
Analyze requirements
Design
Create UI mockups
Development
Implement core features
Planning
Initial meeting
自定义底部模板
自定义底部模板
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
自定义卡片占位符
自定义卡片占位符
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
自定义列占位符
自定义列占位符
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
自定义拖拽预览
自定义拖拽预览
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
配置
board 配置选项
示例:
禁用排序
禁用排序
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
自定义滚动内边距
自定义滚动内边距
Scroll detection padding is handled internally (default 1px). To inspect it, you would typically look at source code, but implementation details like specific padding override are not exposed as inputs in the current version of HubBoardComponent. This example shows a board that *could* use it if the API exposed it, or demonstrates the standard behavior. (Note: The library source code defines `scrollDetectionPadding = 1` as private readonly, so it cannot be customized via input currently.)
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
拖拽行为模式
拖拽行为模式
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Current Behavior: collapse
- Collapse: The element completely disappears and its space is removed from the layout
- Best for: Clean interface where you only want to see the placeholder at the destination
样式
通过 CSS 变量自定义外观
示例:
CSS 自定义
CSS 自定义
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
核心特性
最近更改
暂无变更日志条目。