Vacío

Indicador de marcador de posición para cuando no hay datos. El contenedor es role="status"; cuando aparece el estado vacío, los lectores de pantalla lo anuncian automáticamente.

Uso básico

Uso básico

Sin datos

<script setup lang="ts">
</script>

<template>
  <LhEmpty />
</template>

<script>
export default {}
</script>

<template>
  <LhEmpty />
</template>

Descripción personalizada

Descripción personalizada

La búsqueda no devolvió resultados

<script setup lang="ts">
</script>

<template>
  <LhEmpty description="La búsqueda no devolvió resultados" />
</template>

<script>
export default {}
</script>

<template>
  <LhEmpty description="La búsqueda no devolvió resultados" />
</template>

Imagen personalizada

Imagen personalizada

Aún no hay pedidos

<script setup lang="ts">
</script>

<template>
  <LhEmpty image="/logo.svg" description="Aún no hay pedidos" />
</template>

<script>
export default {}
</script>

<template>
  <LhEmpty image="/logo.svg" description="Aún no hay pedidos" />
</template>

Con acciones

Con acciones

Aún no has guardado ningún contenido como favorito

<script setup lang="ts">
</script>

<template>
  <LhEmpty description="Aún no has guardado ningún contenido como favorito">
    <template #actions>
      <LhButton type="primary" size="small">Explorar</LhButton>
      <LhButton size="small">Actualizar</LhButton>
    </template>
  </LhEmpty>
</template>

<script>
export default {}
</script>

<template>
  <LhEmpty description="Aún no has guardado ningún contenido como favorito">
    <template #actions>
      <LhButton type="primary" size="small">Explorar</LhButton>
      <LhButton size="small">Actualizar</LhButton>
    </template>
  </LhEmpty>
</template>

Empty API

Props

Prop	Descripción	Tipo	Predeterminado
description	Texto descriptivo (si no se pasa, se toma empty.description del paquete de idioma)	string	—
image	URL de la imagen personalizada (sustituye a la ilustración inline predeterminada)	string	—
sx	Props de disposición rápida	LhSxProps	—

Slots

Slot	Descripción	Contenido predeterminado
default	Zona visual personalizada (sustituye a la ilustración)	Ilustración de tinta china predeterminada
description	Descripción personalizada	empty.description del paquete de idioma
actions	Zona de acciones	—

Accesibilidad

• El contenedor es role="status": cuando aparece el estado vacío se anuncia automáticamente
• Las imágenes decorativas llevan alt="" para ocultarse a los lectores de pantalla; la semántica corre a cargo del texto descriptivo

Definiciones de tipos

Las estructuras de tipos TypeScript exportadas por este componente (extraídas automáticamente de packages/components/empty/src/types.ts y de las fuentes @lh-ui/share/core/*; abre cada entrada para ver la definición completa; la descripción de los atributos está en la tabla de Props de arriba):

LhEmptyProps

export interface LhEmptyProps {
  /** Texto descriptivo del estado vacío (si no se pasa, se toma empty.description del paquete de idioma) */
  description?: string
  /** URL de la imagen personalizada (sustituye a la ilustración inline predeterminada) */
  image?: string
  /** Props de disposición rápida */
  sx?: LhSxProps
}