Componentes de Didactika

Estados vacíos

Lo que muestra una lista o una región cuando no hay nada: qué falta, qué hacer y la acción que lo hace.

Una lista vacía es un momento para ayudar, no un hueco en blanco. Un estado vacío nombra lo que falta, dice qué hacer en una línea y ofrece la acción. Es la misma pieza en todos los plugins, así que quien ha visto uno sabe qué esperar del siguiente.

Cuándo usarlo

Úsalo

Una pastilla con icono, un título y una línea de texto; el título dice qué falta.
La acción principal de la región como botón primario, solo si el usuario puede hacerla.
Otro texto cuando la lista está vacía por una búsqueda o un filtro: decirlo y ofrecer quitarlo.

No

Dejar una tabla solo con su cabecera y sin mensaje.
Culpar al usuario (“Aún no has hecho nada”).
Poner más de una acción primaria.

Anatomía

Una pastilla con el icono (dd-tile), un título (dd-empty-title), una línea de texto (dd-empty-text) y un botón opcional, centrados en la región (dd-empty). La variante discontinua (dd-empty-dashed) dibuja la región como un sitio que espera llenarse; la variante en línea (dd-empty-inline) es para un área pequeña, como una tarjeta o un panel lateral.

Variantes y estados

El primero invita a crear, el segundo responde a una búsqueda que no encontró nada, el tercero informa de que no queda nada por hacer, que es una buena noticia y se dibuja como tal.

Estados vacíos

No courses yet

Courses you create or are enrolled in appear here. Start with a new course or import one from a backup.

Nothing matches "alg"

Check the spelling or remove a filter to see more results.

You are up to date. There are no pending submissions to grade.

Combinaciones

Combinación	Para qué usarla
Discontinuo × botón primario	La primera vez: no existe nada y el usuario puede crearlo.
Normal × botón secundario	Una búsqueda o un filtro sin resultados: la acción deshace el filtrado.
En línea × pastilla de éxito	Una cola vacía porque el trabajo está hecho.

Qué añade Didactika y por qué

Qué aporta	Por qué ayuda
Una pastilla con el color de la situación	Info para una búsqueda, éxito para “hecho”, primario para “empieza aquí”: el color dice si es un error o no antes de leer el texto.
Una acción, como botón	Quita la pregunta “¿y ahora qué?” que deja una lista en blanco.
Un borde discontinuo la primera vez	Se lee como un sitio por llenar, no como algo roto.

Clases

Clase	Qué hace
`dd-empty`	El bloque, centrado
`dd-empty-title`	El título
`dd-empty-text`	La línea de texto
`dd-empty-dashed`	Un borde discontinuo
`dd-empty-inline`	Compacto, en fila

Accesibilidad

El título es un encabezado del nivel que corresponde a la página; no saltes niveles.
El icono es decoración: se oculta a las tecnologías de apoyo.
Cuando la lista queda vacía tras una acción, anúnciala con una región viva educada.