Estado vacío
Un hueco en blanco se lee como un error. Un estado vacío dice qué hueco está en blanco, por qué y qué hacer a continuación — y es el caso que más fácilmente se olvida, porque durante el desarrollo siempre hay datos.
Estado vacío básico
Aún no hay entradas
Añade un archivo Markdown en src/posts y aparecerá aquí.
empty({
title: 'Aún no hay entradas',
description: 'Añade un archivo Markdown en src/posts y aparecerá aquí.',
})Con icono
El icono es decoración: va marcado con aria-hidden, porque el título ya dice lo que ocurre.
Aquí no hay nada
Esta carpeta no tiene páginas dentro.
empty({
icon: icon('folder'),
title: 'Aquí no hay nada',
description: 'Esta carpeta no tiene páginas dentro.',
})Con una acción
Los hijos pasan a ser la fila de acciones.
Sin resultados para «islas»
Revisa la ortografía, o navega la documentación en su lugar.
empty({
icon: icon('search'),
title: 'Sin resultados para «islas»',
description: 'Revisa la ortografía, o navega la documentación en su lugar.',
},
button({ href: '/es/docs' }, 'Ver la documentación'),
button({ variant: 'outline', color: 'neutral' }, 'Limpiar la búsqueda'),
)En una tarjeta
Despliegues
Aún no hay despliegues
Haz push a main y la primera compilación aparecerá aquí.
card(
cardHeader({ title: 'Despliegues' }),
cardBody(
empty({
title: 'Aún no hay despliegues',
description: 'Haz push a main y la primera compilación aparecerá aquí.',
}, button({ size: 'sm' }, 'Conectar un repositorio')),
),
)En lugar de una tabla
Cambia la tabla por un estado vacío en vez de dibujar una cabecera sin ninguna fila debajo.
Historial de compilaciones
No hay compilaciones registradas
Las ejecuciones aparecen aquí en cuanto el sitio se ha desplegado al menos una vez.
return (() => {
const rows = []
return card(
cardHeader({ title: 'Historial de compilaciones' }),
rows.length
? table({ columns: [{ key: 'commit', header: 'Commit' }], rows })
: cardBody(empty({
title: 'No hay compilaciones registradas',
description: 'Las ejecuciones aparecen aquí en cuanto el sitio se ha desplegado al menos una vez.',
})),
)
})()Props
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
icon | Child | — | Glifo decorativo sobre el título; oculto a los lectores de pantalla. |
title | Child | — | Qué está vacío, en pocas palabras. |
description | Child | — | Por qué está vacío, o qué hacer al respecto. |
Los hijos se dibujan como la fila de acciones bajo la descripción.