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.
Référence API
Voici le contrat complet de board : tout ce que vous pouvez lier, écouter, projeter et personnaliser, réuni au même endroit. Branchez ce dont vous avez besoin et stylisez ce que vous voulez — c’est standalone et compatible avec les signals.
Inputs
Aucun input documenté pour le moment.
Outputs
Aucun output documenté pour le moment.
Templates
Aucun template documenté pour le moment.
Variables CSS
Personnalisez chaque pixel avec 24 variables CSS. Remplacez-les au niveau de :root ou limitez-les à un conteneur.
Mise en page et structure des colonnes
Contrôlez la mise en page globale, l'espacement et la structure des colonnes du board.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-column-bg | #f8f9fa | color | Couleur d'arrière-plan des colonnes du board. #ffffff#f8f9fatransparent |
--hub-column-color | #212529 | color | Couleur du texte au sein des colonnes du board. #333333rgb(33, 37, 41)var(--bs-body-color) |
--hub-column-border-color | #dee2e6 | color | Couleur de la bordure autour des colonnes du board. #e9ecefvar(--bs-border-color)transparent |
--hub-column-border-width | 1px | length | Largeur des bordures des colonnes. 02px0.5rem |
--hub-column-border-radius | 0.375rem | length | Rayon de bordure des coins des colonnes. 00.5rem1rem16px |
--hub-column-gap | 1rem | length | Espacement entre les colonnes. 0.5rem1.5rem2rem |
--hub-column-padding | 1rem | length | Rembourrage interne au sein des colonnes. 0.75rem1.25rem1.5rem |
En-têtes et pieds de colonne
Personnalisez l'apparence des en-têtes et pieds de colonne.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-column-cap-bg | #ffffff | color | Couleur d'arrière-plan des en-têtes de colonne. #f8f9favar(--bs-light)transparent |
--hub-column-cap-color | #212529 | color | Couleur du texte des en-têtes de colonne. #495057var(--bs-dark)#333 |
--hub-column-cap-padding | 0.75rem 1rem | length | Rembourrage à l'intérieur des en-têtes de colonne. 0.5rem 1rem1rem 1.25rem1rem |
--hub-column-cap-border-bottom | 1px solid #dee2e6 | border | Bordure inférieure des en-têtes de colonne. 2px solid #dee2e6none1px dashed #ccc |
Style des cartes
Personnalisez l'apparence des cartes individuelles au sein des colonnes.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-card-bg | #ffffff | color | Couleur d'arrière-plan des cartes. #f8f9fargba(255,255,255,0.9)transparent |
--hub-card-color | #212529 | color | Couleur du texte des cartes. #333333var(--bs-body-color)#495057 |
--hub-card-border | 1px solid #dee2e6 | border | Bordure autour des cartes. 2px solid #dee2e6none1px dashed #ccc |
--hub-card-border-radius | 0.375rem | length | Rayon de bordure des coins des cartes. 00.5rem0.75rem12px |
--hub-card-padding | 1rem | length | Rembourrage interne au sein des cartes. 0.75rem1.25rem1rem 1.5rem |
--hub-card-margin | 0.5rem 0 | length | Marge autour des cartes. 0.25rem 00.75rem 01rem 0 |
--hub-card-shadow | 0 2px 4px rgba(0,0,0,0.1) | shadow | Ombre portée des cartes. 0 1px 3px rgba(0,0,0,0.1)0 4px 8px rgba(0,0,0,0.15)none |
États du glisser-déposer
Retours visuels et états pour les interactions de glisser-déposer.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-card-hover-shadow | 0 4px 8px rgba(0,0,0,0.15) | shadow | Ombre renforcée au survol des cartes. 0 6px 12px rgba(0,0,0,0.2)0 2px 6px rgba(0,0,0,0.1)none |
--hub-card-dragging-opacity | 0.5 | number | Opacité des cartes pendant le glissement. 0.30.70.8 |
--hub-drop-zone-bg | rgba(0,123,255,0.1) | color | Couleur d'arrière-plan des zones de dépôt actives. rgba(40,167,69,0.1)rgba(255,193,7,0.1)transparent |
--hub-drop-zone-border | 2px dashed #007bff | border | Style de bordure des zones de dépôt actives. 3px solid #28a7451px dotted #ffc107none |
Animations et transitions
Contrôlez le minutage et l'accélération des animations et transitions.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-transition-duration | 0.2s | string | Durée des transitions standard. 0.15s0.3s0.4s |
--hub-transition-easing | ease-in-out | string | Fonction d'accélération des transitions. easelinearcubic-bezier(0.4, 0, 0.2, 1) |
Styles et theming
Aucun exemple de style n’est encore documenté. Cette section inclura des recettes de personnalisation et des exemples de theming.