Screenshots

Die Screenshot-Komponente rendert themenbewusste Bilder, die automatisch zwischen hellen und dunklen Varianten wechseln, wenn der Benutzer das Website-Design umschaltet. Verwenden Sie sie, wenn Sie UI-Screenshots anzeigen müssen, die dem aktuellen Farbschema des Lesers entsprechen sollen.

Referenz der Props

Prop	Typ	Erforderlich	Beschreibung
light	string	Nein	Pfad zum Hellmodus-Bild
dark	string	Nein	Pfad zum Dunkelmodus-Bild
alt	string	Ja	Alt-Text für Barrierefreiheit
width	number	Nein	Bildbreite in Pixeln
height	number	Nein	Bildhöhe in Pixeln

Hinweis

Mindestens eines der Felder light oder dark muss angegeben werden. Wenn beide angegeben sind, wechselt die Komponente basierend auf dem aktiven Design zwischen ihnen.

Dualmodus (Hell + Dunkel)

Geben Sie sowohl light- als auch dark-Props an, um die richtige Variante für jedes Design anzuzeigen. Schalten Sie die Designauswahl in der oberen rechten Ecke um, um den Bildwechsel zu sehen.

import Screenshot from '@f5-sales-demo/docs-theme/components/Screenshot.astro';

<Screenshot
  light="/images/screenshot-example-light.png"
  dark="/images/screenshot-example-dark.png"
  alt="Docs theme homepage"
/>

Tipp

Erfassen Sie beim Dokumentieren von Benutzeroberflächen stets sowohl helle als auch dunkle Screenshots. Dies gibt den Lesern eine genaue Darstellung, unabhängig von ihrer Designpräferenz.

Einzelbild

Wenn nur eine Variante verfügbar ist, übergeben Sie nur light oder dark. Das Bild wird in beiden Designs gerendert, ohne zu wechseln.

<Screenshot
  dark="/images/screenshot-example-dark.png"
  alt="Docs theme homepage (dark only)"
/>

Mit Abmessungen

Verwenden Sie width und height, um die gerenderte Größe zu steuern und Layoutverschiebungen zu vermeiden.

<Screenshot
  light="/images/screenshot-example-light.png"
  dark="/images/screenshot-example-dark.png"
  alt="Docs theme homepage at fixed width"
  width={600}
  height={338}
/>

Funktionsweise

Die Komponente rendert ein oder zwei <img>-Elemente innerhalb eines .screenshot-pair-Wrappers. CSS-Regeln schalten die Sichtbarkeit basierend auf dem aktiven Design um:

• Dunkelmodus (Standard) — das .screenshot-light-Bild wird ausgeblendet via :root:not([data-theme="light"]) .screenshot-light \{ display: none \}
• Hellmodus — das .screenshot-dark-Bild wird ausgeblendet via :root[data-theme="light"] .screenshot-dark \{ display: none \}

Zusätzliche Selektoren verarbeiten den starlight-image-zoom-Wrapper mithilfe von :has(), sodass die Zoom-Funktionalität mit beiden Varianten korrekt funktioniert.

Alle Screenshot-Bilder erhalten ein einheitliches Styling: einen dezenten Rahmen, abgerundete Ecken und einen Schlagschatten, der beim Hover intensiver wird.

Vergleich mit Markdown-Bildern

Funktion	Screenshot-Komponente	Markdown 
Themenbewusstes Wechseln	Ja	Nein
Gestalteter Rahmen und Schatten	Automatisch	Nein
Hover-Schatteneffekt	Ja	Nein
Zoom-Unterstützung	Funktioniert mit dem Bild-Zoom-Plugin	Funktioniert mit dem Bild-Zoom-Plugin
Alt-Text	alt-Prop	![alt text]()

Verwenden Sie die Screenshot-Komponente, wenn Sie designspezifische Bildvarianten haben oder das gestaltete Screenshot-Erscheinungsbild wünschen. Verwenden Sie Standard-Markdown-Bilder für eingebettete Grafiken, Diagramme oder Bilder, die in beiden Designs gleich aussehen.