Componente Kanban Board para Angular | ng-hub-ui-board
Componente Kanban para Angular con drag and drop, plantillas de tarjeta, flujos por columnas y variables CSS para paneles de negocio.
Estilos
Mixins y estilos
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 | Parámetros | Descripción |
|---|---|---|
| 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
Personaliza cada detalle con 72 variables CSS. Sobrescríbelas en :root o acótalas a un contenedor.
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 | Por defecto | Tipo | Descripción |
|---|---|---|---|
--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 | Espaciado entre columnas |
--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 | Grosor de los bordes de las columnas |
--hub-board-column-border-color | var(--hub-board-border-color) | color | Color del borde alrededor de las columnas del board |
--hub-board-column-border-radius | var(--hub-board-border-radius) | length | Radio de borde de las esquinas de las columnas |
--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 dentro de cabeceras y pies de columna |
--hub-board-column-cap-padding-x | var(--hub-ref-space-3, 1rem) | length | Padding horizontal dentro de cabeceras y pies de columna |
--hub-board-column-cap-bg | var(--hub-sys-surface-elevated, #f8f9fa) | color | Color de fondo de las cabeceras de columna |
--hub-board-column-cap-color | inherit | color | Color de texto de las cabeceras de columna |
--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 del cuerpo de la columna (el área que contiene las tarjetas) |
--hub-board-column-body-padding-x | var(--hub-board-column-spacer-x) | length | Padding horizontal del cuerpo de la columna (el área que contiene las tarjetas) |
--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 | Color de texto dentro de las columnas del board |
--hub-board-column-bg | var(--hub-board-container-bg) | color | Color de fondo de las columnas del 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 | Grosor del borde de las tarjetas |
--hub-board-card-border-color | var(--hub-board-border-color) | color | Color del borde de las tarjetas |
--hub-board-card-border-radius | var(--hub-board-border-radius) | length | Radio de borde de las esquinas de las tarjetas |
--hub-board-card-box-shadow | none | shadow | Sombra de caja de las tarjetas |
--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 dentro de las tarjetas |
--hub-board-card-padding-x | var(--hub-board-card-spacer-x) | length | Padding horizontal dentro de las tarjetas |
--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 | Color de texto de las tarjetas |
--hub-board-card-bg | var(--hub-board-container-bg) | color | Color de fondo de las tarjetas |
--hub-board-drag-transition | transform 250ms cubic-bezier(0, 0, 0.2, 1) | transition | Transición CSS aplicada a las tarjetas durante el drag and drop (propiedad, duración y easing en un único valor) |
--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 | Color del borde del placeholder de arrastrar y soltar |
--hub-board-placeholder-border-width | 2px | length | Grosor del borde del placeholder de arrastrar y soltar |
--hub-board-placeholder-border-style | dashed | border | Drop placeholder border style |
--hub-board-placeholder-bg | var(--hub-board-accent-subtle) | color | Color de fondo de las zonas de soltar activas |
--hub-board-placeholder-min-height | 60px | length | Drop placeholder minimum height |