Kanban | Neural UI v2

Uso

Columnas y tarjetas necesitan ids únicos. cardMove distingue reordenación de transferencia entre columnas; aplica la propuesta sustituyendo columns. showCounts y showWipLimit controlan metadatos. wipLimit comunica capacidad; tu aplicación decide si acepta un movimiento. La interacción no guarda tareas en servidor. Los tableros anchos se desplazan dentro de su propia región.

Ejemplos

Prueba esta interacción gestionada por la aplicación. Código incluye los eventos y los datos iniciales.

Para mover una tarjeta con el teclado, enfócala y pulsa Espacio o Intro. Usa las teclas de flecha, Inicio o Fin para elegir un destino; pulsa Espacio o Intro para confirmar, o Escape para cancelar. Los botones Mover ofrecen una alternativa mediante clic al arrastre.

Pendientes

2 2/3

Revisión de diseño

medium

UI

Pruebas

high

QA

En curso

1 1/2

Implementación

medium

Core

Terminadas

1

Documentación

low

Eventos: 0

Prueba y configura

Cambia las opciones públicas, prueba el resultado y consulta el template actualizado. Código contiene la implementación ejecutable completa.

Para mover una tarjeta con el teclado, enfócala y pulsa Espacio o Intro. Usa las teclas de flecha, Inicio o Fin para elegir un destino; pulsa Espacio o Intro para confirmar, o Escape para cancelar. Los botones Mover ofrecen una alternativa mediante clic al arrastre.

Pendientes

2 2/3

Revisión de diseño

medium

UI

Pruebas

high

QA

En curso

1 1/2

Implementación

medium

Core

Terminadas

1

Documentación

low

Eventos: 0

showCounts

showWipLimit

columnWidth

Opciones avanzadas · 1

<neu-kanban
  [columns]="localizedColumns()"
  [columnWidth]="'240px'"
  [showCounts]="true"
  [showWipLimit]="true"
  (cardMove)="move($event)"
  [moveButtonLabel]="'Mover'"
/>

Estado y datos de esta configuración

Estos valores corresponden a la vista previa actual. Los handlers, imports de Core y templates completos están en Código.

import { signal } from '@angular/core';

export const localizedColumns = signal([
  {
    "id": "todo",
    "title": "Pendientes",
    "wipLimit": 3,
    "cards": [
      {
        "id": "design",
        "title": "Revisión de diseño",
        "priority": "medium",
        "tags": [
          "UI"
        ],
        "assignee": {
          "name": "Alex",
          "initials": "AL"
        }
      },
      {
        "id": "test",
        "title": "Pruebas",
        "priority": "high",
        "assignee": {
          "name": "Sam",
          "initials": "SA"
        },
        "tags": [
          "QA"
        ]
      }
    ]
  },
  {
    "id": "doing",
    "title": "En curso",
    "color": "var(--neu-warning)",
    "wipLimit": 2,
    "cards": [
      {
        "id": "build",
        "title": "Implementación",
        "priority": "medium",
        "assignee": {
          "name": "Jamie",
          "initials": "JA"
        },
        "tags": [
          "Core"
        ]
      }
    ]
  },
  {
    "id": "done",
    "title": "Terminadas",
    "color": "var(--neu-success)",
    "cards": [
      {
        "id": "docs",
        "title": "Documentación",
        "priority": "low",
        "assignee": {
          "name": "Alex",
          "initials": "AL"
        }
      }
    ]
  }
]);

Inputs de datos, callbacks y configuración estructurada

Estado y eventos

Columnas y tarjetas necesitan ids únicos. cardMove distingue reordenación de transferencia entre columnas; aplica la propuesta sustituyendo columns. showCounts y showWipLimit controlan metadatos. wipLimit comunica capacidad; tu aplicación decide si acepta un movimiento. La interacción no guarda tareas en servidor. Los tableros anchos se desplazan dentro de su propia región.

Accesibilidad y teclado

Usa Mover y sus controles de dirección para mover tarjetas sin arrastrar. Escape cancela el movimiento activo.

Tecla	Acción
`Tab`	Recorre las acciones de las tarjetas y los controles para moverlas.
`Enter`	Activa la acción Mover o el control de destino enfocado sin arrastrar.
`Space`	Activa la acción Mover o el control de destino enfocado sin arrastrar.
`Escape`	Cancela el movimiento activo.

API

Inputs, modelos y Outputs se extraen del paquete Core instalado. Los tipos públicos enlazan a sus definiciones. Los Templates incluyen ejemplos ejecutables.

Inputs

Configura el componente con [propiedad]="valor". Tu aplicación proporciona estos valores; el componente no debe reemplazar el estado que le pasas.

Nombre	Tipo	Por defecto	Uso en el template	Descripción
`columns`	`readonly NeuKanbanColumn[]`	`[]`	`[columns]`	Columnas ordenadas con ids estables, títulos, arrays de tarjetas y límites WIP opcionales. Sustitúyelas para aceptar un movimiento.
`columnWidth`	`string`	`'320px'`	`[columnWidth]`	Ancho CSS de cada columna Kanban, incluida la unidad.
`moveButtonLabel`	`string`	`'Move'`	`[moveButtonLabel]`	Etiqueta visible y accesible para mover una tarjeta con teclado.
`showCounts`	`boolean`	`true`	`[showCounts]`	Muestra el número de tarjetas de cada columna Kanban.
`showWipLimit`	`boolean`	`true`	`[showWipLimit]`	Muestra el límite de trabajo en curso configurado en la cabecera.

Outputs

Escucha un evento con (evento)="handler($event)". La tabla indica qué datos recibe tu función y cómo utilizarlos.

Nombre	Valor emitido	Uso en el template	Descripción
`cardMove`	`NeuKanbanCardMove`	`(cardMove)="onCardMove($event)"`	Propone una reordenación o transferencia entre columnas. Sustituye columns para aceptarla.

Templates

ng-content proyecta contenido dentro del componente. Los inputs TemplateRef reciben un template; las directivas ng-template identifican templates con un contexto tipado. Una directiva compartida en el entrypoint no es necesariamente un slot de este componente.

Este componente no expone proyección de contenido ni templates públicos de personalización.

Public Types

Abre un tipo para consultar su definición y los campos de sus interfaces.

NeuKanbanAssigneeTypeScript

import type { NeuKanbanAssignee } from '@neural-ui/core/kanban';

// Declaración pública (solo referencia)
export interface NeuKanbanAssignee {
  readonly avatar?: string;
  readonly initials?: string;
  readonly name: string;
}

NeuKanbanCardTypeScript

import type { NeuKanbanAssignee } from '@neural-ui/core/kanban';

import type { NeuKanbanCard } from '@neural-ui/core/kanban';

// Declaración pública (solo referencia)
export interface NeuKanbanCard {
  readonly assignee?: NeuKanbanAssignee;
  readonly description?: string;
  readonly disabled?: boolean;
  readonly dueDate?: string;
  readonly id: string;
  readonly meta?: string;
  readonly priority?: 'low' | 'medium' | 'high' | 'urgent';
  readonly tags?: readonly string[];
  readonly title: string;
}

NeuKanbanCardMoveTypeScript

import type { NeuKanbanCardReorder } from '@neural-ui/core/kanban';
import type { NeuKanbanCardTransfer } from '@neural-ui/core/kanban';

import type { NeuKanbanCardMove } from '@neural-ui/core/kanban';

// Declaración pública (solo referencia)
export type NeuKanbanCardMove = NeuKanbanCardReorder | NeuKanbanCardTransfer;

NeuKanbanCardReorderTypeScript

import type { NeuKanbanCardReorder } from '@neural-ui/core/kanban';

// Declaración pública (solo referencia)
export interface NeuKanbanCardReorder {
  readonly cardId: string;
  readonly columnId: string;
  readonly fromIndex: number;
  readonly kind: 'reorder';
  readonly toIndex: number;
}

NeuKanbanCardTransferTypeScript

import type { NeuKanbanCardTransfer } from '@neural-ui/core/kanban';

// Declaración pública (solo referencia)
export interface NeuKanbanCardTransfer {
  readonly cardId: string;
  readonly fromColumnId: string;
  readonly fromIndex: number;
  readonly kind: 'transfer';
  readonly toColumnId: string;
  readonly toIndex: number;
}

NeuKanbanColumnTypeScript

import type { NeuKanbanCard } from '@neural-ui/core/kanban';

import type { NeuKanbanColumn } from '@neural-ui/core/kanban';

// Declaración pública (solo referencia)
export interface NeuKanbanColumn {
  readonly cards: readonly NeuKanbanCard[];
  readonly color?: string;
  readonly id: string;
  readonly title: string;
  readonly wipLimit?: number;
}

Estilos y tokens

Usa los tokens públicos de la referencia. El diseño del contenedor pertenece a tu aplicación; comprueba el resultado en modo claro y oscuro y en espacios estrechos.

Tokens específicos

Este componente utiliza tokens compartidos del tema en lugar de tokens específicos.

Tokens compartidos utilizados

Sobrescríbelos en un contenedor local para afectar a este ejemplo. Una modificación en :root afecta a los demás componentes que utilizan el mismo token.

Token	Efecto aquí	Otros efectos	Valor / alternativa
`--neu-border`	Bordes normales de controles y celdas	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`rgba(15, 23, 42, 0.08)`
`--neu-error`	Color del campo no válido o de la acción de peligro	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#dc2626`
`--neu-error-bg`	Fondo de estados de error o peligro	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#fee2e2`
`--neu-error-text`	Texto de error y de Button danger outline/ghost en ambos temas	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#991b1b`
`--neu-primary`	Color de marca en controles activos y énfasis	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#007aff`
`--neu-radius`	Radio de las esquinas del control	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`8px`
`--neu-surface`	Superficie principal del campo, cabecera o control	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#ffffff`
`--neu-surface-2`	Superficies secundarias y filas alternas	Compartido con otros consumidores de Core; limita el cambio a un ámbito.	`#f1f5f9`

Componentes relacionados

Consulta los componentes relacionados cuando necesites otra interacción o un control compuesto.