Utilisation des styles d’image

  • Rversion finale: Zurich
  • Mis à jour 31 juil. 2025
  • 2 minutes de lecture

    • Les styles d’image vous permettent d’expérimenter différents modèles de couleurs pour les illustrations et de remplacer les illustrations par défaut par vos propres images personnalisées. La fonctionnalité Styles d’image offre une flexibilité dans la personnalisation des éléments visuels de votre thème.

    Illustrations d’états vides

    Lorsqu’un composant ou une partie de votre Next Experience page Web ne contient pas de données, une illustration d’état vide apparaît. Les illustrations d’état vide peuvent être thématisées et s’adaptent aux couleurs de thème de votre instance.
    Important :
    Les illustrations d’état vide s’appliquent aux espaces de travail et ne sont pas prises en charge dans le Interface utilisateur principale.
    Figure 1. Illustration d'état vide
    Aucune donnée disponible Illustration de l’état vide
    La fonction Styles d’image propose les types suivants de types d’illustration à l’état vide, chacun comprenant une version petite, moyenne et grande :
    • Ajouter une pièce jointe
    • Ajouter des données
    • Tâches terminées
    • Tâches terminées
    • Erreur
    • Utilisateur pour la première fois
    • Interrompu
    • Aucune activité
    • Aucune donnée
    • Tâches terminées
    • Aucune autorisation
    • Tâches terminées
    • Aucun résultat de recherche
    • Tâches terminées
    • Hors ligne
    • Non configuré

    Images personnalisées

    Chargez vos images Générateur de thèmes personnalisées pour remplacer les illustrations d’état vides par défaut.

    Pour remplacer les illustrations d’état vide par défaut par des images personnalisées, chargez chaque taille d’image individuellement. Vous pouvez choisir de remplacer une seule taille ou les trois tailles d’un type d’état vide. Les limitations de taille et de format pour chacune des trois tailles de fichier sont les suivantes :
    Tableau 1. Limitations de la taille et du format des petites images
    Champ Description
    Limite de dimensions W56 x H56 px
    Format SVG
    Limite de taille de fichier 2 Mo
    Tableau 2. Limites de taille et de format d’image moyens
    Champ Description
    Limite de dimensions L216 x H168 px
    Format SVG
    Limite de taille de fichier 2 Mo
    Tableau 3. Limitations de la taille et du format des images volumineuses
    Champ Description
    Limite de dimensions L350 x H318 px
    Format SVG
    Limite de taille de fichier 2 Mo
    Les illustrations d’état vides dépendent de deux jetons de conception qui gèrent leur couleur :
    • --vide-état--objet-principal--remplir
    • --vide-état--principal-objet—contour
    Les images personnalisées ne reflètent pas automatiquement les couleurs de votre thème. Pour que votre image puisse être thématisée, ajoutez ces jetons à votre code à l’aide de votre éditeur de texte préféré avant de charger le SVG personnalisé dans Générateur de thèmes. Après avoir ajouté ces jetons à votre code image, les images adopteront les couleurs de votre thème et vous permettront de modifier les couleurs lorsqu’elles seront téléchargées sur Générateur de thèmes.
    L’exemple suivant montre les jetons de conception appliqués. 
    <style>
    .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))));
    }
  </style>