Angular Kanban-Board-Komponente | ng-hub-ui-board

Angular Kanban-Board-Komponente mit Drag-and-drop, individuellen Karten-Templates, Spalten-Workflows und CSS-Variablen für Business-Dashboards.

Interaktive Beispiele

Erkunde Live-Beispiele, die zeigen, wie sich die Bibliothek in gängigen Angular-Anwendungsfällen verhält.

Grundlagen & Interaktion

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.

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!

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

Drag-and-drop

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

Sortierung deaktivieren

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

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

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

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.

Templates

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.

Platzhalter & Styling

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

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.