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

  • Rversion finale: Yokohama
  • Mis à jour 30 janv. 2025
  • 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 incluent 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 apparaît. Les images d’état vide peuvent être thématisées et s’adaptent aux couleurs de thème de votre instance.

    Figure 1. Image d’é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 style UX, un enregistrement d’imagerie est créé, mais 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, voir É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 crochets 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 continu)
    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 qui suivent.

    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, accentuation variation de contour. Pour la description du texte, reportez-vous aux informations sur l’accroche du thème qui suivent.

    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, variations de contours subtils. Pour la description du texte, reportez-vous aux informations sur l’accroche du thème qui suivent.

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

    Figure 5. Aucun résultat de recherche (détail sombre du sujet)
    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 qui suivent.

    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 du sujet)
    Aucun résultat de recherche image d’état vide, variation des détails de la lumière du sujet. Pour la description du texte, reportez-vous aux informations sur l’accroche du thème qui suivent.

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

    Figure 7. Aucun résultat de recherche (remplissage de l’objet)
    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 qui suivent.

    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 état vide, variation du contour du sujet. Pour la description du texte, reportez-vous aux informations sur l’accroche du thème qui suivent.

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

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

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

    Jetons de mode d’éclairage d’état vide

    Figure 10. Image de l’é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 qui suivent.
    Les crochets de thème utilisés pour remplacer l’image d’état vide de l’objet principal.
    • now-illustration--empty-state--main-object--outline
    • now-illustration--empty-state--main-object--fill
    Figure 11. Image de l’é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 qui suivent.
    Les crochets de thème utilisés 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--tertiary-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 de l’état vide de l’objet tertiaire. Pour la description du texte, reportez-vous aux informations sur l’accroche du thème qui suivent.
    Les crochets de thème utilisés pour remplacer l’image d’état vide de l’objet tertiaire.
    • now-illustration--état-vide--objet-tertiaire--contour
    • now-illustration--empty-state--tertiary-object--primary-fill
    • now-illustration--état-vide--objet-tertiaire-remplir-tertiaire
    • now-illustration--état-vide--objet-tertiaire--détail_principal
    • now-illustration--vide-état--tertiaire--détail
    • now-illustration--empty-state--tertiary-object--shadow
    Figure 13. Image d’état vide de l’arrière-plan
    Image d’état vide d’arrière-plan. Pour la description du texte, reportez-vous aux informations sur l’accroche du thème qui suivent.
    Crochets de thème utilisés pour remplacer l’image d’état vide d’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 voyant à l’état vide

    Tableau 1. État vide : déclarations de style de secours en mode clair
    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);
}