Utilisation d’images d’état vide à thème

  • Rversion finale: Australia
  • Mis à jour 12 mars 2026
  • 3 minutes de lecture

    • Ajoutez des images d’état vide à thème pour personnaliser les états vides et améliorer l’expérience utilisateur. Les états vides comprennent des conseils ou des actions permettant aux utilisateurs d’ajouter ou de créer du contenu.

    Lorsqu’un composant ou une partie de votre Next Experience page Web ne contient pas de données, une image d’état vide s’affiche. Les images à l’état vide peuvent être thématisées et s’adaptent aux couleurs de thème de votre instance.

    Figure 1. Image à l'état vide
    Aucune donnée disponible Image de l’état vide

    Il existe 12 types d’images à état vide disponibles, chacun comprenant une version petite, moyenne et grande. Lors de la création d’un thème à l’aide d’un Générateur de thèmes enregistrement d’imagerie de styles UX, cependant, l’enregistrement est vide. Dans ce cas, votre thème utilise par défaut des images à thème à l’état vide du système de base. Si vous choisissez de remplacer ces images, reportez-vous à la section Personnaliser les images d’état vide pouvant être définies sur un thème pour votre thème.

    Vous pouvez insérer une image d’état vide dans votre expérience personnalisée à l’aide du composant Illustration dans Générateur d'IU. Le composant Illustration affiche toutes les images d’état vide disponibles. Pour plus d’informations sur le composant Illustration, reportez-vous à la section État vide d’Horizon Design System.

    Vous pouvez également ajouter des images personnalisées à l’aide du composant Illustration personnalisée dans Générateur d'IU.

    Image d’état vide à thème avec accroches de thème

    Les images suivantes représentent l’image de l’état vide Aucun résultat de recherche ainsi que les accroches de thème requises pour chaque variation.

    Figure 2. Aucun résultat de recherche (accent uni)
    Aucun résultat de recherche image d’état vide, accentuation variation solide. Pour la description du texte, reportez-vous aux informations sur l’accroche du thème ci-dessous.

    L’accroche du thème requise pour cette variation est $now-color_interactive-1.

    Figure 3. Aucun résultat de recherche (contour accentué)
    Aucun résultat de recherche image d’état vide, variation de contour d’accentuation. Pour la description du texte, reportez-vous aux informations sur l’accroche du thème ci-dessous.

    L’accroche du thème requise pour cette variation est $now-color_interactive-3.

    Figure 4. Aucun résultat de recherche (contours subtils)
    Aucun résultat de recherche image d’état vide, variation subtile des contours. Pour la description du texte, reportez-vous aux informations sur l’accroche du thème ci-dessous.

    L’accroche du thème requise pour cette variation est $now-color_border-secondaire.

    Figure 5. Aucun résultat de recherche (détail sombre de l’objet)
    Aucun résultat de recherche image d’état vide, variation de détail sombre du sujet. Pour la description du texte, reportez-vous aux informations sur l’accroche du thème ci-dessous.

    L’accroche thématique requise pour cette variation est $now-color_border-tertiaire.

    Figure 6. Aucun résultat de recherche (détail de la lumière d’objet)
    Aucun résultat de recherche : image d’état vide, variation de détail de la lumière du sujet. Pour la description du texte, reportez-vous aux informations sur l’accroche du thème ci-dessous.

    L’accroche du thème requise pour cette variation est $now-color_background-secondaire.

    Figure 7. Aucun résultat de recherche (objet à remplir)
    Aucun résultat de recherche image état vide, variation de remplissage de sujet. Pour la description du texte, reportez-vous aux informations sur l’accroche du thème ci-dessous.

    L’accroche du thème requise pour cette variation est $now-color_background-primaire.

    Figure 8. Aucun résultat de recherche (contour de l’objet)
    Aucun résultat de recherche : image d’état vide, variation de contour de sujet. Pour la description du texte, reportez-vous aux informations sur l’accroche du thème ci-dessous.

    L’accroche du thème requise pour cette variation est $now-color_border-secondaire.

    Figure 9. Aucun résultat de recherche (ombres de sujet)
    Aucun résultat de recherche image d’état vide, variation d’ombres de sujet. Pour la description du texte, reportez-vous aux informations sur l’accroche du thème ci-dessous.

    L’accroche du thème requise pour cette variation est $now-color_border-secondaire.

    Jetons de mode clair d’état vide

    Figure 10. Image d’état vide de l’objet principal
    Image de l’état vide de l’objet principal. Pour la description du texte, reportez-vous aux informations sur l’accroche du thème ci-dessous.
    Accroches de thème utilisées pour remplacer l’image de l’état vide de l’objet principal.
    • now-illustration--empty-state--main-object--outline
    • now-illustration--empty-state--main-object--fill
    Figure 11. Image d’état vide de l’objet primaire
    Image de l’état vide de l’objet primaire. Pour la description du texte, reportez-vous aux informations sur l’accroche du thème ci-dessous.
    Accroches de thème utilisées pour remplacer l’image de l’état vide de l’objet primaire.
    • now-illustration--empty-state--primary-object--outline
    • now-illustration--empty-state--primary-object--primary-fill
    • now-illustration--empty-state--primary-object--tertiaire-fill
    • now-illustration--empty-state--primary-object--main-detail
    • now-illustration--empty-state--primary-object--detail
    • now-illustration--empty-state--primary-object--shadow
    Figure 12. Image de l’état vide de l’objet tertiaire
    Image d’état vide de l’objet tertiaire. Pour la description du texte, reportez-vous aux informations sur l’accroche du thème ci-dessous.
    Accroches de thème utilisées pour remplacer l’image d’état vide de l’objet tertiaire.
    • now-illustration--empty-state--tertiaire--contour
    • now-illustration--empty-state--tertiaire-object--primary-fill
    • now-illustration--vide-état-tertiaire-objet-tertiaire-remplissage-tertiaire
    • now-illustration--empty-state--tertiaire-object--principal-detail
    • now-illustration--empty-state--tertiaire--detail
    • now-illustration--empty-state--tertiaire--shadow
    Figure 13. Image d’état vide de l’arrière-plan
    Image d’état vide de l’arrière-plan. Pour la description du texte, reportez-vous aux informations sur l’accroche du thème ci-dessous.
    Accroches de thème utilisées pour remplacer l’image d’état vide de l’arrière-plan.
    • now-illustration--empty-state--background--lines
    • now-illustration--empty-state--background--tertiary-lines
    • now-illustration--empty-state--background--object-outline
    • now-illustration--empty-state--background--object-detail
    • now-illustration--empty-state--background--object-shadow
    • now-illustration--empty-state--background--object-fill

    Secours en mode clair à l’état vide

    Tableau 1. Déclarations de style de secours en mode clair à état vide
    Objet Déclaration de style
    Objet principal 
    
 .main-object--outline {
  fill:rgb(var(--empty-state--main-object--outline),
      var(--main-object--outline), var(--now-color--interactive-3), 51,53,123);
}
    		 
    
 .main-object--fill {
  fill:rgb(var(--empty-state--main-object--fill),
      var(--main-object--fill), var(--now-color--interactive-1), 144,146,213);
}
    Objet principal 
    
 .primary-object--outline {
  fill:rgb(var(--empty-state--primary-object--outline),
      var(--primary-object--outline), var(--now-color--border--secondary),
    176,181,191);
}
    		 
    
 .primary-object--primary-fill {

      fill:rgb(var(--empty-state--primary-object--primary-fill),
      var(--primary-object--primary-fill), var(--now-color--background--primary),
      255,255,255);
}
    		 
    
 .primary-object--tertiary-fill {

      fill:rgb(var(--empty-state--primary-object--tertiary-fill),
      var(--primary-object--tertiary-fill), var(--now-color--background--secondary),
      246,246,248);
}
    		 
    
 .primary-object--main-detail {

      fill:rgb(var(--empty-state--primary-object--main-detail), var(--primary-object--main-detail),
      var(--now-color--border--secondary), 176,181,191);
}
    		 
    
 .primary-object--detail {
  fill:rgb(var(--empty-state--primary-object--detail ),
      var(--primary-object--detail ), var(--now-color--border--tertiary),
    211,214,220);
}
    		 
    
 .primary-object--shadow {
  fill:rgb(var(--empty-state--primary-object--shadow),
      var(--primary-object--shadow), var(--now-color--background--tertiary),
    228,230,234);
}
    Objet tertiaire 
    
 .tertiary-object--outline {
  fill:rgb(var(--empty-state--tertiary-object--outline),
      var(--tertiary-object--outline), var(--now-color--border--secondary), 176,181,191);
}
      
    
 .tertiary-object--primary-fill {

      fill:rgb(var(--empty-state--tertiary-object--primary-fill),
      var(--tertiary-object--primary-fill), var(--now-color--background--primary),
      255,255,255);
}
    		 
    
 .tertiary-object--tertiary-fill {

      fill:rgb(var(--empty-state--tertiary-object--tertiary-fill),
      var(--tertiary-object--tertiary-fill), var(--now-color--background--secondary),
      246,246,248);
}
    		 
    
 .tertiary-object--main-detail {

      fill:rgb(var(--empty-state--tertiary-object--main-detail),
      var(--tertiary-object--main-detail), var(--now-color--border--secondary),
      176,181,191);
}
    		 
    
 .tertiary-object--detail {
  fill:rgb(var(--empty-state--primary-object--detail ),
      var(--primary-object--detail ), var(--now-color--border--tertiary),
    211,214,220);
}
    		 
    
 .tertiary-object--shadow {
  fill:rgb(var(--empty-state--tertiary-object--shadow),
      var(--tertiary-object--shadow), var(--now-color--background--tertiary),
    228,230,234);
}
    Objet d’arrière-plan 
    
 .background--lines {
  fill:rgb(var(--empty-state--background--lines),
      var(--background--lines), var(--now-color--border--tertiary), 211,214,220);
}
    		 
    
 .background--tertiary-lines {

      fill:rgb(var(--empty-state--background--tertiary-lines), var(--background--tertiary-lines),
      var(--now-color--border--tertiary), 211,214,220);
}
    		 
    
 .background--object-outline {

      fill:rgb(var(--empty-state--background--object-outline), var(--background--object-outline),
      var(--now-color--border--tertiary), 211,214,220);
}
    		 
    
 .background--object-detail {
  fill:rgb(var(--empty-state--background--object-detail),
      var(--background--object-detail), var(--now-color--border--tertiary),
    211,214,220);
}
    		 
    
 .background--object-shadow {
  fill:rgb(var(--empty-state--background--object-shadow),
      var(--background--object-shadow), var(--now-color--background--tertiary),
      228,230,234);
}
    		 
    
 .background--object-fill {
  fill:rgb(var(--empty-state--background--object-fill),
      var(--background--object-fill), var(--now-color--background--primary),
    255,255,255);
}