Arbeiten mit themenfähigen Bildern des leeren Status

  • Freigeben Version: Yokohama
  • Aktualisiert 30. Januar 2025
  • 2 Minuten 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, lesen Sie Passen Sie themenfähige Bilder des leeren Status für Ihr Thema an.

    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 Betreffschattierungen. 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

    Abbildung : 10. Hauptobjekt – Bild mit leerem Status
    Hauptobjektbild des leeren Status. Die Textbeschreibung finden Sie in den folgenden Themen-Hook-Informationen.
    Die Design-Hooks, die zum Überschreiben des leeren Statusbilds des Hauptobjekts verwendet werden.
    • now-illustration--empty-state--main-object--outline
    • now-illustration--empty-state--main-object--fill
    Abbildung : 11. Bild des leeren Status des primären Objekts
    Bild des leeren Status des primären Objekts. Die Textbeschreibung finden Sie in den folgenden Themen-Hook-Informationen.
    Die Design-Hooks, die zum Überschreiben des Bilds des leeren Status des primären Objekts verwendet werden.
    • 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--leerer-Status--primäres-Objekt--Schatten
    Abbildung : 12. Bild des leeren Status des tertiären Objekts
    Bild des leeren Status des tertiären Objekts. Die Textbeschreibung finden Sie in den folgenden Themen-Hook-Informationen.
    Die Design-Hooks, die zum Überschreiben des leeren Statusbilds des tertiären Objekts verwendet werden.
    • now-illustration--empty-state--tertiary-object--outline
    • now-illustration--empty-state--tertiary-object--primary-fill
    • now-illustration--empty-state--tertiary-object--tertiary-fill
    • now-illustration--empty-state--tertiary-object--main-detail
    • now-illustration--empty-state--tertiary-object--detail
    • now-illustration--empty-state--tertiäres-Objekt--Schatten
    Abbildung : 13. Hintergrundbild des leeren Status
    Hintergrundbild des leeren Status. Die Textbeschreibung finden Sie in den folgenden Themen-Hook-Informationen.
    Die Design-Hooks, die zum Überschreiben des leeren Statusbilds im Hintergrund verwendet werden.
    • 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--leerer-Status--Hintergrund--Objekt-Schatten
    • now-illustration--empty-state--background--object-fill

    Fallbacks für hellen Modus mit leerem Status

    Tabelle : 1. Fallback-Stildeklarationen für leeren Status des hellen Modus
    Objekt Stildeklaration
    Hauptobjekt 
    
 .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);
}
    Primäres Objekt 
    
 .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);
}
    Tertiäres Objekt 
    
 .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);
}
    Hintergrundobjekt 
    
 .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);
}