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.
Styles
Mixins et styles
Override any of the `--hub-board-*` design tokens in a single include. Every parameter is OPTIONAL and defaults to `null`: only the parameters you pass are emitted, so the rest keep the component's defaults. Token-based and self-contained (no Bootstrap dependencies).
Theming with hub-board-theme
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Release
Ship to production
| Mixin | Paramètres | Description |
|---|---|---|
| Theming | ||
hub-board-theme() | $accent--hub-board-accent$container-bg--hub-board-container-bg$container-color--hub-board-container-color$border-color--hub-board-border-color$border-radius--hub-board-border-radius$columns-gap--hub-board-columns-gap$column-bg--hub-board-column-bg$column-color--hub-board-column-color$column-border-color--hub-board-column-border-color$column-border-radius--hub-board-column-border-radius$column-width--hub-board-column-width$column-header-bg--hub-board-column-header-bg$column-header-color--hub-board-column-header-color$card-bg--hub-board-card-bg$card-color--hub-board-card-color$card-border-color--hub-board-card-border-color$card-border-radius--hub-board-card-border-radius$card-padding-x--hub-board-card-padding-x$card-padding-y--hub-board-card-padding-y$card-shadow--hub-board-card-box-shadow | One-call theming for `<hub-board>` (Kanban board) |
Variables CSS
Personnalisez chaque pixel avec 72 variables CSS. Remplacez-les au niveau de :root ou limitez-les à un conteneur.
Board
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| Variable | Par défaut | Type | Description |
|---|---|---|---|
--hub-board-container-color | var(--hub-sys-text-primary, #212529) | color | Board text color |
--hub-board-container-bg | var(--hub-sys-surface-page, #fff) | color | Board background |
--hub-board-border-width | var(--hub-ref-border-width, 1px) | length | Base border width shared by columns and cards |
--hub-board-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Base border color shared by columns and cards |
--hub-board-border-radius | var(--hub-ref-radius-md, 0.375rem) | length | Base border radius shared by columns and cards |
--hub-board-columns-gap | var(--hub-ref-space-3, 1rem) | number | Espacement entre les colonnes. |
--hub-board-column-width | 256px | length | Column width |
--hub-board-column-min-height | 200px | length | Column minimum height |
--hub-board-column-body-min-height | 128px | length | Column body minimum height |
--hub-board-column-body-gap | var(--hub-ref-space-3, 1rem) | length | Gap between cards in a column |
--hub-board-column-spacer-y | 0.75rem | length | Base vertical spacer for column sections |
--hub-board-column-spacer-x | var(--hub-ref-space-3, 1rem) | string | Base horizontal spacer for column sections |
--hub-board-column-border-width | var(--hub-board-border-width) | length | Largeur des bordures des colonnes. |
--hub-board-column-border-color | var(--hub-board-border-color) | color | Couleur de la bordure autour des colonnes du board. |
--hub-board-column-border-radius | var(--hub-board-border-radius) | length | Rayon de bordure des coins des colonnes. |
--hub-board-column-box-shadow | none | shadow | Column box shadow |
--hub-board-column-inner-border-radius | var(--hub-board-border-radius) | length | Inner radius for column header/footer |
--hub-board-column-cap-padding-y | var(--hub-ref-space-2, 0.5rem) | length | Padding vertical dans les en-têtes et pieds de colonne |
--hub-board-column-cap-padding-x | var(--hub-ref-space-3, 1rem) | length | Padding horizontal dans les en-têtes et pieds de colonne |
--hub-board-column-cap-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Couleur d'arrière-plan des en-têtes de colonne. |
--hub-board-column-cap-color | inherit | color | Couleur du texte des en-têtes de colonne. |
--hub-board-column-header-padding-y | var(--hub-board-column-cap-padding-y) | length | Column header vertical padding |
--hub-board-column-header-padding-x | var(--hub-board-column-cap-padding-x) | length | Column header horizontal padding |
--hub-board-column-header-bg | var(--hub-board-column-cap-bg) | color | Column header background |
--hub-board-column-header-color | var(--hub-board-column-cap-color) | color | Column header text color |
--hub-board-column-footer-padding-y | var(--hub-board-column-cap-padding-y) | length | Column footer vertical padding |
--hub-board-column-footer-padding-x | var(--hub-board-column-cap-padding-x) | length | Column footer horizontal padding |
--hub-board-column-footer-bg | var(--hub-board-column-cap-bg) | color | Column footer background |
--hub-board-column-footer-color | var(--hub-board-column-cap-color) | color | Column footer text color |
--hub-board-column-body-padding-y | var(--hub-board-column-spacer-y) | length | Padding vertical du corps de la colonne (la zone qui contient les cartes) |
--hub-board-column-body-padding-x | var(--hub-board-column-spacer-x) | length | Padding horizontal du corps de la colonne (la zone qui contient les cartes) |
--hub-board-column-header-title-color | inherit | color | Column header title color |
--hub-board-column-header-title-spacer-y | var(--hub-ref-space-2, 0.5rem) | string | Column header title bottom spacing |
--hub-board-column-header-subtitle-color | var(--hub-sys-text-muted, #6c757d) | color | Column header subtitle color |
--hub-board-column-height | 100% | length | Column height |
--hub-board-column-color | var(--hub-board-container-color) | color | Couleur du texte au sein des colonnes du board. |
--hub-board-column-bg | var(--hub-board-container-bg) | color | Couleur d'arrière-plan des colonnes du board. |
--hub-board-card-spacer-y | 0.75rem | length | Base vertical spacer for card sections |
--hub-board-card-spacer-x | var(--hub-ref-space-3, 1rem) | string | Base horizontal spacer for card sections |
--hub-board-card-title-spacer-y | var(--hub-ref-space-2, 0.5rem) | string | Card title bottom spacing |
--hub-board-card-title-color | inherit | color | Card title color |
--hub-board-card-subtitle-color | var(--hub-sys-text-muted, #6c757d) | color | Card subtitle color |
--hub-board-card-border-width | var(--hub-board-border-width) | length | Épaisseur de la bordure des cartes |
--hub-board-card-border-color | var(--hub-board-border-color) | color | Couleur de la bordure des cartes |
--hub-board-card-border-radius | var(--hub-board-border-radius) | length | Rayon de bordure des coins des cartes. |
--hub-board-card-box-shadow | none | shadow | Ombre portée des cartes. |
--hub-board-card-inner-border-radius | calc(var(--hub-board-card-border-radius) - var(--hub-board-card-border-width)) | length | Inner card border radius |
--hub-board-card-cap-padding-y | var(--hub-ref-space-2, 0.5rem) | length | Card cap shared vertical padding |
--hub-board-card-cap-padding-x | var(--hub-ref-space-3, 1rem) | length | Card cap shared horizontal padding |
--hub-board-card-cap-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Card cap shared background |
--hub-board-card-cap-color | inherit | color | Card cap shared text color |
--hub-board-card-padding-y | var(--hub-board-card-spacer-y) | length | Padding vertical à l'intérieur des cartes |
--hub-board-card-padding-x | var(--hub-board-card-spacer-x) | length | Padding horizontal à l'intérieur des cartes |
--hub-board-card-header-padding-y | var(--hub-board-card-cap-padding-y) | length | Card header vertical padding |
--hub-board-card-header-padding-x | var(--hub-board-card-cap-padding-x) | length | Card header horizontal padding |
--hub-board-card-header-bg | var(--hub-board-card-cap-bg) | color | Card header background |
--hub-board-card-header-color | var(--hub-board-card-cap-color) | color | Card header text color |
--hub-board-card-footer-padding-y | var(--hub-board-card-cap-padding-y) | length | Card footer vertical padding |
--hub-board-card-footer-padding-x | var(--hub-board-card-cap-padding-x) | length | Card footer horizontal padding |
--hub-board-card-footer-bg | var(--hub-board-card-cap-bg) | color | Card footer background |
--hub-board-card-footer-color | var(--hub-board-card-cap-color) | color | Card footer text color |
--hub-board-card-height | auto | length | Card height |
--hub-board-card-color | var(--hub-board-container-color) | color | Couleur du texte des cartes. |
--hub-board-card-bg | var(--hub-board-container-bg) | color | Couleur d'arrière-plan des cartes. |
--hub-board-drag-transition | transform 250ms cubic-bezier(0, 0, 0.2, 1) | transition | Transition CSS appliquée aux cartes pendant le glisser-déposer (propriété, durée et easing en une seule valeur) |
--hub-board-accent | var(--hub-sys-color-primary, #0d6efd) | color | Semantic accent — re-based per variant; drives the drop placeholder |
--hub-board-accent-subtle | color-mix(in oklch, var(--hub-board-accent) 12%, var(--hub-sys-surface-page, #fff)) | color | Soft accent tint for the placeholder background |
--hub-board-placeholder-border-color | var(--hub-board-accent) | color | Couleur de la bordure du placeholder de glisser-déposer |
--hub-board-placeholder-border-width | 2px | length | Épaisseur de la bordure du placeholder de glisser-déposer |
--hub-board-placeholder-border-style | dashed | border | Drop placeholder border style |
--hub-board-placeholder-bg | var(--hub-board-accent-subtle) | color | Couleur d'arrière-plan des zones de dépôt actives. |
--hub-board-placeholder-min-height | 60px | length | Drop placeholder minimum height |