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.
Ü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-boardSpringen 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
Grundlegendes Board-Beispiel
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Interaktionen
Möglichkeiten der Benutzerinteraktion
Beispiele:
Karten per Drag & 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
Spalten neu anordnen
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
Karten-Klickereignis
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
Board-Ereignisse
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Event Log
Erweiterte Funktionen
Scrollen und erweitertes Verhalten
Beispiele:
Unendliches Scrollen
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
Templates
Erscheinungsbild anpassen
Beispiele:
Benutzerdefinierte Kartenvorlage
Benutzerdefinierte Kartenvorlage
To Do
In Progress
Done
Benutzerdefinierte Kopfzeilenvorlage
Benutzerdefinierte Kopfzeilenvorlage
Research
Analyze requirements
Design
Create UI mockups
Development
Implement core features
Planning
Initial meeting
Benutzerdefinierte Fußzeilenvorlage
Benutzerdefinierte Fußzeilenvorlage
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Benutzerdefinierter Kartenplatzhalter
Benutzerdefinierter Kartenplatzhalter
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Benutzerdefinierter Spaltenplatzhalter
Benutzerdefinierter Spaltenplatzhalter
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Benutzerdefinierte Drag-Vorschau
Benutzerdefinierte Drag-Vorschau
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Konfiguration
board-Konfigurationsoptionen
Beispiele:
Sortierung deaktivieren
Sortierung deaktivieren
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Benutzerdefinierter Scroll-Abstand
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
Drag-Verhaltensmodi
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
Styling
Erscheinungsbild über CSS-Variablen anpassen
Beispiele:
CSS-Anpassung
CSS-Anpassung
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Hauptfunktionen
Letzte Änderungen
Keine Changelog-Einträge verfügbar.