Angular Kanban 看板组件 | ng-hub-ui-board

Angular Kanban 看板组件，支持拖放、自定义卡片模板、列工作流和 CSS 变量，适用于业务仪表盘。

最后更新 2026年8月17日

概览

团队为何搜索这个库

这个 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

Press Space or Enter to grab the card, use the arrow keys to move it, Space or Enter to drop it, Escape to cancel the move.

交互

用户交互能力

示例:
卡片拖放

卡片拖放

To Do
Research

Analyze requirements

Design

Create UI mockups

In Progress
Development

Implement core features

Done
Planning

Initial meeting

Press Space or Enter to grab the card, use the arrow keys to move it, Space or Enter to drop it, Escape to cancel the move.

Last Event: None

列重新排序

列重新排序

To Do
Research

Analyze requirements

Design

Create UI mockups

In Progress
Development

Implement core features

Done
Planning

Initial meeting

Press Space or Enter to grab the card, use the arrow keys to move it, Space or Enter to drop it, Escape to cancel the move.

Last Reorder: None

卡片点击事件

卡片点击事件

To Do
Research

Analyze requirements

Design

Create UI mockups

In Progress
Development

Implement core features

Done
Planning

Initial meeting

Press Space or Enter to grab the card, use the arrow keys to move it, Space or Enter to drop it, Escape to cancel the move.

Last Clicked: None

看板事件

看板事件

To Do
Research

Analyze requirements

Design

Create UI mockups

In Progress
Development

Implement core features

Done
Planning

Initial meeting

Press Space or Enter to grab the card, use the arrow keys to move it, Space or Enter to drop it, Escape to cancel the move.

Event Log

No events yet. Interact with the board!

高级功能

滚动和高级行为

示例:
无限滚动

无限滚动

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

Press Space or Enter to grab the card, use the arrow keys to move it, Space or Enter to drop it, Escape to cancel the move.

Last Scroll End: None

模板

自定义外观

示例:
自定义卡片模板

自定义卡片模板

To Do
Research
Analyze requirements
ID: 1
Design
Create UI mockups
ID: 2
In Progress
Development
Implement core features
ID: 3
Done
Planning
Initial meeting
ID: 4
Press Space or Enter to grab the card, use the arrow keys to move it, Space or Enter to drop it, Escape to cancel the move.
自定义头部模板

自定义头部模板

To Do2
Research

Analyze requirements

Design

Create UI mockups

In Progress1
Development

Implement core features

Done1
Planning

Initial meeting

Press Space or Enter to grab the card, use the arrow keys to move it, Space or Enter to drop it, Escape to cancel the move.
自定义底部模板

自定义底部模板

To Do
Research

Analyze requirements

Design

Create UI mockups

In Progress
Development

Implement core features

Done
Planning

Initial meeting

Press Space or Enter to grab the card, use the arrow keys to move it, Space or Enter to drop it, Escape to cancel the move.
自定义卡片占位符

自定义卡片占位符

To Do
Research

Analyze requirements

Design

Create UI mockups

In Progress
Development

Implement core features

Done
Planning

Initial meeting

Press Space or Enter to grab the card, use the arrow keys to move it, Space or Enter to drop it, Escape to cancel the move.
Last action: Drag a card to see the custom placeholder
自定义列占位符

自定义列占位符

To Do
Research

Analyze requirements

Design

Create UI mockups

In Progress
Development

Implement core features

Done
Planning

Initial meeting

Press Space or Enter to grab the card, use the arrow keys to move it, Space or Enter to drop it, Escape to cancel the move.
Last action: Drag a column to see the custom placeholder
自定义拖拽预览

自定义拖拽预览

To Do
Research

Analyze requirements

Design

Create UI mockups

In Progress
Development

Implement core features

Done
Planning

Initial meeting

Press Space or Enter to grab the card, use the arrow keys to move it, Space or Enter to drop it, Escape to cancel the move.
Last action: Drag a card or column to see the custom preview

配置

board 配置选项

示例:
禁用排序

禁用排序

To Do
Research

Analyze requirements

Design

Create UI mockups

In Progress
Development

Implement core features

Done
Planning

Initial meeting

Press Space or Enter to grab the card, use the arrow keys to move it, Space or Enter to drop it, Escape to cancel the move.
自定义滚动内边距

自定义滚动内边距

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

Press Space or Enter to grab the card, use the arrow keys to move it, Space or Enter to drop it, Escape to cancel the move.
拖拽行为模式

拖拽行为模式

Try dragging cards or columns with different behaviors to see how the original element appears during drag.
To Do
Research

Analyze requirements

Design

Create UI mockups

In Progress
Development

Implement core features

Done
Planning

Initial meeting

Press Space or Enter to grab the card, use the arrow keys to move it, Space or Enter to drop it, Escape to cancel the move.
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

Press Space or Enter to grab the card, use the arrow keys to move it, Space or Enter to drop it, Escape to cancel the move.

核心特性

最近更改

Version 22.4.1 - 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.4.0 - 7/28/26, 12:00 AM

added: ARIA list semantics: the board host is role="list" named by the new boardLabel input, each column is a labelled role="group", each column body a role="list" and each card a role="listitem".

added: Keyboard card reorder: Space/Enter grabs a focused card, ArrowUp/ArrowDown move it within its column and ArrowLeft/ArrowRight to the adjacent column (honouring the same predicate/cardSortingDisabled rules as dragging), Space/Enter drops emitting the same onCardMoved payload as a pointer drop, and Escape cancels restoring the original position.

added: Visually hidden aria-live="polite" announcer for grab, move, drop, cancel and rejected targets (messages are English-only for now), plus a hidden usage hint linked from each focusable card.

added: New optional boardLabel input: accessible name of the board list container (default 'Board').

Version 22.3.0 - 7/7/26, 12:00 AM

changed: BREAKING (packaging): the theme SCSS now ships at ng-hub-ui-board/styles (was dist/board/src/lib/styles), so @use 'ng-hub-ui-board/styles' resolves — update any @use that reached into src/lib/styles.

changed: variant now accepts any colour: besides the built-in semantic accents, a registered custom accent or a literal colour (#hex, rgb(), oklch(), CSS named colour) is resolved through the shared resolveHubAccent helper from ng-hub-ui-utils.

changed: Internal: @HostBinding/@HostListener decorators replaced by the host metadata object (Angular style guide); no public API or behaviour change.

Version 22.2.1 - 7/2/26, 12:00 AM

fixed: Docs: css-variables-reference.md default values resynchronized with the actual code declarations, now guarded by the repo-level tokens-parity check.

Version 22.2.0 - 6/26/26, 12:00 AM

changed: Accent system migrated to the open-set local accent slot pattern: variant re-bases a single --hub-board-accent slot and the emphasis/subtle/on family is derived locally with color-mix, growing the built-in variants from 5 to the nine canonical accents and letting any custom ds accent recolour the drag/drop placeholder at runtime.

added: New tokens --hub-board-accent-on (grayscale contrast flip driven by the accent lightness) and --hub-board-accent-emphasis.

fixed: Accent color-mix derivation for --hub-board-accent-subtle migrated from srgb to oklch for perceptually uniform tints; the subtle tint is now derived at 12% (was 8%).

相关库

ng-hub-ui-sortable ng-hub-ui-modal ng-hub-ui-portal