Arbeiten mit Bildstilen

  • Freigeben Version: Zurich
  • Aktualisiert 31. Juli 2025
  • 1 Minute Lesedauer

    • Mit Bildstilen können Sie mit verschiedenen Farbschemata für Illustrationen experimentieren und Standardabbildungen durch eigene anwenderdefinierte Bilder ersetzen. Die Funktion „Bildstile“ bietet Flexibilität bei der Anpassung der visuellen Elemente Ihres Designs.

    Leere Statusabbildungen

    Wenn eine Komponente oder ein Teil von Next Experience Webseite enthält keine Daten, eine leere Statusabbildung wird angezeigt. Abbildungen für leere Status sind themenfähig und passen sich an die Designfarben Ihrer Instanz an.
    Wichtig:
    Abbildungen zum leeren Status gelten für Arbeitsbereiche und werden in nicht unterstützt Core-UI.
    Abbildung : 1. Leere Statusabbildung
    Keine Daten verfügbar – Abbildung mit leerem Status.
    Die Funktion „Bildstile“ bietet die folgenden Arten von Illustrationstypen mit leerem Status, jeweils eine kleine, mittlere und große Version:
    • Anhang hinzufügen
    • Daten hinzufügen
    • Abgeschlossene Aufgaben
    • Abgeschlossene Aufgaben
    • Fehler
    • Erstanwender
    • Unterbrochen
    • Keine Aktivitäten
    • Keine Daten
    • Abgeschlossene Aufgaben
    • Keine Berechtigung
    • Abgeschlossene Aufgaben
    • Keine Suchergebnisse
    • Abgeschlossene Aufgaben
    • Offline
    • Nicht konfiguriert

    Anwenderdefinierte Bilder

    Laden Sie Ihre anwenderdefinierten Bilder in hoch Themengenerator Zum Ersetzen der standardmäßigen Abbildungen zum leeren Status.

    Um die standardmäßigen Abbildungen des leeren Status mit anwenderdefinierten Bildern zu überschreiben, laden Sie jede Bildgröße einzeln hoch. Sie können nur eine Größe oder alle drei Größen eines leeren Statustyps überschreiben. Die Größen- und Formatbeschränkungen für jede der drei Dateigrößen lauten wie folgt:
    Tabelle : 1. Kleine Bildgröße und Formatbeschränkungen
    Feld Beschreibung
    Begrenzung der Abmessungen w56 x h56 px
    Format SVG
    Dateigrößenbeschränkung 2 MB
    Tabelle : 2. Mittlere Bildgröße und Formatbeschränkungen
    Feld Beschreibung
    Begrenzung der Abmessungen w216 x h168 px
    Format SVG
    Dateigrößenbeschränkung 2 MB
    Tabelle : 3. Große Bildgröße und Formatbeschränkungen
    Feld Beschreibung
    Begrenzung der Abmessungen w350 x H318 px
    Format SVG
    Dateigrößenbeschränkung 2 MB
    Abbildungen für leeren Status sind von zwei Design-Token abhängig, die ihre Farbe verarbeiten:
    • --empty-State--Main-object--fill
    • --empty-State--Main-object—Gliederung
    Anwenderdefinierte Bilder spiegeln Ihre Designfarben nicht automatisch wider. Um Ihr Bilddesign zu ermöglichen, fügen Sie diese Token Ihrem Code mit Ihrem bevorzugten Texteditor hinzu, bevor Sie die anwenderdefinierte SVG in hochladen Themengenerator. Nach dem Hinzufügen dieser Token zu Ihrem Bildcode übernehmen die Bilder Ihre Designfarben und ermöglichen Ihnen, die Farben beim Hochladen in zu zu bearbeiten Themengenerator.
    Das folgende Beispiel zeigt die angewendeten Design-Token. 
    <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>