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.
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
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
Relleno de desplazamiento personalizado
Relleno de desplazamiento personalizado
Scroll detection padding is handled internally (default 1px). To inspect it, you would typically look at source code, but implementation details like specific padding override are not exposed as inputs in the current version of HubBoardComponent. This example shows a board that *could* use it if the API exposed it, or demonstrates the standard behavior. (Note: The library source code defines `scrollDetectionPadding = 1` as private readonly, so it cannot be customized via input currently.)
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
No hay entradas de changelog disponibles.