Composant Kanban Board Angular | ng-hub-ui-board
Composant Kanban Angular avec drag and drop, templates de carte, flux par colonnes et variables CSS pour les tableaux de bord métier.
Vue d’ensemble
Pourquoi les équipes recherchent cette bibliothèque
Ce composant board Angular vous aide à livrer des flux de type Kanban avec drag and drop, des templates flexibles et des schémas d'interaction évolutifs pour de véritables outils métier.
Installation
npm install ng-hub-ui-boardAller à
Idéal pour
- tableaux de tâches
- suivi de pipelines
- flux CRM
- tableaux de bord d'opérations
À propos de board
ng-hub-ui-board est conçu pour les produits Angular qui ont besoin de plus qu'une liste statique : suivi de tâches, pipelines CRM, flux de support ou tableaux de bord d'opérations internes. Il garde le rendu des cartes flexible tout en préservant un modèle d'interaction de board cohérent.
Guides de fonctionnalités
Utilisation de base
Fonctionnalités fondamentales du board.
Exemples:
Exemple de tableau basique
Exemple de tableau basique
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Interactions
Capacités d'interaction utilisateur.
Exemples:
Glisser-déposer de cartes
Glisser-déposer de cartes
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Last Event: None
Réorganisation des colonnes
Réorganisation des colonnes
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Last Reorder: None
Événement de clic sur la carte
Événement de clic sur la carte
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Last Clicked: None
Événements du tableau
Événements du tableau
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Event Log
Fonctionnalités avancées
Défilement et comportements avancés.
Exemples:
Défilement infini
Défilement infini
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
Personnalisation de l'apparence
Exemples:
Modèle de carte personnalisé
Modèle de carte personnalisé
To Do
In Progress
Done
Modèle d'en-tête personnalisé
Modèle d'en-tête personnalisé
Research
Analyze requirements
Design
Create UI mockups
Development
Implement core features
Planning
Initial meeting
Modèle de pied de page personnalisé
Modèle de pied de page personnalisé
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Espace réservé de carte personnalisé
Espace réservé de carte personnalisé
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Espace réservé de colonne personnalisé
Espace réservé de colonne personnalisé
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Aperçu de glisser personnalisé
Aperçu de glisser personnalisé
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Configuration
Options de configuration du board.
Exemples:
Désactiver le tri
Désactiver le tri
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Marge de défilement personnalisée
Marge de défilement personnalisée
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
Modes de comportement du glisser
Modes de comportement du glisser
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
Style
Personnalisation de l'apparence via les variables CSS.
Exemples:
Personnalisation CSS
Personnalisation CSS
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Fonctionnalités clés
Changements récents
Aucune entrée de changelog disponible.