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

  • Rversion finale: Xanadu
  • Mis à jour 29 août 2024
  • 1 minute 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 s’affiche. Les images à l’état vide peuvent être thématisées et s’adaptent aux couleurs du thème de votre instance.

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

    Il existe 12 types d’images à l’état vide disponibles, chacun comprenant une version petite, moyenne et grande. Toutefois, lors de la création d’un thème à l’aide d’un enregistrement d’imagerie Générateur de thèmes de styles UX, il 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 .

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

    Vous pouvez également ajouter des images personnalisées à l’aide du composant Illustration personnalisée de .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 fixe)
    Aucun résultat de recherche : image à l’état vide, accent : variation solide. Pour la description du texte, reportez-vous aux informations de l’accroche du thème qui suit.

    L’accroche thématique requise pour cette variante est $now-color_interactive-1.

    Figure 3. Aucun résultat de recherche (accent mis sur le plan)
    Aucun résultat de recherche image à l’état vide, accentuation de la variation des contours. Pour la description du texte, reportez-vous aux informations de l’accroche du thème qui suit.

    L’accroche thématique requise pour cette variante est $now-color_interactive-3.

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

    L’accroche thématique requise pour cette variante est $now-color_border-secondaire.

    Figure 5. Aucun résultat de recherche (détail foncé du sujet)
    Aucun résultat de recherche image à l’état vide, variation des détails sombres du sujet. Pour la description du texte, reportez-vous aux informations de l’accroche du thème qui suit.

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

    Figure 6. Aucun résultat de recherche (détails clairs du sujet)
    Aucun résultat de recherche image à l’état vide, variation des détails de la lumière du sujet. Pour la description du texte, reportez-vous aux informations de l’accroche du thème qui suit.

    L’accroche thématique requise pour cette variante est $now-color_background-secondaire.

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

    L’accroche thématique requise pour cette variante est $now-color_background-primaire.

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

    L’accroche thématique requise pour cette variante est $now-color_border-secondaire.

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

    L’accroche thématique requise pour cette variante est $now-color_border-secondaire.

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