Arbeiten mit themenfähigen leeren Statusbildern

  • Freigeben Version: Zurich
  • Aktualisiert 31. Juli 2025
  • 2 Minuten Lesedauer

    • Fügen Sie themenfähige Bilder mit leerem 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 von Next Experience Webseite enthält keine Daten, ein leeres Statusbild wird angezeigt. Leere Statusbilder sind designfähig und passen sich den Designfarben Ihrer Instanz an.

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

    Es sind 12 leere Statusbildtypen verfügbar, jeder einschließlich einer kleinen, mittleren und großen Version. Beim Erstellen eines Designs mit Themengenerator Ein Datensatz für UX-Stile-Bilder wird erstellt, der Datensatz ist jedoch leer. In diesem Fall verwendet Ihr Design standardmäßig themenfähige Bilder des Basissystems mit leerem Status. Informationen zum Überschreiben dieser Bilder finden Sie unter Passen Sie themenfähige leere Statusbilder für Ihr Design an.

    Sie können ein leeres Statusbild in Ihre anwenderdefinierte Experience einfügen, indem Sie die Illustrationskomponente in verwenden UI Builder. Die Abbildungskomponente zeigt alle verfügbaren leeren Statusbilder an. Weitere Informationen zur Illustrationskomponente finden Sie unter Leerer Status Des Horizont-Designsystems .

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

    Design-fähiges Bild mit leerem Status mit Designhaken

    Die folgenden Bilder stellen das Statusbild „keine Suchergebnisse leer“ zusammen mit den für jede Variante erforderlichen Design-Hooks dar.

    Abbildung : 2. Keine Suchergebnisse (Akzent einfarbig)
    Keine Suchergebnisse – Bild mit leerem Status, Variationen des Akzent-Volumens. Die Textbeschreibung finden Sie in den folgenden Informationen zum Design Hook.

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

    Abbildung : 3. Keine Suchergebnisse (Akzentstruktur)
    Keine Suchergebnisse – leeres Statusbild, Akzentumrissvariation. Die Textbeschreibung finden Sie in den folgenden Informationen zum Design Hook.

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

    Abbildung : 4. Keine Suchergebnisse (subtile Umrisse)
    Keine Suchergebnisse – leeres Statusbild, subtile Umrissvariante. Die Textbeschreibung finden Sie in den folgenden Informationen zum Design Hook.

    Der für diese Variante erforderliche Design-Hook ist $now-color_border-sekundär .

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

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

    Abbildung : 6. Keine Suchergebnisse (Betreff-Lichtdetail)
    Keine Suchergebnisse – Bild mit leerem Status, Variation der hellen Details des Betreffs. Die Textbeschreibung finden Sie in den folgenden Informationen zum Design Hook.

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

    Abbildung : 7. Keine Suchergebnisse (Betrefffüllung)
    Keine Suchergebnisse – leeres Statusbild, Variation der Betrefffüllung. Die Textbeschreibung finden Sie in den folgenden Informationen zum Design Hook.

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

    Abbildung : 8. Keine Suchergebnisse (Betreff-Gliederung)
    Keine Suchergebnisse – leeres Statusbild, Variation der Betreffstruktur. Die Textbeschreibung finden Sie in den folgenden Informationen zum Design Hook.

    Der für diese Variante erforderliche Design-Hook ist $now-color_border-sekundär .

    Abbildung : 9. Keine Suchergebnisse (Betreffschatten)
    Keine Suchergebnisse – leeres Statusbild, Variation der Betreffschatten. Die Textbeschreibung finden Sie in den folgenden Informationen zum Design Hook.

    Der für diese Variante erforderliche Design-Hook ist $now-color_border-sekundär .

    Leere Status-Light-Modus-Token

    Abbildung : 10. Hauptobjekt – Bild mit leerem Status
    Hauptobjekt – leeres Statusbild. Die Textbeschreibung finden Sie in den folgenden Informationen zum Design Hook.
    Die Designhaken, 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. Primäres Objekt – Bild mit leerem Status
    Primäres Objekt – Bild mit leerem Status. Die Textbeschreibung finden Sie in den folgenden Informationen zum Design Hook.
    Die Designhaken, die zum Überschreiben des leeren Statusbilds 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--tertiär-fill
    • Now-Illustration--empty-State--primary-object--Main-Detail
    • Now-Illustration--empty-State--primary-object--Detail
    • Now-Illustration--empty-State--primary-object--Shadow
    Abbildung : 12. Tertiäres Objekt – Bild mit leerem Status
    Tertiäres Objekt – Bild mit leerem Status. Die Textbeschreibung finden Sie in den folgenden Informationen zum Design Hook.
    Die Themenhaken, die zum Überschreiben des leeren Statusbilds des tertiären Objekts verwendet werden.
    • Now-Illustration--empty-State--tertiäres-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--tertiäres-object--Detail
    • Now-Illustration--empty-State--tertiäres-object--Shadow
    Abbildung : 13. Hintergrundbild mit leerem Status
    Hintergrundbild mit leerem Status. Die Textbeschreibung finden Sie in den folgenden Informationen zum Design Hook.
    Die Themenhaken, die zum Überschreiben des leeren Hintergrundstatusbilds verwendet werden.
    • Now-Illustration--empty-State--background--lines
    • Now-Illustration--empty-State--background--tertiäre Linien
    • Now-Illustration--empty-State--background--object-outline
    • Now-Illustration--empty-State--background--object-Detail
    • Now-Illustration--empty-State--background--object-Shadow
    • Now-Illustration--empty-State--background--object-fill

    Fallbacks für Lichtmodus mit leerem Status

    Tabelle : 1. Fallback-Stildeklarationen im Lichtmodus für leeren Status
    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);
}