Übersicht

Warum Teams nach dieser Bibliothek suchen

Diese Angular Board-Komponente hilft dir, Kanban-artige Workflows mit Drag-and-drop, flexiblen Templates und skalierbaren Interaktionsmustern für echtes Business-Tooling auszuliefern.

Installieren

npm install ng-hub-ui-board

Springen zu

Ideal für

Aufgaben-Boards
Pipeline-Verfolgung
CRM-Workflows
Operations-Dashboards

Über board

ng-hub-ui-board ist für Angular-Produkte konzipiert, die mehr als eine statische Liste benötigen: Aufgabenverfolgung, CRM-Pipelines, Support-Workflows oder interne Operations-Dashboards. Es hält das Rendern der Karten flexibel und bewahrt zugleich ein konsistentes Board-Interaktionsmodell.

Funktionsleitfäden

Grundlegende Verwendung

Grundlegende board-Funktionen

Beispiele:

Grundlegendes Board-Beispiel

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.

Interaktionen

Möglichkeiten der Benutzerinteraktion

Beispiele:

Karten per Drag & Drop

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

Spalten neu anordnen

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

Karten-Klickereignis

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

Board-Ereignisse

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!

Erweiterte Funktionen

Scrollen und erweitertes Verhalten

Beispiele:

Unendliches Scrollen

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

Templates

Erscheinungsbild anpassen

Beispiele:

Benutzerdefinierte Kartenvorlage

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.

Benutzerdefinierte Kopfzeilenvorlage

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.

Benutzerdefinierte Fußzeilenvorlage

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.

Benutzerdefinierter Kartenplatzhalter

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

Benutzerdefinierter Spaltenplatzhalter

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

Benutzerdefinierte Drag-Vorschau

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

Konfiguration

board-Konfigurationsoptionen

Beispiele:

Sortierung deaktivieren

Disable Sorting

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.

Benutzerdefinierter Scroll-Abstand

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.

Drag-Verhaltensmodi

Drag Behavior Mode:

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

Styling

Erscheinungsbild über CSS-Variablen anpassen

Beispiele:

CSS-Anpassung

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.

Hauptfunktionen

Letzte Änderungen

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%).