Patrones

Una lista para trabajar

Cabecera, filtros, una tabla con sus herramientas y un paginador: la pantalla que tienen casi todos los plugins.

La pantalla más repetida de un plugin es una lista sobre la que se trabaja: cursos, participantes, reglas, registros. Se construye siempre con las mismas piezas, en el mismo orden, para que la gente sepa dónde está cada una.

Cuándo usarla

La persona tiene muchas cosas de un tipo y tiene que encontrarlas, compararlas o actuar sobre ellas.
Cada cosa tiene varios atributos que merece la pena comparar (una tabla), no solo un nombre y una línea (entonces usa una lista).
No la uses para menos de unos cinco elementos, ni para cosas que se miran mejor una a una (tarjetas o una página de detalle).

Anatomía

Cabecera de página (dd-page-header): dónde estás, el título con su contexto y la acción principal de la página.
Chips de filtro (dd-chips): los tres a seis filtros que se usan siempre, con sus cuentas.
Tarjeta con la tabla: la barra de herramientas (búsqueda, acciones secundarias), la tabla y, debajo, el paginador.
Acciones de una fila, siempre visibles, al final de la fila.

Una lista para trabajar

		Status
Algebra I	128	Open
Physics II	94	Draft
World history	156	Closed

Disposición y espacios

Entre	Distancia
Cabecera y chips	1 rem
Chips y tarjeta	1 rem
Barra de herramientas y tabla	0, una línea fina las separa
Tabla y paginador	0, dentro de la misma tarjeta
Celdas	0,75 rem arriba y abajo, 1 rem a los lados
Acciones de fila	2 px entre botones de icono

La tarjeta ocupa todo el ancho de la columna. La primera columna crece; los números y las acciones mantienen su ancho natural.

Comportamiento

Escribir en la búsqueda acota la lista tras una pausa corta (unos 300 ms), nunca a cada tecla, y la cuenta de la cabecera cambia con ella.
Un chip se aplica al instante y vuelve a la primera página. Varios chips de tipos distintos se combinan; los del mismo tipo se sustituyen.
Pulsar una cabecera ordenable ordena por esa columna; pulsar de nuevo la invierte. Solo se ordena una columna a la vez y la flecha muestra cuál.
Una fila se abre por su nombre; los botones de icono del final son las acciones rápidas (editar, ocultar). Una destructiva pide confirmación.
Cambiar las filas por página vuelve a la primera página.
El estado de la lista (búsqueda, chips, orden, página) se guarda en la dirección, así un enlace o una recarga vuelven a la misma lista.

Estados

Estado	Qué ve la persona
Cargando	La tabla mantiene su altura con filas de esqueleto; el paginador se oculta
Vacía, la primera vez	El estado vacío de la primera vez, dentro de la tarjeta, con la acción que crea el primer elemento
Vacía, tras una búsqueda o un filtro	El estado vacío de una búsqueda, con un botón que quita los filtros
Error	Una alerta sobre la tabla que dice qué falló y un botón “Reintentar”
Sin permiso	Un estado vacío que dice quién puede ver la lista

Pantallas estrechas

La tabla se desplaza hacia los lados dentro de su tarjeta; la primera columna sigue visible. La barra de herramientas se reparte en líneas: la búsqueda ocupa todo el ancho y las acciones van debajo. El paginador mantiene las flechas y quita “Filas por página”.

Accesibilidad

La tabla tiene un título (visible u oculto) que la nombra, cada cabecera es un th scope="col" y la primera celda de una fila es un th scope="row".
La columna ordenada lleva aria-sort; los controles de orden son botones.
La cuenta y los resultados se anuncian en una región viva educada (“7 resultados”).
Los botones de icono tienen título y un aria-label que nombra la fila (“Editar Álgebra I”).

Antes de publicar

Un botón relleno en toda la pantalla.
Existen todos los estados de arriba.
El estado de la lista está en la dirección.
Ordenar, filtrar y paginar funcionan solo con el teclado.
Una acción destructiva de fila pregunta antes.