Vide

Espace réservé affiché lorsque les données sont vides. Le conteneur porte role="status", et les lecteurs d'écran annoncent automatiquement l'état vide lorsqu'il apparaît.

Utilisation de base

Utilisation de base

Aucune donnée

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

<template>
  <LhEmpty />
</template>

<script>
export default {}
</script>

<template>
  <LhEmpty />
</template>

Description personnalisée

Description personnalisée

Aucun résultat de recherche

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

<template>
  <LhEmpty description="Aucun résultat de recherche" />
</template>

<script>
export default {}
</script>

<template>
  <LhEmpty description="Aucun résultat de recherche" />
</template>

Image personnalisée

Image personnalisée

Aucune commande pour le moment

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

<template>
  <LhEmpty image="/logo.svg" description="Aucune commande pour le moment" />
</template>

<script>
export default {}
</script>

<template>
  <LhEmpty image="/logo.svg" description="Aucune commande pour le moment" />
</template>

Avec actions

Avec actions

Vous n'avez encore rien enregistré dans vos favoris

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

<template>
  <LhEmpty description="Vous n'avez encore rien enregistré dans vos favoris">
    <template #actions>
      <LhButton type="primary" size="small">Parcourir</LhButton>
      <LhButton size="small">Actualiser</LhButton>
    </template>
  </LhEmpty>
</template>

<script>
export default {}
</script>

<template>
  <LhEmpty description="Vous n'avez encore rien enregistré dans vos favoris">
    <template #actions>
      <LhButton type="primary" size="small">Parcourir</LhButton>
      <LhButton size="small">Actualiser</LhButton>
    </template>
  </LhEmpty>
</template>

Empty API

Props

Propriété	Description	Type	Valeur par défaut
description	Texte descriptif (en l'absence de valeur, le pack de langue empty.description est utilisé)	string	—
image	URL d'image personnalisée (remplace l'illustration inline par défaut)	string	—
sx	Propriétés de mise en page rapide sx	LhSxProps	—

Slots

Slot	Description	Contenu par défaut
default	Zone visuelle personnalisée (remplace l'illustration)	Illustration lavis par défaut
description	Description personnalisée	Pack de langue empty.description
actions	Zone d'actions	—

Accessibilité

• Conteneur role="status" : annonce automatique lors de l'affichage de l'état vide
• L'image décorative porte alt="" afin d'être masquée aux lecteurs d'écran, la sémantique étant portée par le texte descriptif

Définitions de types

Les structures de types TypeScript exportées par ce composant sont présentées ci-dessous (extraction automatique à partir des sources packages/components/empty/src/types.ts et @lh-ui/share/core/* ; cliquez sur chaque entrée pour afficher la définition complète ; la description des propriétés se trouve dans le tableau Props ci-dessus) :

LhEmptyProps

export interface LhEmptyProps {
  /** Texte descriptif de l'état vide (en l'absence de valeur, le pack de langue empty.description est utilisé) */
  description?: string
  /** URL d'image personnalisée (remplace l'illustration inline par défaut) */
  image?: string
  /** Propriétés de mise en page rapide sx */
  sx?: LhSxProps
}