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.
Última actualización 6 sept 2026
Visión General
Por qué los equipos buscan esta librería
Este componente board para Angular te ayuda a entregar flujos estilo Kanban con drag and drop, plantillas flexibles y patrones de interacción escalables para herramientas de negocio reales.
Instalación
npm install ng-hub-ui-boardIr a
Ideal para
- tableros de tareas
- seguimiento de pipelines
- flujos CRM
- paneles operativos
Sobre board
ng-hub-ui-board está diseñado para productos Angular que necesitan algo más que una lista estática: seguimiento de tareas, pipelines CRM, flujos de soporte o paneles internos de operaciones. Mantiene flexible el renderizado de tarjetas sin perder un modelo coherente de interacción.
Guías de uso
Uso básico
Funcionalidades fundamentales del board
Ejemplos:
Ejemplo básico de tablero
Ejemplo básico de tablero
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Interacciones
Capacidades de interacción del usuario
Ejemplos:
Arrastrar y soltar tarjetas
Arrastrar y soltar tarjetas
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Last Event: None
Reordenación de columnas
Reordenación de columnas
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Last Reorder: None
Evento de clic en tarjeta
Evento de clic en tarjeta
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Last Clicked: None
Eventos del tablero
Eventos del tablero
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Event Log
Teclado y lector de pantalla
Teclado y lector de pantalla
Tab to a card, then press Space or Enter to grab it, the arrow keys to move it within or across columns, Space / Enter to drop it and Esc to cancel. A visually hidden aria-live="polite" region announces every grab, move, drop and rejection, and boardLabel gives the board its accessible name.
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Moves committed from the keyboard (same payload as a pointer drop):
- No move yet.
Funcionalidades avanzadas
Desplazamiento y comportamiento avanzado
Ejemplos:
Desplazamiento infinito
Desplazamiento infinito
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
Plantillas
Personalización de la apariencia
Ejemplos:
Plantilla de tarjeta personalizada
Plantilla de tarjeta personalizada
To Do
In Progress
Done
Plantilla de cabecera personalizada
Plantilla de cabecera personalizada
Research
Analyze requirements
Design
Create UI mockups
Development
Implement core features
Planning
Initial meeting
Plantilla de pie personalizada
Plantilla de pie personalizada
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Marcador de posición de tarjeta personalizado
Marcador de posición de tarjeta personalizado
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Marcador de posición de columna personalizado
Marcador de posición de columna personalizado
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Vista previa de arrastre personalizada
Vista previa de arrastre personalizada
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Configuración
Opciones de configuración del board
Ejemplos:
Desactivar ordenación
Desactivar ordenación
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Modos de comportamiento de arrastre
Modos de comportamiento de arrastre
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
Estilizado
Personalización de la apariencia mediante variables CSS
Ejemplos:
Personalización con CSS
Personalización con CSS
To Do
Research
Analyze requirements
Design
Create UI mockups
In Progress
Development
Implement core features
Done
Planning
Initial meeting
Características clave
Cambios recientes
Version 22.5.2 - 9/6/26, 12:00 AM
fixed: The columns are now the items of the board list. role="list" sat on the host, but its children were two role-less wrappers, the hidden keyboard hint and the live region, so the required-owned-elements chain broke and a screen reader read the board as a list with no items. The list now lives on the columns track, each column container is its listitem, and the column group semantics (role="group", its aria-label and its stable id) moved onto the column itself, which leaves the hint and the announcer outside the list. The host keeps its aria-label and becomes a region, so boardLabel still names the board and a screen-reader user can reach it without the consumer adding a heading of their own.
fixed: BoardModule now exports CardDragPreviewDirective and ColumnDragPreviewDirective. Both are public API and both are documented in the README with no caveat, but neither was in the module, so a consumer who took the documented Module Import (Legacy) route got an <ng-template cardDragPreview> that matched no directive. Nothing failed out loud: the template was simply ignored and the default preview rendered, which is the worst way for an option to not work.
fixed: The documentation now describes the component that ships. Both READMEs promised things the code does not do and hid things it does: a CC BY 4.0 licence that the 22.5.0 relicense had already replaced with MIT, a @use of a stylesheet removed in 21.1.0, a card template bound to let-card="card" when the context key is item (so the snippet rendered an empty card), board typed as Signal<Board> when the input takes a plain Board, a primary default on a variant that has none, EventEmitter where the outputs are output(), a BoardColumn block missing the very predicate the keyboard section relies on, and a virtual scrolling feature that is only end-of-column detection. Each one is a reader copying a line that fails to compile or silently renders nothing.
fixed: FUNCTIONALITIES.md no longer lists a configurable scroll-detection padding. It is a private constant, not an input, so the row promised an API that has never existed.
Version 22.5.1 - 9/1/26, 12:00 AM
changed: The package homepage now points at this library's own documentation page instead of the site root, so the link a registry shows beside the package lands on the reference the reader was already looking for. Metadata only.
Version 22.5.0 - 8/17/26, 12:00 AM
changed: Relicensed from CC-BY-4.0 to MIT. CC licences are not meant for software: no patent grant, no source-distribution terms and an attribution requirement with no defined meaning for code that ends up inside a bundle. MIT grants strictly more, so nobody who took an earlier version loses anything.
Version 22.4.1 - 8/8/26, 12:00 AM
fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.
Version 22.4.0 - 7/28/26, 12:00 AM
added: ARIA list semantics: the board host is role="list" named by the new boardLabel input, each column is a labelled role="group", each column body a role="list" and each card a role="listitem".
added: Keyboard card reorder: Space/Enter grabs a focused card, ArrowUp/ArrowDown move it within its column and ArrowLeft/ArrowRight to the adjacent column (honouring the same predicate/cardSortingDisabled rules as dragging), Space/Enter drops emitting the same onCardMoved payload as a pointer drop, and Escape cancels restoring the original position.
added: Visually hidden aria-live="polite" announcer for grab, move, drop, cancel and rejected targets (messages are English-only for now), plus a hidden usage hint linked from each focusable card.
added: New optional boardLabel input: accessible name of the board list container (default 'Board').
Version 22.3.0 - 7/7/26, 12:00 AM
changed: BREAKING (packaging): the theme SCSS now ships at ng-hub-ui-board/styles (was dist/board/src/lib/styles), so @use 'ng-hub-ui-board/styles' resolves — update any @use that reached into src/lib/styles.
changed: variant now accepts any colour: besides the built-in semantic accents, a registered custom accent or a literal colour (#hex, rgb(), oklch(), CSS named colour) is resolved through the shared resolveHubAccent helper from ng-hub-ui-utils.
changed: Internal: @HostBinding/@HostListener decorators replaced by the host metadata object (Angular style guide); no public API or behaviour change.
Version 22.2.1 - 7/2/26, 12:00 AM
fixed: Docs: css-variables-reference.md default values resynchronized with the actual code declarations, now guarded by the repo-level tokens-parity check.
Version 22.2.0 - 6/26/26, 12:00 AM
changed: Accent system migrated to the open-set local accent slot pattern: variant re-bases a single --hub-board-accent slot and the emphasis/subtle/on family is derived locally with color-mix, growing the built-in variants from 5 to the nine canonical accents and letting any custom ds accent recolour the drag/drop placeholder at runtime.
added: New tokens --hub-board-accent-on (grayscale contrast flip driven by the accent lightness) and --hub-board-accent-emphasis.
fixed: Accent color-mix derivation for --hub-board-accent-subtle migrated from srgb to oklch for perceptually uniform tints; the subtle tint is now derived at 12% (was 8%).