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
Karten-Klickereignis
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Last Clicked: None
Board-Ereignisse
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Event Log
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
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
Last Event: None
Tastatur & Screenreader
Tab to a card, then press Space or Enter to grab it, the arrow keys to move it within or across columns, Space / Enter to drop it and Esc to cancel. A visually hidden aria-live="polite" region announces every grab, move, drop and rejection, and boardLabel gives the board its accessible name.
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Moves committed from the keyboard (same payload as a pointer drop):
- No move yet.
Spalten neu anordnen
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Last Reorder: None
Sortierung deaktivieren
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Drag-Verhaltensmodi
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
Benutzerdefinierte Drag-Vorschau
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Templates
Benutzerdefinierte Kartenvorlage
To Do
In Progress
Done
Benutzerdefinierte Kopfzeilenvorlage
Research
Analyze requirements
Design
Create UI mockups
Development
Implement core features
Planning
Initial meeting
Platzhalter & Styling
Benutzerdefinierter Kartenplatzhalter
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Benutzerdefinierter Spaltenplatzhalter
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
CSS-Anpassung
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting