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.
Stile
Mixins und Stile
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 | Parameter | Beschreibung |
|---|---|---|
| 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) |
CSS-Variablen
Gestalte jedes Pixel mit 72 CSS-Variablen. Überschreibe sie auf :root oder begrenze sie auf einen Wrapper.
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 | Standard | Typ | Beschreibung |
|---|---|---|---|
--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 | Abstand zwischen Spalten |
--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 | Breite der Spaltenrahmen |
--hub-board-column-border-color | var(--hub-board-border-color) | color | Rahmenfarbe um board-Spalten |
--hub-board-column-border-radius | var(--hub-board-border-radius) | length | Rahmenradius für Spaltenecken |
--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 | Vertikales Padding in Spaltenkopf- und -fußzeilen |
--hub-board-column-cap-padding-x | var(--hub-ref-space-3, 1rem) | length | Horizontales Padding in Spaltenkopf- und -fußzeilen |
--hub-board-column-cap-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Hintergrundfarbe für Spalten-Header |
--hub-board-column-cap-color | inherit | color | Schriftfarbe für Spalten-Header |
--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 | Vertikales Padding des Spaltenkörpers (der Bereich, der die Karten enthält) |
--hub-board-column-body-padding-x | var(--hub-board-column-spacer-x) | length | Horizontales Padding des Spaltenkörpers (der Bereich, der die Karten enthält) |
--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 | Schriftfarbe innerhalb der board-Spalten |
--hub-board-column-bg | var(--hub-board-container-bg) | color | Hintergrundfarbe für board-Spalten |
--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 | Breite der Kartenränder |
--hub-board-card-border-color | var(--hub-board-border-color) | color | Farbe der Kartenränder |
--hub-board-card-border-radius | var(--hub-board-border-radius) | length | Rahmenradius für Card-Ecken |
--hub-board-card-box-shadow | none | shadow | Schlagschatten für Cards |
--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 | Vertikales Padding innerhalb der Karten |
--hub-board-card-padding-x | var(--hub-board-card-spacer-x) | length | Horizontales Padding innerhalb der Karten |
--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 | Schriftfarbe für Cards |
--hub-board-card-bg | var(--hub-board-container-bg) | color | Hintergrundfarbe für Cards |
--hub-board-drag-transition | transform 250ms cubic-bezier(0, 0, 0.2, 1) | transition | CSS-Transition der Karten beim Drag-and-Drop (Eigenschaft, Dauer und Easing in einem Wert) |
--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 | Randfarbe des Drag-and-Drop-Platzhalters |
--hub-board-placeholder-border-width | 2px | length | Randbreite des Drag-and-Drop-Platzhalters |
--hub-board-placeholder-border-style | dashed | border | Drop placeholder border style |
--hub-board-placeholder-bg | var(--hub-board-accent-subtle) | color | Hintergrundfarbe für aktive Drop-Zonen |
--hub-board-placeholder-min-height | 60px | length | Drop placeholder minimum height |