Arbeiten mit themenfähigen Bildern des leeren Status

  • Freigeben Version: Xanadu
  • Aktualisiert 29. August 2024
  • 1 Minute Lesedauer

    • Fügen Sie themenfähige Bilder für leere Status hinzu, um leere Status anzupassen und die Anwender-Experience zu verbessern. Leere Status enthalten Anleitungen oder Aktionen für Anwender zum Hinzufügen oder Erstellen von Inhalten.

    Wenn eine Komponente oder ein Teil Ihrer Webseite Next Experience keine Daten enthält, wird ein leeres Statusbild angezeigt. Leere Statusbilder sind themenfähig und werden an die Designfarben Ihrer Instanz angepasst.

    Abbildung : 1. Leeres Statusbild
    Keine Daten verfügbar – leeres Statusbild.

    Es stehen 12 Bildtypen für den leeren Status zur Verfügung, jeweils mit kleiner, mittlerer und großer Version. Beim Erstellen eines Designs mit Themengenerator wird ein UX-Stilbilder-Datensatz erstellt, der Datensatz ist jedoch leer. In diesem Fall verwendet Ihr Design standardmäßig ein designfähiges Basissystem-Image mit leerem Status. Wenn Sie diese Bilder überschreiben möchten, finden Sie weitere Informationen unter.

    Sie können ein leeres Statusbild in Ihre anwenderdefinierte Experience einfügen, indem Sie die Abbildungskomponente in UI Builderverwenden. Die Abbildungskomponente zeigt alle verfügbaren Bilder mit dem leeren Status an. Weitere Informationen zur Komponente „Darstellung“ finden Sie unter Leerer Status des Horizontdesignsystems.

    Sie können auch anwenderdefinierte Bilder mit der Komponente „Anwenderdefinierte Abbildung“ in UI Builderhinzufügen.

    Themenfähiges leeres Statusbild mit Themen-Hooks

    Die folgenden Abbildungen zeigen das Bild des leeren Status „Keine Suchergebnisse“ zusammen mit den für jede Variation erforderlichen Design-Hooks.

    Abbildung : 2. Keine Suchergebnisse (Akzent gefüllt)
    Keine Suchergebnisse – leeres Statusbild, Variation in Volltonfarbe. Die Textbeschreibung finden Sie in den folgenden Themen-Hook-Informationen.

    Der für diese Variante erforderliche Design-Hook ist $now-color_interactive-1.

    Abbildung : 3. Keine Suchergebnisse (Akzentumriss)
    Keine Suchergebnisse – leeres Statusbild, Akzentumrissvariation. Die Textbeschreibung finden Sie in den folgenden Themen-Hook-Informationen.

    Der für diese Variante erforderliche Design-Hook ist $now-color_interactive-3.

    Abbildung : 4. Keine Suchergebnisse (subtile Umrisse)
    Keine Suchergebnisse – leeres Statusbild, Variation der geringfügigen Umrisse. Die Textbeschreibung finden Sie in den folgenden Themen-Hook-Informationen.

    Der für diese Variante erforderliche Design-Hook ist $now-color_frame-secondary.

    Abbildung : 5. Keine Suchergebnisse (dunkles Details zum Betreff)
    Keine Suchergebnisse – leeres Statusbild, dunkle Detailvariation des Betreffs. Die Textbeschreibung finden Sie in den folgenden Themen-Hook-Informationen.

    Der für diese Variante erforderliche Design-Hook ist $now-color_frame-tertiary.

    Abbildung : 6. Keine Suchergebnisse (helles Betreffdetails)
    Keine Suchergebnisse – leeres Statusbild, Betreff hell – Detailvariation. Die Textbeschreibung finden Sie in den folgenden Themen-Hook-Informationen.

    Der für diese Variante erforderliche Design-Hook ist $now-color_background-secondary.

    Abbildung : 7. Keine Suchergebnisse (Betreff ausfüllen)
    Keine Suchergebnisse – leeres Statusbild, Betreff-Ausfüllungsvariation. Die Textbeschreibung finden Sie in den folgenden Themen-Hook-Informationen.

    Der für diese Variante erforderliche Design-Hook ist $now-color_background-primary.

    Abbildung : 8. Keine Suchergebnisse (Betreffgliederung)
    Keine Suchergebnisse – leeres Statusbild, Variation der Betreffgliederung. Die Textbeschreibung finden Sie in den folgenden Themen-Hook-Informationen.

    Der für diese Variante erforderliche Design-Hook ist $now-color_frame-secondary.

    Abbildung : 9. Keine Suchergebnisse (Betreffbeschattung)
    Keine Suchergebnisse – leeres Statusbild, Variation der Betreffschattierung. Die Textbeschreibung finden Sie in den folgenden Themen-Hook-Informationen.

    Der für diese Variante erforderliche Design-Hook ist $now-color_frame-secondary.

    Token für hellen Modus mit leerem Status